How to change back button route in react navigation

react-navigation stacknavigator back button
react-navigation header back button
react-navigation back button
headerbackbutton react-navigation
react-navigation custom back button
react-navigation header height
react-native navigation back button
react-navigation headerbacktitle

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.

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"/>

Moving between screens, but forcing our users to clone our repository and change the route in our code provided by stack navigator will automatically include a back button when it is  If you want to customize the back button image, you can use headerBackImage in navigationOptions of a StackNavigator, which is used to replace the default back button image and it won't be displayed without history.

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

Header buttons, The most common way to interact with a header is by tapping on a button either to the left or the right of the title. options={({ navigation, route }) => ({ You can change the label behavior with headerBackTitle and The back button will be rendered automatically in a stack navigator whenever it is possible for the user to​  On Android, React Navigation hooks in to the hardware back button and fires the goBack() function for you when the user presses it, so it behaves as the user would expect.

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}) => {
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('Home')}}/>)

How to customize the back button in Stack Navigator · Issue #779 , I want to use an icon to replace the current back button. using Redux with my react navigation and my screens are written in a routes.js file  You can use headerBackTitle prop to control back button title. headerBackTitle. Title string used by the back button on iOS, or null to disable label. Defaults to the previous scene's headerTitle. Example

It´s possible to manually add a back button in the headerLeft? · Issue , I need the profile screen to have a button to go back. I don´t know if it can be done manually or I would have to change the code. import { HeaderBackButton } from 'react-navigation'; const navigationOptions = ({ navigation })  If the route is private and the user is not signed in, then we will send him back to sign in page. If the route is not private but the user is already signed in, then we send him to the main page

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. Home BookTicket MyBookings these are the screens i have in​  To customize the back button image, you can use headerBackImage. #Overriding the back button. The back button will be rendered automatically in a stack navigator whenever it is possible for the user to go back from their current screen — in other words, the back button will be rendered whenever there is more than one screen in the stack.

Getting that Back Button With React Navigation, Getting that Back Button With React Navigation and used the React Navigation library to handle routing and navigation, as is recommended by Expo. define declaratively and change the screen definitions of a navigator. react-navigation / react-navigation. Question: How do you style the back button? #429. if You want to change color of back button on the next screen, you have

  • Have you tried using navigation.navigate([path])?
  • ya i tried but didn't work for my case.but thanks for the comments.
  • Welcome mate, glad that it worked!