fix(iOS): disable collapsable option from Background in Screen

[tboba]

Motivation

This PR is a part of ongoing investigation on PR #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.

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>
  );
}

Before

Screen.Recording.2024-02-21.at.15.20.25.mov

In the view hierarchy there's one unnecessary view that makes large header buggy!

After

Screen.Recording.2024-02-21.at.15.21.35.mov

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!

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	9618ce7
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/65d8cdfde269be0008162eef
😎 Deploy Preview	https://deploy-preview-11840--react-navigation-example.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.