diff --git a/packages/react-navigation/docs/api/navigators/StackNavigator.md b/packages/react-navigation/docs/api/navigators/StackNavigator.md index 6adb670d..31b3ac81 100644 --- a/packages/react-navigation/docs/api/navigators/StackNavigator.md +++ b/packages/react-navigation/docs/api/navigators/StackNavigator.md @@ -95,6 +95,10 @@ Visual options: Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel` +#### `headerBackTitle` + +Title string used by the back button on iOS or `null` to disable label. Defaults to `title`. + #### `headerVisible` True or false to show or hide the header. Only works when `headerMode` is `screen`. Default value is `true`. diff --git a/packages/react-navigation/src/views/Header.js b/packages/react-navigation/src/views/Header.js index af1aec54..dcf78b43 100644 --- a/packages/react-navigation/src/views/Header.js +++ b/packages/react-navigation/src/views/Header.js @@ -81,16 +81,15 @@ class Header extends React.PureComponent { } _getBackButtonTitleString(scene: NavigationScene): ?string { - const sceneOptions = this.props.getScreenDetails(scene).options; - const {headerBackTitle} = sceneOptions; - const lastScene = scene.index && this.props.scenes.find(s => s.index === scene.index - 1); - if (headerBackTitle || headerBackTitle === null) { - return headerBackTitle; - } else if (lastScene) { - return this._getHeaderTitleString(lastScene); - } else { + const lastScene = this.props.scenes.find(s => s.index === scene.index - 1); + if (!lastScene) { return null; } + const { headerBackTitle } = this.props.getScreenDetails(lastScene).options; + if (headerBackTitle || headerBackTitle === null) { + return headerBackTitle; + } + return this._getHeaderTitleString(lastScene); } _renderTitleComponent = (props: SceneProps) => { @@ -128,14 +127,13 @@ class Header extends React.PureComponent { }; _renderLeftComponent = (props: SceneProps) => { + const options = this.props.getScreenDetails(props.scene).options; + if (typeof options.headerLeft !== 'undefined') { + return options.headerLeft; + } if (props.scene.index === 0) { return null; } - const details = this.props.getScreenDetails(props.scene); - const {headerLeft, headerPressColorAndroid} = details.options; - if (headerLeft) { - return headerLeft; - } const backButtonTitle = this._getBackButtonTitleString(props.scene); const width = this.state.widths[props.scene.key] ? (this.props.layout.initWidth - this.state.widths[props.scene.key]) / 2 @@ -143,8 +141,8 @@ class Header extends React.PureComponent { return ( this.props.navigation.goBack(null)} - pressColorAndroid={headerPressColorAndroid} - tintColor={details.options.headerTintColor} + pressColorAndroid={options.headerPressColorAndroid} + tintColor={options.headerTintColor} title={backButtonTitle} width={width} />