Skip to content

Commit 545bd7b

Browse files
dobomodeclaude
andcommitted
docs: add overrideScrollViewContentInsetAdjustmentBehavior option to bottom tab navigator
Closes #1491 The option has been exposed on Tab.Screen since react-native-screens v3 (via @react-navigation/bottom-tabs/unstable types), but isn't listed on the docs page. It's the only escape hatch for a fairly common visible bug — a blank gap appearing above content in a nested native-stack screen that uses headerTransparent: true on iOS — and readers hitting the symptom have no way to discover it from the documentation. Added to v7 (native-bottom-tab-navigator.md) and v8 (bottom-tab-navigator.md). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 2df1134 commit 545bd7b

2 files changed

Lines changed: 40 additions & 0 deletions

File tree

versioned_docs/version-7.x/native-bottom-tab-navigator.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -503,6 +503,26 @@ When `false`, tapping on the tab in tab bar won't select the tab. Custom behavio
503503

504504
Defaults to `true`.
505505

506+
#### `overrideScrollViewContentInsetAdjustmentBehavior`
507+
508+
Whether to override the `contentInsetAdjustmentBehavior` of the first `ScrollView` in the first descendant chain from the tab screen.
509+
510+
By default, React Native's `ScrollView` has `contentInsetAdjustmentBehavior` set to `never` instead of the UIKit default (`automatic`), which prevents `ScrollView`s from respecting navigation bar insets. When this option is `true`, that override is applied, restoring UIKit's `automatic` behavior for the first descendant `ScrollView`.
511+
512+
Defaults to `true`. To disable for specific screens — for example to fix a blank gap appearing above content in a nested native-stack screen that uses `headerTransparent: true` — set the option to `false`:
513+
514+
```js
515+
<Tab.Screen
516+
name="Journal"
517+
component={JournalStackNavigator}
518+
options={{
519+
overrideScrollViewContentInsetAdjustmentBehavior: false,
520+
}}
521+
/>
522+
```
523+
524+
Only supported on iOS.
525+
506526
#### `bottomAccessory`
507527

508528
Function that returns a React element to display as an accessory view. The function receives an options object with a `placement` parameter that can be one of the following values:

versioned_docs/version-8.x/bottom-tab-navigator.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1043,6 +1043,26 @@ When `false`, tapping on the tab in tab bar won't select the tab. Custom behavio
10431043

10441044
Defaults to `true`.
10451045

1046+
#### `overrideScrollViewContentInsetAdjustmentBehavior`
1047+
1048+
Whether to override the `contentInsetAdjustmentBehavior` of the first `ScrollView` in the first descendant chain from the tab screen.
1049+
1050+
By default, React Native's `ScrollView` has `contentInsetAdjustmentBehavior` set to `never` instead of the UIKit default (`automatic`), which prevents `ScrollView`s from respecting navigation bar insets. When this option is `true`, that override is applied, restoring UIKit's `automatic` behavior for the first descendant `ScrollView`.
1051+
1052+
Defaults to `true`. To disable for specific screens — for example to fix a blank gap appearing above content in a nested native-stack screen that uses `headerTransparent: true` — set the option to `false`:
1053+
1054+
```js
1055+
<Tab.Screen
1056+
name="Journal"
1057+
component={JournalStackNavigator}
1058+
options={{
1059+
overrideScrollViewContentInsetAdjustmentBehavior: false,
1060+
}}
1061+
/>
1062+
```
1063+
1064+
Only supported on iOS.
1065+
10461066
#### `bottomAccessory`
10471067

10481068
Function that returns a React element to display as an accessory view. The function receives an options object with a `placement` parameter that can be one of the following values:

0 commit comments

Comments
 (0)