feat(Stack): Add support for synchronous state updates on fabric for native stack (#3282)

t0maboro · web-flow · commit ea2a0334f140 · 2025-10-24T14:56:43.000+02:00
## Description This PR adds support for synchronous updates in the native stack for React Native 0.82+. Currently, enabling synchronous state updates is possible via an experimental feature flag: `unstable_synchronousStateUpdatesEnabled`. At this time, I haven't found a way to perform synchronous updates on Android, so this PR only includes mocks for that platform. I'm creating a ticket for covering that: software-mansion/react-native-screens-labs#497 Fixes software-mansion/react-native-screens-labs#495 ## Changes - Added feature flags in JS per native component for testing synchronous updates: - synchronousScreenUpdatesEnabled - synchronousHeaderConfigUpdatesEnabled - synchronousHeaderSubviewUpdatesEnabled - Added mocks for android implementation - Added implementation for all native components on iOS that are performing shadow tree state updates ## Screenshots / GIFs ### Before https://github.com/user-attachments/assets/bc21afa9-1e6f-4dbd-9dcf-0319b5d72ac7 ### After https://github.com/user-attachments/assets/e131260d-6667-4652-909c-13be77e6fdf3 ## Test code and steps to reproduce Adding a new example, which is verifying that with synchronous updates enabled, the form sheet content flicker issues are resolved. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes
diff --git a/FabricExample/App.tsx b/FabricExample/App.tsx
@@ -1,3 +1,8 @@
 import App from '../apps';
+import { featureFlags } from '../src';
+
+featureFlags.experiment.synchronousScreenUpdatesEnabled = false
+featureFlags.experiment.synchronousHeaderConfigUpdatesEnabled = false
+featureFlags.experiment.synchronousHeaderSubviewUpdatesEnabled = false
 
 export default App;
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
@@ -205,6 +205,13 @@ class ScreenStackHeaderConfigViewManager :
         config.setDirection(direction)
     }
 
+    // synchronousShadowStateUpdatesEnabled is not available on Android atm,
+    // however we must override their setters
+    override fun setSynchronousShadowStateUpdatesEnabled(
+        config: ScreenStackHeaderConfig?,
+        value: Boolean,
+    ) = Unit
+
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
         hashMapOf(
             HeaderAttachedEvent.EVENT_NAME to hashMapOf("registrationName" to "onAttached"),
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.kt
@@ -50,6 +50,13 @@ class ScreenStackHeaderSubviewManager :
         Log.w("[RNScreens]", "hidesSharedBackground prop is not available on Android")
     }
 
+    // synchronousShadowStateUpdatesEnabled is not available on Android atm,
+    // however we must override their setters
+    override fun setSynchronousShadowStateUpdatesEnabled(
+        view: ScreenStackHeaderSubview?,
+        value: Boolean,
+    ) = Unit
+
     override fun updateState(
         view: ScreenStackHeaderSubview,
         props: ReactStylesDiffMap?,
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
@@ -268,6 +268,7 @@ open class ScreenViewManager :
         view?.sheetElevation = value.toFloat()
     }
 
+    // mark: iOS-only
     // these props are not available on Android, however we must override their setters
     override fun setFullScreenSwipeEnabled(
         view: Screen?,
@@ -334,6 +335,13 @@ open class ScreenViewManager :
         value: String?,
     ) = Unit
 
+    override fun setSynchronousShadowStateUpdatesEnabled(
+        view: Screen?,
+        value: Boolean,
+    ) = Unit
+
+    // END mark: iOS-only
+
     @ReactProp(name = "sheetAllowedDetents")
     override fun setSheetAllowedDetents(
         view: Screen,
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java
@@ -134,6 +134,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "topScrollEdgeEffect":
         mViewManager.setTopScrollEdgeEffect(view, (String) value);
         break;
+      case "synchronousShadowStateUpdatesEnabled":
+        mViewManager.setSynchronousShadowStateUpdatesEnabled(view, value == null ? false : (boolean) value);
+        break;
       default:
         super.setProperty(view, propName, value);
     }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerInterface.java
@@ -52,4 +52,5 @@ public interface RNSScreenManagerInterface<T extends View>  {
   void setLeftScrollEdgeEffect(T view, @Nullable String value);
   void setRightScrollEdgeEffect(T view, @Nullable String value);
   void setTopScrollEdgeEffect(T view, @Nullable String value);
+  void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);
 }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerDelegate.java
@@ -115,6 +115,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "headerRightBarButtonItems":
         mViewManager.setHeaderRightBarButtonItems(view, (ReadableArray) value);
         break;
+      case "synchronousShadowStateUpdatesEnabled":
+        mViewManager.setSynchronousShadowStateUpdatesEnabled(view, value == null ? false : (boolean) value);
+        break;
       default:
         super.setProperty(view, propName, value);
     }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerInterface.java
@@ -45,4 +45,5 @@ public interface RNSScreenStackHeaderConfigManagerInterface<T extends View>  {
   void setTopInsetEnabled(T view, boolean value);
   void setHeaderLeftBarButtonItems(T view, @Nullable ReadableArray value);
   void setHeaderRightBarButtonItems(T view, @Nullable ReadableArray value);
+  void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);
 }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderSubviewManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderSubviewManagerDelegate.java
@@ -29,6 +29,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "hidesSharedBackground":
         mViewManager.setHidesSharedBackground(view, value == null ? false : (boolean) value);
         break;
+      case "synchronousShadowStateUpdatesEnabled":
+        mViewManager.setSynchronousShadowStateUpdatesEnabled(view, value == null ? false : (boolean) value);
+        break;
       default:
         super.setProperty(view, propName, value);
     }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderSubviewManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderSubviewManagerInterface.java
@@ -16,4 +16,5 @@
 public interface RNSScreenStackHeaderSubviewManagerInterface<T extends View>  {
   void setType(T view, @Nullable String value);
   void setHidesSharedBackground(T view, boolean value);
+  void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);
 }
diff --git a/apps/src/tests/Test3282.tsx b/apps/src/tests/Test3282.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+type StackParamList = {
+  Home: undefined,
+  FormSheet: undefined,
+}
+
+type RouteProps = {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}
+
+const Stack = createNativeStackNavigator();
+
+const HomeScreen = ({ navigation }: RouteProps) => {
+  return (
+    <View style={styles.container}>
+      <Button
+        title="Open Modal"
+        onPress={() => navigation.navigate('FormSheet')}
+      />
+    </View>
+  );
+};
+
+const FormSheet = () => {
+  return (
+    <View style={styles.sheetContainer}>
+      <View style={styles.content}>
+        <Text>Modal Content</Text>
+      </View>
+      <View style={styles.blueBox}>
+        <Text style={styles.boxText}>Box</Text>
+      </View>
+    </View>
+  );
+};
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen
+          name="FormSheet"
+          component={FormSheet}
+          options={{
+            presentation: 'formSheet',
+            title: 'Modal',
+            headerShown: true,
+            sheetAllowedDetents: [0.4, 0.8],
+            sheetGrabberVisible: true,
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sheetContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: 'red',
+    minHeight: '100%',
+    position: 'relative',
+  },
+  content: {
+    padding: 20,
+  },
+  blueBox: {
+    height: 60,
+    backgroundColor: 'blue',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  boxText: {
+    color: 'white',
+  },
+});
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
@@ -154,6 +154,7 @@ export { default as Test3236 } from './Test3236';
 export { default as Test3239 } from './Test3239';
 export { default as Test3265 } from './Test3265';
 export { default as Test3271 } from './Test3271';
+export { default as Test3282 } from './Test3282';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';
diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
@@ -94,6 +94,7 @@ namespace react = facebook::react;
 @property (nonatomic) RNSScrollEdgeEffect leftScrollEdgeEffect;
 @property (nonatomic) RNSScrollEdgeEffect rightScrollEdgeEffect;
 @property (nonatomic) RNSScrollEdgeEffect topScrollEdgeEffect;
+@property (nonatomic, readwrite) BOOL synchronousShadowStateUpdatesEnabled;
 
 @property (nonatomic, retain) NSNumber *transitionDuration;
 @property (nonatomic, readonly) BOOL dismissed;
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
@@ -12,6 +12,7 @@
 #import <React/RCTRootComponentView.h>
 #import <React/RCTScrollViewComponentView.h>
 #import <React/RCTSurfaceTouchHandler.h>
+#import <cxxreact/ReactNativeVersion.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
@@ -188,7 +189,15 @@ - (void)updateBounds
         : [_controller calculateHeaderHeightIsModal:self.isPresentedAsNativeModal];
 
     auto newState = react::RNSScreenState{RCTSizeFromCGSize(self.bounds.size), {0, effectiveContentOffsetY}};
-    _state->updateState(std::move(newState));
+
+    _state->updateState(
+        std::move(newState)
+#if REACT_NATIVE_VERSION_MINOR >= 82
+            ,
+        _synchronousShadowStateUpdatesEnabled ? facebook::react::EventQueue::UpdateMode::unstable_Immediate
+                                              : facebook::react::EventQueue::UpdateMode::Asynchronous
+#endif
+    );
 
     // TODO: Requesting layout on every layout is wrong. We should look for a way to get rid of this.
     UINavigationController *navctr = _controller.navigationController;
@@ -1372,6 +1381,8 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
 
   [self setSwipeDirection:[RNSConvert RNSScreenSwipeDirectionFromCppEquivalent:newScreenProps.swipeDirection]];
 
+  [self setSynchronousShadowStateUpdatesEnabled:newScreenProps.synchronousShadowStateUpdatesEnabled];
+
 #if !TARGET_OS_TV
   if (newScreenProps.statusBarHidden != oldScreenProps.statusBarHidden) {
     [self setStatusBarHidden:newScreenProps.statusBarHidden];
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
@@ -65,6 +65,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) RCTDirectEventBlock onPressHeaderBarButtonItem;
 @property (nonatomic) RCTDirectEventBlock onPressHeaderBarButtonMenuItem;
 #endif
+@property (nonatomic, readwrite) BOOL synchronousShadowStateUpdatesEnabled;
 
 NS_ASSUME_NONNULL_END
 
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
@@ -5,6 +5,7 @@
 #import <React/RCTMountingTransactionObserving.h>
 #import <React/UIView+React.h>
 #import <ReactCommon/TurboModuleUtils.h>
+#import <cxxreact/ReactNativeVersion.h>
 #import <react/renderer/components/image/ImageProps.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
@@ -233,7 +234,14 @@ - (void)updateShadowStateWithSize:(CGSize)size edgeInsets:(NSDirectionalEdgeInse
 
   if (newState != _lastSendState) {
     _lastSendState = newState;
-    _state->updateState(std::move(newState));
+    _state->updateState(
+        std::move(newState)
+#if REACT_NATIVE_VERSION_MINOR >= 82
+            ,
+        _synchronousShadowStateUpdatesEnabled ? facebook::react::EventQueue::UpdateMode::unstable_Immediate
+                                              : facebook::react::EventQueue::UpdateMode::Asynchronous
+#endif
+    );
   }
 }
 
@@ -1178,6 +1186,8 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
     [self layoutNavigationControllerView];
   }
 
+  _synchronousShadowStateUpdatesEnabled = newScreenProps.synchronousShadowStateUpdatesEnabled;
+
   _initialPropsSet = YES;
   _props = std::static_pointer_cast<react::RNSScreenStackHeaderConfigProps const>(props);
 
diff --git a/ios/RNSScreenStackHeaderSubview.h b/ios/RNSScreenStackHeaderSubview.h
@@ -17,6 +17,7 @@ NS_ASSUME_NONNULL_BEGIN
 #endif
 
 @property (nonatomic) RNSScreenStackHeaderSubviewType type;
+@property (nonatomic, readwrite) BOOL synchronousShadowStateUpdatesEnabled;
 
 @property (nonatomic, weak) UIView *reactSuperview;
 
diff --git a/ios/RNSScreenStackHeaderSubview.mm b/ios/RNSScreenStackHeaderSubview.mm
@@ -4,6 +4,7 @@
 #import "RNSScreenStackHeaderConfig.h"
 
 #ifdef RCT_NEW_ARCH_ENABLED
+#import <cxxreact/ReactNativeVersion.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
@@ -99,7 +100,15 @@ - (void)updateShadowStateWithFrame:(CGRect)frame
   if (!CGRectEqualToRect(frame, _lastScheduledFrame)) {
     auto newState =
         react::RNSScreenStackHeaderSubviewState(RCTSizeFromCGSize(frame.size), RCTPointFromCGPoint(frame.origin));
-    _state->updateState(std::move(newState));
+    _state->updateState(
+        std::move(newState)
+#if REACT_NATIVE_VERSION_MINOR >= 82
+            ,
+        _synchronousShadowStateUpdatesEnabled ? facebook::react::EventQueue::UpdateMode::unstable_Immediate
+                                              : facebook::react::EventQueue::UpdateMode::Asynchronous
+#endif
+    );
+
     _lastScheduledFrame = frame;
   }
 }
@@ -140,6 +149,7 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
 
   [self setType:[RNSConvert RNSScreenStackHeaderSubviewTypeFromCppEquivalent:newHeaderSubviewProps.type]];
   [self setHidesSharedBackground:newHeaderSubviewProps.hidesSharedBackground];
+  [self setSynchronousShadowStateUpdatesEnabled:newHeaderSubviewProps.synchronousShadowStateUpdatesEnabled];
   [super updateProps:props oldProps:oldProps];
 }
 
diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
@@ -29,6 +29,7 @@ import {
   resolveSheetLargestUndimmedDetent,
 } from './helpers/sheet';
 import { parseBooleanToOptionalBooleanNativeProp } from '../utils';
+import featureFlags from '../flags';
 
 type NativeProps = ScreenNativeComponentProps | ModalScreenNativeComponentProps;
 const AnimatedNativeScreen = Animated.createAnimatedComponent(
@@ -263,7 +264,10 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
             bottomScrollEdgeEffect={scrollEdgeEffects?.bottom}
             leftScrollEdgeEffect={scrollEdgeEffects?.left}
             rightScrollEdgeEffect={scrollEdgeEffects?.right}
-            topScrollEdgeEffect={scrollEdgeEffects?.top}>
+            topScrollEdgeEffect={scrollEdgeEffects?.top}
+            synchronousShadowStateUpdatesEnabled={
+              featureFlags.experiment.synchronousScreenUpdatesEnabled
+            }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
             ) : (
diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
diff --git a/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts b/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
diff --git a/src/flags.ts b/src/flags.ts

Original file line number	Diff line number	Diff line change
`@@ -52,4 +52,5 @@ public interface RNSScreenManagerInterface<T extends View> {`
`52`	`52`	`void setLeftScrollEdgeEffect(T view, @Nullable String value);`
`53`	`53`	`void setRightScrollEdgeEffect(T view, @Nullable String value);`
`54`	`54`	`void setTopScrollEdgeEffect(T view, @Nullable String value);`
	`55`	`+ void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);`
`55`	`56`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,4 +45,5 @@ public interface RNSScreenStackHeaderConfigManagerInterface<T extends View> {`
`45`	`45`	`void setTopInsetEnabled(T view, boolean value);`
`46`	`46`	`void setHeaderLeftBarButtonItems(T view, @Nullable ReadableArray value);`
`47`	`47`	`void setHeaderRightBarButtonItems(T view, @Nullable ReadableArray value);`
	`48`	`+ void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);`
`48`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,5 @@`
`16`	`16`	`public interface RNSScreenStackHeaderSubviewManagerInterface<T extends View> {`
`17`	`17`	`void setType(T view, @Nullable String value);`
`18`	`18`	`void setHidesSharedBackground(T view, boolean value);`
	`19`	`+ void setSynchronousShadowStateUpdatesEnabled(T view, boolean value);`
`19`	`20`	`}`