fix(iOS): fix quick modal presentation sequence where foreign modal is being dismissed (#2671)

## Description

Closes #2668 

See the #2668 for issue description.

Making long story short: The issue involves cases when we have two
modals `A, b`, where `A` is owned and `b` is foreign, and we
dismiss `b` and present another owned modal `B` in single transaction or
in separate transactions but pulled quickly enough so that previous
transitions (caused by previous transaction) are not finished yet.

Currently, because of `b` being dismissed by its host view controller,
we would wrongfully dismiss the controller underneath (`A`). Now the
code takes possibility of `b` being in dismissal into account.

## Changes

We now check whether the potentially foreign modal is being dismissed -
if so, we schedule our updates to run **after** dismissal transition
completes.

## Test code and steps to reproduce

Tested for regressions: 

* [x] `Modal` screen in Example
[PR](#1996)
* [x] Test2048
[PR](#2113)
* [x] Test1829
[PR](#1912)
* [x] Test1299
[PR](#1326)

This issue is quite similar to #1299 but concerns foreign modal not
owned one and mechanism are a bit different, therefore I've added
`Test2668`.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: kkafar

apps/src/tests/Test2668.tsx

@@ -0,0 +1,63 @@
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
+import React from 'react';
+import { Button, Modal, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const Stack = createNativeStackNavigator();
+
+function Home({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase> }) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>1. Open owned modal</Text>
+      <Button title="Show modal" onPress={() => navigation.navigate('Modal')} />
+    </View>
+  );
+}
+
+function Second({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase> }) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>4. This should be presented modally without any glitches</Text>
+      <Button title="PopTo Home" onPress={() => {
+        navigation.popTo('Home');
+      }} />
+    </View>
+  );
+}
+
+function ModalScreen({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase> }) {
+  const [modalVisible, setModalVisible] = React.useState(false);
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>2. Click "ShowModal" to open foreign modal</Text>
+      <Button title="Show modal" onPress={() => setModalVisible(true)} />
+      <Button title="PopTo Second" onPress={() => {
+        //setModalVisible(false);
+        //navigation.popTo('Second');
+        navigation.navigate('Second');
+      }} />
+      <Modal visible={modalVisible} transparent={true} animationType="fade">
+        <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center' }}>
+          <Text>3. Dismiss foreign modal and present owned one in single transaction</Text>
+          <Button title="Hide modal and navigate" onPress={() => {
+            setModalVisible(false);
+            navigation.navigate('Second');
+          }} />
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name="Modal" component={ModalScreen} options={{ presentation: 'modal', headerShown: false }} />
+        <Stack.Screen name="Second" component={Second} options={{ headerShown: false }} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -120,6 +120,7 @@ export { default as Test2395 } from './Test2395';
 export { default as Test2466 } from './Test2466';
 export { default as Test2552 } from './Test2552';
 export { default as Test2631 } from './Test2631';
+export { default as Test2668 } from './Test2668';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

ios/RNSScreenStack.mm

@@ -552,7 +552,18 @@ - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
       // See: https://github.com/software-mansion/react-native-screens/issues/2048
       // For now, to mitigate the issue, we also decide to trigger its dismissal before
       // starting the presentation chain down below in finish() callback.
-      [changeRootController dismissViewControllerAnimated:shouldAnimate completion:finish];
+      if (!firstModalToBeDismissed.isBeingDismissed) {
+        [changeRootController dismissViewControllerAnimated:shouldAnimate completion:finish];
+      } else {
+        // We need to wait for its dismissal and then run our presentation code.
+        // This happens, e.g. when we have foreign modal presented on top of owned one & we dismiss foreign one and
+        // immediately present another owned one. Dismissal of the foreign one will be triggered by foreign controller.
+        [[firstModalToBeDismissed transitionCoordinator]
+            animateAlongsideTransition:nil
+                            completion:^(id<UIViewControllerTransitionCoordinatorContext> _) {
+                              finish();
+                            }];
+      }
       return;
     }
   }