fix(iOS): lack of animation on modal replacement (#2958)

## Description

The fix boils down to removing check whether `changeRootIndex ==
controllers.count`. It was introduced here:
#502.
It can be represented differently: `changeRootIndex ==
controllers.lastIndex + 1` & if I get this correctly it checks whether
the modal change in question takes place at the top of view hierarchy,
with purpose of not animating non visible changes.

It does not take account the replace operation though. In case of
replace, the `changeRootIndex == controllers.lastIndex`.

Another aspect is that I believe this part of the check is not
necessary. If some modal view controller is being dismissed, **all**
view controllers above it will also endup dismissed.
Therefore, there is no scenario where this check would be useful.

Hence, this commit ends up removing the check.

## Before & After

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/d3a718e2-aef3-49bc-abdd-fa172c2097a3"
/> | <video
src="https://github.com/user-attachments/assets/e3b7c05c-fd9e-48b7-96e7-c59e75cd4c3f"
/> |

## Test code and steps to reproduce

I've enhanced `TestModalNavigation` with additional button that allows
for modal replacement.

I've also tested `TestModalNavigation` to make sure other flows keep
working.
I've also tested #502 - setting `animation: 'none'` keeps working for
dismissed modals.

## Checklist

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

Author: kkafar

apps/src/tests/TestModalNavigation.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
-import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  type NativeStackScreenProps,
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack';
 
 type StackParamList = {
   Home: undefined;
@@ -13,7 +16,6 @@ type StackParamList = {
   Screen3: undefined;
 };
 
-
 function HomeScreen({
   navigation,
 }: NativeStackScreenProps<StackParamList, 'Home'>) {
@@ -32,7 +34,9 @@ function HomeScreen({
   );
 }
 
-function MainStackScreen({ navigation }: NativeStackScreenProps<StackParamList, 'MainStackScreen'>) {
+function MainStackScreen({
+  navigation,
+}: NativeStackScreenProps<StackParamList, 'MainStackScreen'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Main stack screen</Text>
@@ -41,21 +45,21 @@ function MainStackScreen({ navigation }: NativeStackScreenProps<StackParamList,
         onPress={() => navigation.navigate('MainStackScreen2')}
       />
       <Button
-        title="goBack"
-        onPress={() => navigation.goBack()}
+        title="Replace with the second modal"
+        onPress={() => navigation.replace('MainStackScreen2')}
       />
+      <Button title="goBack" onPress={() => navigation.goBack()} />
     </View>
   );
 }
 
-function MainStackScreen2({ navigation }: NativeStackScreenProps<StackParamList, 'MainStackScreen2'>) {
+function MainStackScreen2({
+  navigation,
+}: NativeStackScreenProps<StackParamList, 'MainStackScreen2'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Main stack screen 2</Text>
-      <Button
-        title="goBack"
-        onPress={() => navigation.goBack()}
-      />
+      <Button title="goBack" onPress={() => navigation.goBack()} />
     </View>
   );
 }
@@ -117,9 +121,21 @@ function RootStack() {
   return (
     <Stack.Navigator>
       <Stack.Screen name="Home" component={HomeScreen} />
-      <Stack.Screen name="NestedStack" component={NestedStackScreen} options={{ headerShown: true, presentation: 'modal' }} />
-      <Stack.Screen name="MainStackScreen" component={MainStackScreen} options={{ headerShown: true, presentation: 'modal' }} />
-      <Stack.Screen name="MainStackScreen2" component={MainStackScreen2} options={{ headerShown: true, presentation: 'modal' }} />
+      <Stack.Screen
+        name="NestedStack"
+        component={NestedStackScreen}
+        options={{ headerShown: true, presentation: 'modal' }}
+      />
+      <Stack.Screen
+        name="MainStackScreen"
+        component={MainStackScreen}
+        options={{ headerShown: true, presentation: 'modal' }}
+      />
+      <Stack.Screen
+        name="MainStackScreen2"
+        component={MainStackScreen2}
+        options={{ headerShown: true, presentation: 'modal' }}
+      />
     </Stack.Navigator>
   );
 }

ios/RNSScreenStack.mm

@@ -429,8 +429,10 @@ - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
   // (2) there are modals presented by other RNSNavigationControllers (nested/outer),
   // (3) there are modals presented by other controllers (e.g. React Native's Modal view).
 
-  // Last controller that is common for both _presentedModals & controllers
+  // Last controller that is common for both _presentedModals & controllers or this RNSNavigationController in case
+  // there is no common part.
   __block UIViewController *changeRootController = _controller;
+
   // Last common controller index + 1
   NSUInteger changeRootIndex = 0;
   for (NSUInteger i = 0; i < MIN(_presentedModals.count, controllers.count); i++) {
@@ -533,12 +535,11 @@ - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
   UIViewController *firstModalToBeDismissed = changeRootController.presentedViewController;
 
   if (firstModalToBeDismissed != nil) {
-    BOOL shouldAnimate = changeRootIndex == controllers.count &&
-        [firstModalToBeDismissed isKindOfClass:[RNSScreen class]] &&
-        ((RNSScreen *)firstModalToBeDismissed).screenView.stackAnimation != RNSScreenStackAnimationNone;
+    const BOOL firstModalToBeDismissedIsOwned = [firstModalToBeDismissed isKindOfClass:RNSScreen.class];
+    const BOOL firstModalToBeDismissedIsOwnedByThisStack =
+        firstModalToBeDismissedIsOwned && [_presentedModals containsObject:firstModalToBeDismissed];
 
-    if ([_presentedModals containsObject:firstModalToBeDismissed] ||
-        ![firstModalToBeDismissed isKindOfClass:RNSScreen.class]) {
+    if (firstModalToBeDismissedIsOwnedByThisStack || !firstModalToBeDismissedIsOwned) {
       // We dismiss every VC that was presented by changeRootController VC or its descendant.
       // After the series of dismissals is completed we run completion block in which
       // we present modals on top of changeRootController (which may be the this stack VC)
@@ -548,7 +549,12 @@ - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
       // For now, to mitigate the issue, we also decide to trigger its dismissal before
       // starting the presentation chain down below in finish() callback.
       if (!firstModalToBeDismissed.isBeingDismissed) {
-        [changeRootController dismissViewControllerAnimated:shouldAnimate completion:finish];
+        // If the modal is owned we let it control whether the dismissal is animated or not. For foreign controllers
+        // we just assume animation.
+        const BOOL firstModalToBeDismissedPrefersAnimation = firstModalToBeDismissedIsOwned
+            ? static_cast<RNSScreen *>(firstModalToBeDismissed).screenView.stackAnimation != RNSScreenStackAnimationNone
+            : YES;
+        [changeRootController dismissViewControllerAnimated:firstModalToBeDismissedPrefersAnimation 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