Skip to content

Commit c8096da

Browse files
authored
Merge branch 'main' into @stanleyoos/chore-docs-native-stack-presentations
2 parents 6026e99 + a0a897d commit c8096da

11 files changed

+49
-8
lines changed
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

versioned_docs/version-7.x/native-stack-navigator.md

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,15 +176,21 @@ This will have no effect on the first screen in the stack.
176176

177177
#### `headerBackTitle`
178178

179-
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.
179+
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.
180180

181181
Only supported on iOS.
182182

183183
<img src="/assets/7.x/native-stack/headerBackTitle.jpeg" width="500" alt="Header back title" />
184184

185-
#### `headerBackTitleVisible`
185+
#### `headerBackButtonDisplayMode`
186186

187-
Whether the back button title should be visible or not.
187+
How the back button displays icon and title.
188+
189+
Supported values:
190+
191+
- `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).
192+
- `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.
193+
- `minimal`: Always displays only the icon without a title.
188194

189195
Only supported on iOS.
190196

@@ -391,12 +397,16 @@ The search field background color. By default bar tint color is translucent.
391397

392398
Only supported on iOS.
393399

400+
<img src="/assets/7.x/native-stack/headerSearchBarOptions-barTintColor.png" width="500" alt="Header search bar options - Bar tint color" />
401+
394402
##### `tintColor`
395403

396404
The color for the cursor caret and cancel button text.
397405

398406
Only supported on iOS.
399407

408+
<img src="/assets/7.x/native-stack/headerSearchBarOptions-tintColor.png" width="500" alt="Header search bar options - Tint color" />
409+
400410
##### `cancelButtonText`
401411

402412
The text to be used instead of default `Cancel` button text.
@@ -446,18 +456,24 @@ Text displayed when search field is empty.
446456

447457
The color of the text in the search field.
448458

459+
<img src="/assets/7.x/native-stack/headerSearchBarOptions-textColor.png" width="500" alt="Header search bar options - Text color" />
460+
449461
##### `hintTextColor`
450462

451463
The color of the hint text in the search field.
452464

453465
Only supported on Android.
454466

467+
<img src="/assets/7.x/native-stack/headerSearchBarOptions-hintTextColor.png" width="500" alt="Header search bar options - Hint text color" />
468+
455469
##### `headerIconColor`
456470

457471
The color of the search and close icons shown in the header
458472

459473
Only supported on Android.
460474

475+
<img src="/assets/7.x/native-stack/headerSearchBarOptions-headerIconColor.png" width="500" alt="Header search bar options - Header icon color" />
476+
461477
##### `shouldShowHintSearchIcon`
462478

463479
Whether to show the search hint icon when search bar is focused. Defaults to `true`.

versioned_docs/version-7.x/stack-navigator.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -435,16 +435,24 @@ Function which returns a React Element to display custom image in header's back
435435

436436
#### `headerBackTitle`
437437

438-
Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
439-
440-
#### `headerBackTitleVisible`
441-
442-
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.
438+
Title string used by the back button on iOS. Defaults to the previous scene's title. Use `headerBackButtonDisplayMode` to customize the behavior.
443439

444440
#### `headerTruncatedBackTitle`
445441

446442
Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
447443

444+
#### `headerBackButtonDisplayMode`
445+
446+
How the back button displays icon and title.
447+
448+
Supported values:
449+
450+
- `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).
451+
- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon).
452+
- `minimal`: Always displays only the icon without a title.
453+
454+
Defaults to `default` on iOS, and `minimal` on Android.
455+
448456
#### `headerBackTitleStyle`
449457

450458
Style object for the back title.

versioned_docs/version-7.x/upgrading-from-6.x.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,23 @@ Now, screens pushed on top of modals are automatically shown as modals to avoid
241241
242242
See [Stack Navigator](stack-navigator.md#presentation) and [Native Stack Navigator](native-stack-navigator.md#presentation) docs for usage.
243243
244+
#### `headerBackTitleVisible` is removed in favor of `headerBackButtonDisplayMode` in Stack and Native Stack navigators
245+
246+
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.
247+
248+
The previous behavior can be achieved by setting `headerBackButtonDisplayMode` to `default` and `minimal` for showing and hiding the back button title respectively:
249+
250+
```diff lang=js
251+
<Stack.Screen
252+
name="Details"
253+
component={DetailsScreen}
254+
options={{
255+
- headerBackTitleVisible: false,
256+
+ headerBackButtonDisplayMode: 'minimal',
257+
}}
258+
/>
259+
```
260+
244261
#### `animationEnabled` option is removed in favor of `animation` option in Stack Navigator
245262
246263
Previously, `animationEnabled: false` was used to disable the animation for the screen transition in Stack Navigator.

0 commit comments

Comments
 (0)