fix(iOS): non-interactive screen while switching between bottom-tab and native-stack navigators

apps/src/tests/Test2252.tsx

@@ -0,0 +1,86 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useState } from 'react';
+import { Alert, Button, Text, View, Switch } from 'react-native';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+const RootStack = createNativeStackNavigator();
+const BottomTab = createBottomTabNavigator();
+
+function TabScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        title="Test"
+        onPress={() => {
+          Alert.alert('Test');
+        }}
+      />
+      <Switch
+        trackColor={{ false: '#767577', true: '#81b0ff' }}
+        thumbColor={'#f5dd4b'}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={() => {
+          Alert.alert('Test');
+        }}
+      />
+    </View>
+  );
+}
+
+function TabsScreen() {
+  return (
+    <BottomTab.Navigator initialRouteName="tab">
+      <BottomTab.Screen name="tab" component={TabScreen} />
+    </BottomTab.Navigator>
+  );
+}
+
+export function RootStackNavigator() {
+  return (
+    <RootStack.Navigator
+      initialRouteName="tabNavigation"
+      screenOptions={{ headerShown: false }}>
+      <RootStack.Screen name="tabNavigation" component={TabsScreen} />
+    </RootStack.Navigator>
+  );
+}
+
+function LoginScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>No tabs</Text>
+    </View>
+  );
+}
+
+export function LoginStackNavigator() {
+  return (
+    <RootStack.Navigator
+      initialRouteName="login"
+      screenOptions={{ headerShown: false }}>
+      <RootStack.Screen name="login" component={LoginScreen} />
+    </RootStack.Navigator>
+  );
+}
+
+export default function App() {
+  const [showTabs, setShowTabs] = useState(true);
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer key={showTabs ? 'a' : 'b'}>
+        {showTabs ? <RootStackNavigator /> : <LoginStackNavigator />}
+      </NavigationContainer>
+      <View style={{ marginBottom: 32 }}>
+        <Button
+          title="Toggle"
+          onPress={() => {
+            setShowTabs(!showTabs);
+          }}
+        />
+      </View>
+    </SafeAreaProvider>
+  );
+}

apps/src/tests/index.ts

@@ -105,5 +105,6 @@ export { default as Test2223 } from './Test2223';
 export { default as Test2227 } from './Test2227';
 export { default as Test2229 } from './Test2229';
 export { default as Test2231 } from './Test2231';
+export { default as Test2252 } from './Test2252';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';

ios/RNSScreenContainer.mm

@@ -250,7 +250,6 @@ - (void)layoutSubviews
 
 #pragma mark-- Fabric specific
 #ifdef RCT_NEW_ARCH_ENABLED
-
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
   if (![childComponentView isKindOfClass:[RNSScreenView class]]) {
@@ -270,10 +269,11 @@ - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childCompone
 
   [_reactSubviews insertObject:screenView atIndex:index];
   screenView.reactSuperview = self;
+  [self markChildUpdated];
+
   react::LayoutMetrics screenLayoutMetrics = screenView.newLayoutMetrics;
   screenLayoutMetrics.frame = RCTRectFromCGRect(CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height));
   [screenView updateLayoutMetrics:screenLayoutMetrics oldLayoutMetrics:screenView.oldLayoutMetrics];
-  [self markChildUpdated];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index