Custom back navigation for reactnavigation back button

Question

How can I give a custom navigation to the header back arrow in ReactNavigation? I want the back arrow in the header to navigate to the screen I define and not to the previous sc

Answer 1

Hi who ever is using react-navigation 5.x you might not be able to make navigation using navigationOptions. The option is been replaced with options.

Say your in screen -1 and navigated to screen-2 and then to screen-3. By default using react-navigation you can navigate from screen-3 to screen-2. But if you want customised navigation i.e., Say from above example if you want to navigate from screen-3 to screen-1.

If you would like to retain the view of back button and only override the onPress method, you can import HeaderBackButton from @react-navigation/stack and assign that component to the headerLeft option.

Example:

 ({
          headerLeft: (props) => (
             navigation.navigate('Home')}
            />
          ),
     })}
  />

In above example on click of back button in Dashboard screen takes you to Home screen.

Enjoy & Thanks -Sukshith