Document headerBackButtonDisplayMode

Author: satya164

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.
 
 <img src="/assets/7.x/native-stack/headerBackTitle.jpeg" width="500" alt="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.
 

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.

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` for showing and hiding the back button title respectively:
+
+```diff lang=js
+<Stack.Screen
+  name="Details"
+  component={DetailsScreen}
+  options={{
+-     headerBackTitleVisible: false,
++     headerBackButtonDisplayMode: 'minimal',
+  }}
+/>
+```
+
 #### `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.