diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index 069db5e34a..12e6474a3d 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -176,15 +176,21 @@ This will have no effect on the first screen in the stack. #### `headerBackTitle` -Title string used by the back button on iOS. Defaults to the previous scene's title, or "Back" if there's not enough space. Use `headerBackTitleVisible: false` to hide it. +Title string used by the back button on iOS. Defaults to the previous scene's title, or "Back" if there's not enough space. Use `headerBackButtonDisplayMode` to customize the behavior. Only supported on iOS. Header back title -#### `headerBackTitleVisible` +#### `headerBackButtonDisplayMode` -Whether the back button title should be visible or not. +How the back button displays icon and title. + +Supported values: + +- `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon). +- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). iOS >= 14 only, falls back to "default" on older iOS versions. +- `minimal`: Always displays only the icon without a title. Only supported on iOS. diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md index 791d16b009..03e47978c9 100755 --- a/versioned_docs/version-7.x/stack-navigator.md +++ b/versioned_docs/version-7.x/stack-navigator.md @@ -435,16 +435,24 @@ Function which returns a React Element to display custom image in header's back #### `headerBackTitle` -Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`. - -#### `headerBackTitleVisible` - -A reasonable default is supplied for whether the back button title should be visible or not, but if you want to override that you can use `true` or `false` in this option. +Title string used by the back button on iOS. Defaults to the previous scene's title. Use `headerBackButtonDisplayMode` to customize the behavior. #### `headerTruncatedBackTitle` Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default. +#### `headerBackButtonDisplayMode` + +How the back button displays icon and title. + +Supported values: + +- `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon). +- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). +- `minimal`: Always displays only the icon without a title. + +Defaults to `default` on iOS, and `minimal` on Android. + #### `headerBackTitleStyle` Style object for the back title. diff --git a/versioned_docs/version-7.x/upgrading-from-6.x.md b/versioned_docs/version-7.x/upgrading-from-6.x.md index 970dcb1839..f71cf27b73 100755 --- a/versioned_docs/version-7.x/upgrading-from-6.x.md +++ b/versioned_docs/version-7.x/upgrading-from-6.x.md @@ -241,6 +241,23 @@ Now, screens pushed on top of modals are automatically shown as modals to avoid See [Stack Navigator](stack-navigator.md#presentation) and [Native Stack Navigator](native-stack-navigator.md#presentation) docs for usage. +#### `headerBackTitleVisible` is removed in favor of `headerBackButtonDisplayMode` in Stack and Native Stack navigators + +Previously, `headerBackTitleVisible` could be used to control whether the back button title is shown in the header. It's now removed in favor of `headerBackButtonDisplayMode` which provides more flexibility. + +The previous behavior can be achieved by setting `headerBackButtonDisplayMode` to `default` and `minimal` respectively for showing and hiding the back button title: + +```diff lang=js + +``` + #### `animationEnabled` option is removed in favor of `animation` option in Stack Navigator Previously, `animationEnabled: false` was used to disable the animation for the screen transition in Stack Navigator.