fix(iOS): Crash while pushing n different screens at the same time

apps/src/tests/Test2235.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import { Button } from '../shared';
+import { NavigationContainer } from '@react-navigation/native';
+
+type StackParamList = {
+  Main: undefined;
+  Detail: undefined;
+  Detail2: undefined;
+};
+
+interface MainScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
+}
+
+const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'moccasin' }}>
+    <Button
+      testID="simple-native-stack-go-to-detail"
+      title="Go to detail"
+      onPress={() => {
+        navigation.navigate('Detail');
+        navigation.navigate('Detail2');
+      }}
+    />
+  </View>
+);
+
+interface DetailScreenProps {
+  navigation: NativeStackNavigationProp<StackParamList, 'Detail'>;
+}
+
+const DetailScreen = ({ navigation }: DetailScreenProps): React.JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
+    <Button
+      title="Go back"
+      onPress={() => navigation.goBack()}
+      testID="simple-native-stack-detail-go-back"
+    />
+  </View>
+);
+
+const DetailScreen2 = ({
+  navigation,
+}: DetailScreenProps): React.JSX.Element => (
+  <View style={{ ...styles.container, backgroundColor: 'yellow' }}>
+    <Button
+      title="Go back"
+      onPress={() => navigation.goBack()}
+      testID="simple-native-stack-detail-go-back"
+    />
+  </View>
+);
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const App = (): React.JSX.Element => (
+  <NavigationContainer>
+    <Stack.Navigator
+      screenOptions={{
+        headerBackVisible: false,
+      }}>
+      <Stack.Screen
+        name="Main"
+        component={MainScreen}
+        options={{ title: 'Simple Native Stack' }}
+      />
+      <Stack.Screen name="Detail" component={DetailScreen} />
+      <Stack.Screen name="Detail2" component={DetailScreen2} />
+    </Stack.Navigator>
+  </NavigationContainer>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+});
+
+export default App;

apps/src/tests/index.ts

@@ -104,5 +104,6 @@ export { default as Test2184 } from './Test2184';
 export { default as Test2223 } from './Test2223';
 export { default as Test2227 } from './Test2227';
 export { default as Test2229 } from './Test2229';
+export { default as Test2235 } from './Test2235';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';

ios/RNSScreenStack.mm

@@ -1117,9 +1117,8 @@ - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childCompone
 
   [_reactSubviews insertObject:(RNSScreenView *)childComponentView atIndex:index];
   ((RNSScreenView *)childComponentView).reactSuperview = self;
-  dispatch_async(dispatch_get_main_queue(), ^{
-    [self maybeAddToParentAndUpdateContainer];
-  });
+  // Child update operation is performed in the mountingTransactionDidMount method to prevent error, while
+  // navigating to `n` different screens at the same time.
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
@@ -1152,9 +1151,6 @@ - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childCompo
   screenChildComponent.reactSuperview = nil;
   [_reactSubviews removeObject:screenChildComponent];
   [screenChildComponent removeFromSuperview];
-  dispatch_async(dispatch_get_main_queue(), ^{
-    [self maybeAddToParentAndUpdateContainer];
-  });
 }
 
 - (void)takeSnapshot
@@ -1178,6 +1174,24 @@ - (void)mountingTransactionWillMount:(react::MountingTransaction const &)transac
   }
 }
 
+- (void)mountingTransactionDidMount:(const facebook::react::MountingTransaction &)transaction
+               withSurfaceTelemetry:(const facebook::react::SurfaceTelemetry &)surfaceTelemetry
+{
+  for (auto &mutation : transaction.getMutations()) {
+    if (mutation.parentShadowView.componentName != nil &&
+        strcmp(mutation.parentShadowView.componentName, "RNSScreenStack") == 0 &&
+        (mutation.type == react::ShadowViewMutation::Type::Update ||
+         mutation.type == react::ShadowViewMutation::Type::Remove)) {
+      // we need to wait until children have their layout set. At this point they don't have the layout
+      // set yet, however the layout call is already enqueued on ui thread. Enqueuing update call on the
+      // ui queue will guarantee that the update will run after layout.
+      dispatch_async(dispatch_get_main_queue(), ^{
+        [self maybeAddToParentAndUpdateContainer];
+      });
+    }
+  }
+}
+
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];