Prepare to using setNativeProps for Fabric native animations (#45387)

Summary:
Pull Request resolved: #45387

This diff prepares an experiment to test `setNativeProps` for syncing the final state of native driven animations with Fabric.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D59634489

fbshipit-source-id: 453c5a2f0edfea695f7564e0c5ead58db21cf61e

packages/react-native/Libraries/Animated/useAnimatedProps.js

@@ -49,6 +49,8 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   );
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+  const useSetNativePropsInNativeAnimationsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -87,7 +89,12 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           if (isFabricNode) {
             // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
             // Must not be called in Paper.
-            scheduleUpdate();
+            if (useSetNativePropsInNativeAnimationsInFabric) {
+              // $FlowFixMe[incompatible-use]
+              instance.setNativeProps(node.__getAnimatedValue());
+            } else {
+              scheduleUpdate();
+            }
           }
           return;
         }
@@ -157,7 +164,12 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [props, node, useNativePropsInFabric],
+    [
+      node,
+      useNativePropsInFabric,
+      useSetNativePropsInNativeAnimationsInFabric,
+      props,
+    ],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -221,6 +221,11 @@ const definitions: FeatureFlagDefinitions = {
       defaultValue: true,
       description: 'Enables use of setNativeProps in JS driven animations.',
     },
+    shouldUseSetNativePropsInNativeAnimationsInFabric: {
+      defaultValue: false,
+      description:
+        'Enables use of setNativeProps in Native driven animations in Fabric.',
+    },
     useRefsForTextInputState: {
       defaultValue: false,
       description:

packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<e309dc08faf6e94d31af64535246ff11>>
+ * @generated SignedSource<<152472a7f8698f0f45ed2d909532d84d>>
  * @flow strict-local
  */
 
@@ -34,6 +34,7 @@ export type ReactNativeFeatureFlagsJsOnly = {
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
+  shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean>,
   useRefsForTextInputState: Getter<boolean>,
 };
 
@@ -113,6 +114,11 @@ export const shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean> = cre
  */
 export const shouldUseSetNativePropsInFabric: Getter<boolean> = createJavaScriptFlagGetter('shouldUseSetNativePropsInFabric', true);
 
+/**
+ * Enables use of setNativeProps in Native driven animations in Fabric.
+ */
+export const shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean> = createJavaScriptFlagGetter('shouldUseSetNativePropsInNativeAnimationsInFabric', false);
+
 /**
  * Enable a variant of TextInput that moves some state to refs to avoid unnecessary re-renders
  */