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 ?

Answer 1

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'
     }
   }
 });

Answer 2

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