How to change the back button label, react-navigation

Question

I'm using react-navigation, and I can't change the locale of the default 'back' button.

In my Stack Navigator, if I write down a title for the main page, and if it's not too long, it will display the page title instead of 'back'.

export const Root = StackNavigator({
Index: {
    screen: Index,
    navigationOptions: ({ navigation }) => ({
        title: "My App name", //Not working when too long
    }),
},

How can I do that ?

score 48 · Accepted Answer · answered Oct 21 '17 at 16:22

48

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

const SomeNavigator = StackNavigator({
   Main: { screen: Main },
   Login: { 
     screen: Login,
     navigationOptions: {
       headerBackTitle: 'some label'
     }
   }
 });

answered Oct 21 '17 at 16:22

bennygenel

23,896
6
65
78

Is it possible to do it programmatically in login screen code ? I would like to personalize it and translate it... – Eric Feb 22 '20 at 10:38
You may need to arrange it (`headerBackTitle: null`) in the options part (the second parameter) of the createStackNavigator or StackNavigator in App. – Gürol Canbek May 23 '20 at 20:13
How do I set the default `headerBackTitle`? If I specify it in my stack navigator then all screens will have that title, but I only want the custom header back title when the previous screen's title is too long – Nermin Aug 10 '21 at 16:09

score 32 · Answer 2 · answered May 18 '20 at 10:14

UPDATE as of version 5

As of version 5, it is the option headerBackTitleVisible in screenOptions

Example of usage:

<Stack.Navigator
  screenOptions={{
    headerBackTitleVisible: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

if you want only to hide in the single screen you can do this by setting the screenOptions on the screen component see below for example:

<Stack.Screen options={{headerBackTitleVisible: false}} name="route-name" component={ScreenComponent} />

score 8 · Answer 3 · edited Jun 20 '20 at 09:12

8

Actually, when I update react-navigation to version three, the back button appears a title.

So I pass a null to headerBackTitle and set a component to headerBackImage and I got bellow UI that I desired:

So write like below:

defaultNavigationOptions: {
  headerBackImage: <GoBack />,
  headerBackTitle: null,
};

hint: please use defaultNavigationOptions instead of navigationOptions.

Update (v5.x)

In the newer version, there is headerBackTitleVisible option key that gets boolean values by setting it to false the back title will disappear.

defaultNavigationOptions: {
  headerBackImage: <GoBack />,
  headerBackTitleVisible: false,
};

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 08 '18 at 11:43

AmerllicA

29,059
15
130
154

1

setting `headerBackTitleVisible: false` worked for me – a_rahmanshah Apr 19 '20 at 15:48
2

Dear @a_rahmanshah, This answer is for a long time ago, at that moment there was no `headerBackTitleVisible` option key. – AmerllicA Apr 19 '20 at 16:22

score 7 · Answer 4 · answered Mar 02 '20 at 12:51

7

headerBackTitle = null and headerBackTitle = '' both didnt worked in my case but in second option add single space like headerBackTitle = ' ' gives me my desired look. It removes the text and added single space.

answered Mar 02 '20 at 12:51

Khim Bahadur Gurung

626
9
19

1

Also for `4.3.x` the option `headerBackTitleVisible: false` works too. – Chaki_Black May 19 '20 at 01:09

score 0 · Answer 5 · edited May 20 '20 at 07:04

    UserProfile: {
    screen: UserProfile,
    navigationOptions: () => ({
      title:'Profile',
      headerBackImage: <Icon name="remove" 
                            size={25} 
                            color="white" />,
      headerTintColor: '#fff',
      headerRight:<Icon style={{paddingRight:30}}
                        name="edit" 
                        size={25} 
                        color="white"></Icon>,

     //headerTintColor: 'Colors.DarkBlue',
      headerStyle: {
        backgroundColor: '#0049b8',
        TextColor:'white',
      },
    }),
  },

score 0 · Answer 6 · answered Apr 22 '21 at 10:40

<MyStack.Navigator
      screenOptions={{
        headerTruncatedBackTitle: 'translated back label',
      }}   
    >

Version 5.x: This solution preserves the actual behavior of React Navigation. The back button is shown only if the route name is too long.

score -3 · Answer 7 · answered Oct 26 '21 at 09:48

-3

From v5 you can hide the title like this.

<Stack.Navigator screenOptions={{ headerBackTitleVisible: false }}>

answered Oct 26 '21 at 09:48

Patrick Ngandu Mudiayi

21
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 26 '21 at 10:21

How to change the back button label, react-navigation

7 Answers7

Update (v5.x)