How to change back button route in react navigation

Question

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.

Answer 1

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"/>
       )}
});