Using react-native-tab-view breaks when inside of a ScrollView #11067
Description
Current behavior
Placing a Tab.Navigator inside of a ScrollView results in the height of the Tab.Screen route elements to disappear. This issue is not specific to use of @react-navigation/material-top-tabs, it's an issue with react-native-tab-view itself.
I've added a reproducible expo snack example here. Note that this is not an issue on Web, only on Android and iOS (which is the most likely use case of this functionality.
<ScrollView>
<View style={{ paddingVertical: 60 }}>
<Text>My Header</Text>
</View>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</ScrollView>
If you set the contentContainerStyle={{ flexGrow: 1 }} on the ScrollView then it does display the Tab.Screen route, however it doesn't allow the ScrollView to be scrollable, it simply allows the Tab.Screen route content to fill any remaining space in the ScrollView:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ paddingVertical: 60 }}>
<Text>My Header</Text>
</View>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</ScrollView>
This seems to be an issue that people have run into a lot, which makes sense as it's such a common use-case. Here are a few of the similar issues:
Expected behavior
The Tab.Navigator content should expand to the height of it's content and allow the ScrollView to be scrollable:
(This image was posted by @IzaELK in this issue)
Reproduction
https://snack.expo.dev/@alexdobsontevent/react-native-tab-view-nested-in-scroll-view
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-tab-view
- flipper-plugin-react-navigation
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | 6.0.16 |
| @react-navigation/material-top-tabs | 6.4.0 |
| @react-navigation/native-stack | 6.9.2 |
| react-native-safe-area-context | 4.4.1 |
| react-native-screens | 3.18.2 |
| react-native-gesture-handler | 2.8.0 |
| react-native-reanimated | 2.12.0 |
| react-native-tab-view | 3.3.2 |
| react-native-pager-view | 6.0.1 |
| react-native | 0.70.5 |
| expo | 47.0.8 |
| node | 18.12.0 |
| npm or yarn | 1.22.19 |