Skip to content

Commit

Permalink
fix(iOS): disable collapsable option from Background in Screen (#11840)
Browse files Browse the repository at this point in the history
**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
tboba committed Feb 23, 2024
1 parent b3512a5 commit c1e327c
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions packages/elements/src/Screen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,9 @@ export function Screen(props: Props) {
accessibilityElementsHidden={!focused}
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
style={[styles.container, style]}
// On Fabric we need to disable collapsing for the background to ensure
// that we won't render unnecessary views due to the view flattening.
collapsable={false}
>
<View style={styles.content}>
<HeaderShownContext.Provider
Expand Down

0 comments on commit c1e327c

Please sign in to comment.