Add option to enable setNativeProps in Fabric for animated components (#38317)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38317

changelog: [internal]

Reviewed By: javache

Differential Revision: D47402598

fbshipit-source-id: cb780bde309d968c71677f9717b55485ae72540f

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

@@ -11,6 +11,7 @@
 'use strict';
 
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -45,6 +46,8 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
     () => new AnimatedProps(props, () => onUpdateRef.current?.()),
     [props],
   );
+  const useNativePropsInFabric =
+    ReactNativeFeatureFlags.useSetNativePropsInFabric();
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -74,7 +77,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           process.env.NODE_ENV === 'test' ||
           typeof instance !== 'object' ||
           typeof instance?.setNativeProps !== 'function' ||
-          isFabricInstance(instance)
+          (isFabricInstance(instance) && !useNativePropsInFabric)
         ) {
           // Schedule an update for this component to update `reducedProps`,
           // but do not compute it immediately. If a parent also updated, we
@@ -106,7 +109,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
         }
       };
     },
-    [props, node],
+    [props, node, useNativePropsInFabric],
   );
   const callbackRef = useRefEffect<TInstance>(refEffect);
 

packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -49,6 +49,10 @@ export type FeatureFlags = {|
    * Enables use of AnimatedObject for animating transform values.
    */
   shouldUseAnimatedObjectForTransform: () => boolean,
+  /**
+   * Enables use of setNativeProps in JS driven animations.
+   */
+  useSetNativePropsInFabric: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -60,6 +64,7 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   isGlobalWebPerformanceLoggerEnabled: () => false,
   enableAccessToHostTreeInFabric: () => false,
   shouldUseAnimatedObjectForTransform: () => false,
+  useSetNativePropsInFabric: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;