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 screen.

Thanks.

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:

<RootStack.Screen
    name="dashboard"
    component={Dashboard}
    options={({navigation, route}) => ({
          headerLeft: (props) => (
            <HeaderBackButton
              {...props}
              onPress={() => navigation.navigate('Home')}
            />
          ),
     })}
  />

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

Enjoy & Thanks -Sukshith

Answer 2

You could try 2 things:

a) use headerMode: 'none' in your sub-StackRouters instead of your root router (named RouterComponent). Ideally you shouldn't have to do anything more then and the headers of the sub-StackRouters would be displayed in your root router's header. I think I remember something similarly worked a while back for me, but I haven't tested it in a while now and I think it's unlikely that it will still work like this but you can test nevertheless.

b) and this is what I'm currently using in a different situation. To manually include the back button:

import { HeaderBackButton } from '@react-navigation/stack';

const navigationOptions = ({ navigation }) => ({
    headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
})

const RouterComponent = StackNavigator({
    Tabs: {
        screen: Tabs
    },
    Profile: {
        screen: ProfileStack,
        navigationOptions
    }
},{
    mode: 'modal',
    headerMode: 'none',
});

If above solution doesn't work,

Try to add navigationOptions directly to the ProfileStack definition.

const ProfileStack = StackNavigator({
    ProfileHome: { 
      screen: ProfileHome, 
      navigationOptions: ({navigation}) => ({ //don't forget parentheses around the object notation
        title: 'Profile',
        headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />
      })
    },
    ProfileEdit: { screen: ProfileEdit }
  }