feat(iOS 26): Add opt-out flag for interactions during transition for iOS 26 (#3631)

## Description

Closes
software-mansion/react-native-screens-labs#937

It turns out that the fix in
#3584
enables us to retire the logic introduced in
#3093 and
#3173. We
no longer need to block interactions on screen transitions on iOS 26, so
apps should feel more responsive. For now, we introduce a opt-out
feature flag to go back to the previous behavior.

> [!important]
>
> This flag should really be enabled if
`iosPreventReattachmentOfDismissedScreens` is also enabled (which is the
default), otherwise the navigation state will not synchronize correctly
and there will be visual bugs when navigating between screens.

## Changes

Added a `disabled` state for `RNSViewInteractionManager` which is
controlled by the `ios26AllowInteractionsDuringTransition` feature flag.

## Before & after - visual documentation

| Before | After |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/25d3070f-687d-4466-8374-c7d5983019f6"
/> | <video
src="https://github.com/user-attachments/assets/84b1f0d0-53b1-4f1f-b328-9b2077a22dac"
/> |

## Test plan

Use Test3093. Verify that pushing/dismissing screens repeatedly works
correctly & doesn't cause JS/native synchronization issues.

## Checklist

- [x] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [ ] Ensured that CI passes

Author: kmichalikk

Example/App.tsx

@@ -1,3 +1,8 @@
 import App from '../apps';
 
+import { featureFlags } from 'react-native-screens';
+
+featureFlags.experiment.iosPreventReattachmentOfDismissedScreens = true;
+featureFlags.experiment.ios26AllowInteractionsDuringTransition = true;
+
 export default App;

FabricExample/App.tsx

@@ -6,5 +6,7 @@ featureFlags.experiment.synchronousHeaderConfigUpdatesEnabled = false;
 featureFlags.experiment.synchronousHeaderSubviewUpdatesEnabled = false;
 featureFlags.experiment.androidResetScreenShadowStateOnOrientationChangeEnabled =
   true;
+featureFlags.experiment.iosPreventReattachmentOfDismissedScreens = true;
+featureFlags.experiment.ios26AllowInteractionsDuringTransition = true;
 
 export default App;

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

@@ -357,6 +357,11 @@ open class ScreenViewManager :
         value: Boolean,
     ) = Unit
 
+    override fun setIos26AllowInteractionsDuringTransition(
+        view: Screen?,
+        value: Boolean,
+    ) = Unit
+
     // END mark: iOS-only
 
     override fun setAndroidResetScreenShadowStateOnOrientationChangeEnabled(

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

@@ -146,6 +146,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "androidResetScreenShadowStateOnOrientationChangeEnabled":
         mViewManager.setAndroidResetScreenShadowStateOnOrientationChangeEnabled(view, value == null ? true : (boolean) value);
         break;
+      case "ios26AllowInteractionsDuringTransition":
+        mViewManager.setIos26AllowInteractionsDuringTransition(view, value == null ? true : (boolean) value);
+        break;
       default:
         super.setProperty(view, propName, value);
     }

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

@@ -56,4 +56,5 @@ public interface RNSScreenManagerInterface<T extends View> extends ViewManagerWi
   void setTopScrollEdgeEffect(T view, @Nullable String value);
   void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);
   void setAndroidResetScreenShadowStateOnOrientationChangeEnabled(T view, boolean value);
+  void setIos26AllowInteractionsDuringTransition(T view, boolean value);
 }

ios/RNSScreen.mm

@@ -1416,6 +1416,8 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
 
   [self setSynchronousShadowStateUpdatesEnabled:newScreenProps.synchronousShadowStateUpdatesEnabled];
 
+  [RNSScreenView.viewInteractionManagerInstance setDisabled:newScreenProps.ios26AllowInteractionsDuringTransition];
+
 #if !TARGET_OS_TV
   if (newScreenProps.statusBarHidden != oldScreenProps.statusBarHidden) {
     [self setStatusBarHidden:newScreenProps.statusBarHidden];
@@ -1595,6 +1597,13 @@ - (void)reactSetFrame:(CGRect)frame
   // subviews
 }
 
+// Opt-in/-out of interaction disabling on transition
+// See: https://github.com/software-mansion/react-native-screens/pull/3631
+- (void)setIos26AllowInteractionsDuringTransition:(BOOL)value
+{
+  [RNSScreenView.viewInteractionManagerInstance setDisabled:value];
+}
+
 #endif
 
 @end
@@ -2269,6 +2278,7 @@ @implementation RNSScreenManager
 RCT_EXPORT_VIEW_PROPERTY(onWillDisappear, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onGestureCancel, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onSheetDetentChanged, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(ios26AllowInteractionsDuringTransition, BOOL);
 
 #if !TARGET_OS_TV
 RCT_EXPORT_VIEW_PROPERTY(screenOrientation, UIInterfaceOrientationMask)

ios/helpers/RNSViewInteractionManager.h

@@ -2,6 +2,12 @@
 
 @interface RNSViewInteractionManager : NSObject
 
+/**
+ * The behavior is controlled by `ios26AllowInteractionsDuringTransition` feature flag.
+ * The default is `true`, which means that `disableInteractions`/`enableInteractions` do nothing.
+ */
+@property (nonatomic) BOOL disabled;
+
 - (instancetype)init;
 
 /**

ios/helpers/RNSViewInteractionManager.mm

@@ -10,12 +10,17 @@ - (instancetype)init
 {
   if (self = [super init]) {
     lastRootWithInteractionsDisabled = nil;
+    _disabled = YES;
   }
   return self;
 }
 
 - (void)disableInteractionsForSubtreeWith:(UIView *)view
 {
+  if (_disabled) {
+    return;
+  }
+
   UIView *current = view;
   while (current && ![current isKindOfClass:UIWindow.class] &&
          ![current respondsToSelector:@selector(rnscreens_disableInteractions)]) {
@@ -41,6 +46,10 @@ - (void)disableInteractionsForSubtreeWith:(UIView *)view
 
 - (void)enableInteractionsForLastSubtree
 {
+  if (_disabled) {
+    return;
+  }
+
   if (lastRootWithInteractionsDisabled) {
     if ([lastRootWithInteractionsDisabled respondsToSelector:@selector(rnscreens_enableInteractions)]) {
       [static_cast<id<RNSViewInteractionAware>>(lastRootWithInteractionsDisabled) rnscreens_enableInteractions];

src/components/Screen.tsx

@@ -30,6 +30,7 @@ import {
 } from './helpers/sheet';
 import { parseBooleanToOptionalBooleanNativeProp } from '../utils';
 import featureFlags from '../flags';
+import warnOnce from 'warn-once';
 
 type NativeProps = ScreenNativeComponentProps | ModalScreenNativeComponentProps;
 const AnimatedNativeScreen = Animated.createAnimatedComponent(
@@ -163,6 +164,13 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
         activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
       }
 
+      warnOnce(
+        Platform.OS === 'ios' &&
+          featureFlags.experiment.ios26AllowInteractionsDuringTransition &&
+          !featureFlags.experiment.iosPreventReattachmentOfDismissedScreens,
+        '[RNScreens] Using featureFlags `ios26AllowInteractionsDuringTransition` with `iosPreventReattachmentOfDismissedScreens` disabled is discouraged and will result in visual bugs on screen transitions. See flags description for details.',
+      );
+
       if (
         isNativeStack &&
         prevActivityState !== undefined &&
@@ -277,6 +285,9 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
             androidResetScreenShadowStateOnOrientationChangeEnabled={
               featureFlags.experiment
                 .androidResetScreenShadowStateOnOrientationChangeEnabled
+            }
+            ios26AllowInteractionsDuringTransition={
+              featureFlags.experiment.ios26AllowInteractionsDuringTransition
             }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children

src/fabric/ScreenNativeComponent.ts

@@ -118,6 +118,7 @@ export interface NativeProps extends ViewProps {
     boolean,
     true
   >;
+  ios26AllowInteractionsDuringTransition?: CT.WithDefault<boolean, true>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSScreen', {