Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(iOS): disable collapsable option from Background in Screen (#11840)
**Motivation** This PR is a part of ongoing investigation on PR [#1997](software-mansion/react-native-screens#1997) in React Native Screens. Because of how the views are being flattened, in some components (like bottom-tabs) large title of a header does not collapse while swiping the content vertically. That's because of an unnecessary view that is being rendered above the ScrollView in native view hierarchy. **Test plan** Below you can find the code that reproduces this issue. ```tsx import { Text, ScrollView, TouchableOpacity } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; const stack = createNativeStackNavigator(); const tabs = createBottomTabNavigator(); export default function App() { return ( <GestureHandlerRootView style={{ flex: 1 }}> <NavigationContainer> <stack.Navigator screenOptions={{ statusBarColor: 'white', statusBarStyle: 'dark', headerShown: true, headerLargeTitle: true, }}> <stack.Screen name="tabbar" component={Tabbar} options={{ title: 'Explore' }} /> <stack.Screen name="dummiacz" component={Dummy} options={{ title: 'I am dummy' }} /> </stack.Navigator> </NavigationContainer> </GestureHandlerRootView> ); } export function Tabbar({ navigation }) { return ( <tabs.Navigator screenOptions={{ headerShown: false, freezeOnBlur: false, unmountOnBlur: false, lazy: true, }}> <tabs.Screen name="home" component={Dummy} // @ts-ignore listeners={{ focus: () => navigation.setOptions({ title: 'Explore' }) }} /> <tabs.Screen name="orders" component={Dummy} // @ts-ignore listeners={{ focus: () => navigation.setOptions({ title: 'Orders' }) }} /> <tabs.Screen name="cart" component={Dummy} // @ts-ignore listeners={{ focus: () => navigation.setOptions({ title: 'Cart' }) }} /> <tabs.Screen name="more" component={Dummy} // @ts-ignore listeners={{ focus: () => navigation.setOptions({ title: 'More' }) }} /> </tabs.Navigator> ); } export function Dummy({ navigation }) { return ( <ScrollView contentInsetAdjustmentBehavior="automatic"> <TouchableOpacity onPress={() => navigation.navigate('dummiacz')}> <Text style={{ marginTop: 50 }}>Mleko</Text> </TouchableOpacity> </ScrollView> ); } ``` <details> <summary>Before</summary> https://github.com/react-navigation/react-navigation/assets/23281839/4f3b1f81-ef8c-4d4e-aea3-cd6cc1527621 In the view hierarchy there's one unnecessary view that makes large header buggy! <img width="379" alt="Screenshot 2024-02-21 at 15 21 05" src="https://github.com/react-navigation/react-navigation/assets/23281839/d7552090-7419-4f61-a255-5ca271d228f0"> </details> <details> <summary>After</summary> https://github.com/react-navigation/react-navigation/assets/23281839/f4ad8327-c3b3-403d-a1e1-4df0aaf40e2d Unnecessary view is gone! Also, we know about the bug with switching the tabs that is also visible in the video - we're investigating it right now! <img width="411" alt="Screenshot 2024-02-21 at 15 28 37" src="https://github.com/react-navigation/react-navigation/assets/23281839/5ac04cbd-f830-4115-b209-44177c305c56"> </details>
- Loading branch information