fix(iOS, Stack): Fix for reattaching Screens when swiping back quickly (#3584)

## Description

This PR introduces logic to collect only active (non-dismissed) screen
controllers coming from JS state.

When a screen gets dismissed on the native side, its state is sent
asynchronously to the JS. In scenarios where multiple screens are
dismissed quickly, this can result in stale updates being sent from JS
to native. These outdated updates may reference screens that are no
longer part of the native view hierarchy.

Since view recycling is disabled, we do not expect the `RNSScreenView`
that was dismissed to be reattached; a new instance should be created
when we push an update from JS. Then the new controller instance will be
initialized, so these associated with detached screens won't be reused
again. Therefore, we can safely filter them out from JS state on the
native side. On the JS side, the state will stabilize at some point and
align with native, once we receive all asynchronous events.

```objective-c
@implementation RNSScreenView {
...
- (void)initCommonProps
{
  _controller = [[RNSScreen alloc] initWithView:self];
```

To address this, we now filter out any dismissed controllers from the
list received from JS.

> [!NOTE]  
> I'm leaving the previous behavior as the default, and I'm adding
`iosPreventReattachmentOfDismissedScreens` flag that can enable this
fix. We're right before a very important release, and this PR is
touching the very basic logic; therefore, we don't want to have this fix
enabled by default for now. You can opt-in by setting
`featureFlags.experiment.iosPreventReattachmentOfDismissedScreens =
true`. Any feedback would be valuable here.

Closes:
#2559

## Changes

- Added an attribute to mark controllers that were dismissed.
- Added logic for filtering out screens dismissed natively from JS
state.

## Before & after - visual documentation

| Before | After |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/684a5b6d-4a1a-4da5-9bbb-3973f2cc342f"
/> | <video
src="https://github.com/user-attachments/assets/839debc5-7b8c-43b8-8fa6-6ec9595e708c"
/> |

## Test plan

Added Test 2559.

## Checklist

- [x] Included code example that can be used to test this change.
- [ ] Updated / created local changelog entries in relevant test files.
- [x] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [ ] For API changes, updated relevant public types.
- [ ] Ensured that CI passes

Author: t0maboro

FabricExample/App.tsx

@@ -5,5 +5,8 @@ featureFlags.experiment.synchronousScreenUpdatesEnabled = false
 featureFlags.experiment.synchronousHeaderConfigUpdatesEnabled = false
 featureFlags.experiment.synchronousHeaderSubviewUpdatesEnabled = false
 featureFlags.experiment.androidResetScreenShadowStateOnOrientationChangeEnabled = true
+// TODO: @t0maboro - remove ts-ignore after release
+// @ts-ignore - will be present since react-native-screens 4.21.0
+featureFlags.experiment.iosPreventReattachmentOfDismissedScreens = false
 
 export default App;

android/src/main/java/com/swmansion/rnscreens/ScreenStackViewManager.kt

@@ -73,6 +73,13 @@ class ScreenStackViewManager :
             StackFinishTransitioningEvent.EVENT_NAME to mutableMapOf("registrationName" to "onFinishTransitioning"),
         )
 
+    // iosPreventReattachmentOfDismissedScreens is not available on Android,
+    // however we must override their setters
+    override fun setIosPreventReattachmentOfDismissedScreens(
+        view: ScreenStack?,
+        value: Boolean,
+    ) = Unit
+
     companion object {
         const val REACT_CLASS = "RNSScreenStack"
     }

android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackManagerDelegate.java

@@ -22,6 +22,12 @@ public RNSScreenStackManagerDelegate(U viewManager) {
   }
   @Override
   public void setProperty(T view, String propName, @Nullable Object value) {
-    super.setProperty(view, propName, value);
+    switch (propName) {
+      case "iosPreventReattachmentOfDismissedScreens":
+        mViewManager.setIosPreventReattachmentOfDismissedScreens(view, value == null ? false : (boolean) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
   }
 }

android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackManagerInterface.java

@@ -13,5 +13,5 @@
 import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
 
 public interface RNSScreenStackManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
-  // No props
+  void setIosPreventReattachmentOfDismissedScreens(T view, boolean value);
 }

apps/src/tests/issue-tests/Test2559.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Button, Text, View, StyleSheet } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+
+type StackParamList = {
+  ScreenOne: undefined;
+  ScreenTwo: undefined;
+  ScreenThree: undefined;
+};
+
+function ScreenOne({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenOne'>;
+}) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>ScreenOne</Text>
+      <Button
+        title="Go to ScreenTwo (push)"
+        onPress={() => navigation.push('ScreenTwo')}
+      />
+    </View>
+  );
+}
+
+function ScreenTwo({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenTwo'>;
+}) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>ScreenTwo</Text>
+      <Button
+        title="Push another ScreenTwo"
+        onPress={() => navigation.push('ScreenTwo')}
+      />
+      <Button
+        title="Push ScreenThree"
+        onPress={() => navigation.push('ScreenThree')}
+      />
+    </View>
+  );
+}
+
+function ScreenThree({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList, 'ScreenThree'>;
+}) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>ScreenThree</Text>
+      <Button
+        title="Push ScreenTwo"
+        onPress={() => navigation.push('ScreenTwo')}
+      />
+      <Button
+        title="Push another ScreenThree"
+        onPress={() => navigation.push('ScreenThree')}
+      />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          fullScreenGestureEnabled: true,
+        }}>
+        <Stack.Screen name="ScreenOne" component={ScreenOne} />
+        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
+        <Stack.Screen name="ScreenThree" component={ScreenThree} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+});

apps/src/tests/issue-tests/index.ts

@@ -123,6 +123,7 @@ export { default as Test2522 } from './Test2522';
 export { default as Test2538 } from './Test2538';
 export { default as Test2543 } from './Test2543'; // [E2E created](iOS): issue related to iOS formSheet initial detent
 export { default as Test2552 } from './Test2552';
+export { default as Test2559 } from './Test2559';
 export { default as Test2560 } from './Test2560';
 export { default as Test2611 } from './Test2611';
 export { default as Test2631 } from './Test2631';

ios/RNSScreen.h

@@ -59,6 +59,7 @@ namespace react = facebook::react;
 - (void)setViewToSnapshot;
 - (CGFloat)calculateHeaderHeightIsModal:(BOOL)isModal;
 #endif
+- (BOOL)isRemovedFromParent;
 
 @end
 

ios/RNSScreen.mm

@@ -1620,6 +1620,7 @@ @implementation RNSScreen {
   int _dismissCount;
   BOOL _isSwiping;
   BOOL _shouldNotify;
+  BOOL _isRemovedFromParent;
 }
 
 #pragma mark - Common
@@ -1630,6 +1631,7 @@ - (instancetype)initWithView:(UIView *)view
     self.view = view;
     _fakeView = [UIView new];
     _shouldNotify = YES;
+    _isRemovedFromParent = NO;
 #ifdef RCT_NEW_ARCH_ENABLED
     _initialView = (RNSScreenView *)view;
 #endif
@@ -1887,6 +1889,19 @@ - (void)willMoveToParentViewController:(UIViewController *)parent
   }
 }
 
+- (void)didMoveToParentViewController:(UIViewController *)parent
+{
+  if (parent == nil) {
+    // Since view recycling is disabled, we can rely on a flag indicating that the controller
+    // has been removed from the hierarchy, as it will not be reused.
+    _isRemovedFromParent = YES;
+  } else {
+    _isRemovedFromParent = NO;
+  }
+
+  [super didMoveToParentViewController:parent];
+}
+
 - (id)findFirstResponder:(UIView *)parent
 {
   if (parent.isFirstResponder) {
@@ -1901,6 +1916,13 @@ - (id)findFirstResponder:(UIView *)parent
   return nil;
 }
 
+// This method allows us to check whether the Screen has been dismissed;
+// works reliably, because of disabled view recycling.
+- (BOOL)isRemovedFromParent
+{
+  return _isRemovedFromParent;
+}
+
 #pragma mark - transition progress related methods
 
 - (void)setupProgressNotification

ios/RNSScreenStack.h

@@ -43,6 +43,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) BOOL customAnimation;
 @property (nonatomic) BOOL disableSwipeBack;
 
+@property (nonatomic, readwrite) BOOL iosPreventReattachmentOfDismissedScreens;
+
 #ifdef RCT_NEW_ARCH_ENABLED
 #else
 @property (nonatomic, copy) RCTDirectEventBlock onFinishTransitioning;

ios/RNSScreenStack.mm

@@ -774,6 +774,16 @@ - (void)updateContainer
         [pushControllers addObject:screen.controller];
       } else {
         if (screen.stackPresentation == RNSScreenStackPresentationPush) {
+          /// For synchronizing the state with JS `screen.controller.isRemovedFromParent` was added.
+          /// We collect only active (non-dismissed) screen controllers.
+          /// This is necessary because when a Screen is dismissed natively, its state is sent **asynchronously** to JS.
+          /// As a result, JS might send a delayed update back to native when multiple screens are being dismissed
+          /// quickly. Since view recycling is disabled, once we detect that a screen has been removed from the view
+          /// hierarchy, it won't be reused. This allows us to safely filter out dismissed screens from screens coming
+          /// from JS state via `controllers`.
+          if (_iosPreventReattachmentOfDismissedScreens && screen.controller.isRemovedFromParent) {
+            continue;
+          }
           [pushControllers addObject:screen.controller];
         } else {
           [modalControllers addObject:screen.controller];
@@ -1363,6 +1373,20 @@ - (void)finishScreenTransition:(BOOL)canceled
 #ifdef RCT_NEW_ARCH_ENABLED
 #pragma mark - Fabric specific
 
+- (void)updateProps:(const facebook::react::Props::Shared &)props
+           oldProps:(const facebook::react::Props::Shared &)oldProps
+{
+  const auto &oldScreenProps = *std::static_pointer_cast<const react::RNSScreenStackProps>(_props);
+  const auto &newScreenProps = *std::static_pointer_cast<const react::RNSScreenStackProps>(props);
+
+  if (newScreenProps.iosPreventReattachmentOfDismissedScreens !=
+      oldScreenProps.iosPreventReattachmentOfDismissedScreens) {
+    [self setIosPreventReattachmentOfDismissedScreens:newScreenProps.iosPreventReattachmentOfDismissedScreens];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
   if (![childComponentView isKindOfClass:[RNSScreenView class]]) {