You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/native-stack-navigator.md
+19-3Lines changed: 19 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -176,15 +176,21 @@ This will have no effect on the first screen in the stack.
176
176
177
177
#### `headerBackTitle`
178
178
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.
180
180
181
181
Only supported on iOS.
182
182
183
183
<imgsrc="/assets/7.x/native-stack/headerBackTitle.jpeg"width="500"alt="Header back title" />
184
184
185
-
#### `headerBackTitleVisible`
185
+
#### `headerBackButtonDisplayMode`
186
186
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.
188
194
189
195
Only supported on iOS.
190
196
@@ -391,12 +397,16 @@ The search field background color. By default bar tint color is translucent.
391
397
392
398
Only supported on iOS.
393
399
400
+
<imgsrc="/assets/7.x/native-stack/headerSearchBarOptions-barTintColor.png"width="500"alt="Header search bar options - Bar tint color" />
401
+
394
402
##### `tintColor`
395
403
396
404
The color for the cursor caret and cancel button text.
397
405
398
406
Only supported on iOS.
399
407
408
+
<imgsrc="/assets/7.x/native-stack/headerSearchBarOptions-tintColor.png"width="500"alt="Header search bar options - Tint color" />
409
+
400
410
##### `cancelButtonText`
401
411
402
412
The text to be used instead of default `Cancel` button text.
@@ -446,18 +456,24 @@ Text displayed when search field is empty.
446
456
447
457
The color of the text in the search field.
448
458
459
+
<imgsrc="/assets/7.x/native-stack/headerSearchBarOptions-textColor.png"width="500"alt="Header search bar options - Text color" />
460
+
449
461
##### `hintTextColor`
450
462
451
463
The color of the hint text in the search field.
452
464
453
465
Only supported on Android.
454
466
467
+
<imgsrc="/assets/7.x/native-stack/headerSearchBarOptions-hintTextColor.png"width="500"alt="Header search bar options - Hint text color" />
468
+
455
469
##### `headerIconColor`
456
470
457
471
The color of the search and close icons shown in the header
458
472
459
473
Only supported on Android.
460
474
475
+
<imgsrc="/assets/7.x/native-stack/headerSearchBarOptions-headerIconColor.png"width="500"alt="Header search bar options - Header icon color" />
476
+
461
477
##### `shouldShowHintSearchIcon`
462
478
463
479
Whether to show the search hint icon when search bar is focused. Defaults to `true`.
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/stack-navigator.md
+13-5Lines changed: 13 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -435,16 +435,24 @@ Function which returns a React Element to display custom image in header's back
435
435
436
436
#### `headerBackTitle`
437
437
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.
443
439
444
440
#### `headerTruncatedBackTitle`
445
441
446
442
Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
447
443
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.
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/upgrading-from-6.x.md
+17Lines changed: 17 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -241,6 +241,23 @@ Now, screens pushed on top of modals are automatically shown as modals to avoid
241
241
242
242
See [Stack Navigator](stack-navigator.md#presentation) and [Native Stack Navigator](native-stack-navigator.md#presentation) docs for usage.
243
243
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
+
244
261
#### `animationEnabled` option is removed in favor of `animation` option in Stack Navigator
245
262
246
263
Previously, `animationEnabled:false` was used to disable the animation for the screen transition in Stack Navigator.
0 commit comments