CODEWITHSUNDEEP
reactjsreact-nativereact-navigationstack-navigator
Sathish Sundharam
Sathish Sundharam

Reputation: 1130

How to change back button route in react navigation

i am using react-navigation (stack-navigation). i want to change my header back button icon route.

  1. Home
  2. BookTicket

  3. MyBookings

    these are the screens i have in my project.Now when i click header back button in MyBookings screen it should route to Home Screen.

Upvotes: 6

Views: 16188

Answers (3)

Varun Gupta
Varun Gupta

Reputation: 511

So, the default functionality of React Navigation is:- If you press the Back Button on Mybookings screen, it will take you to previous screen i.e, BookTicket screen. To override that you could do something like this on MyBookings screen:-

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('Home')}}/>)
 }
}

Upvotes: 4

Pauloco
Pauloco

Reputation: 1089

If you don´t want to use custom back buttons (e. g. to avoid dealing with the different "native" button designs), there is also the possibility to reset the navigation state. In your case like this: 

import { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 2,
  actions: [
    NavigationActions.navigate({ routeName: 'Home' }),
    NavigationActions.navigate({ routeName: 'BookTicket' }),
    NavigationActions.navigate({ routeName: 'MyBookings' }),
  ],
});
this.props.navigation.dispatch(resetAction);

This way you just set a stack of navigations and let it jump to the index position.

This setup must be done at the departing scene, so that in the next scene the back button works as expected.

But I prefer this way anyway, because it allows to maintain the default look of the header and keeps the stack clean. If you use navigation.navigate instead of navigation.back the stack becomes totally wrong for the back button.

Upvotes: 3

Rajan Maharjan
Rajan Maharjan

Reputation: 4982

There must be back button in default if your stackNavigator stack is properly configured.

But if you would like to replace the default button just add headerLeft and pass your custom component Screen Navigation Options in the page you want to change the back button handler

CreateAccountScreen.navigationOptions = ({navigation}) => ({
  headerStyle: styles.headerStyle,
  title: 'Create Account',
  headerTintColor: '#fefefe',
  headerTitleStyle: styles.headerTitleStyle,
  headerLeft: {()=>(
          <Icon name="chevron-left"
                onPress={() => navigation.goBack(null)}
                size={35} color="white"/>
       )}
});

Upvotes: 5

Related Questions