From c3f07d85a956135a329e2064a9c2c29b7a3ac5cf Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@meta.com>
Date: Wed, 12 Jul 2023 13:22:20 -0700
Subject: [PATCH] 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
---
 .../react-native/Libraries/Animated/useAnimatedProps.js    | 7 +++++--
 .../Libraries/ReactNative/ReactNativeFeatureFlags.js       | 5 +++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/useAnimatedProps.js b/packages/react-native/Libraries/Animated/useAnimatedProps.js
index bf3a6d140c9..c8ac6bcfa37 100644
--- a/packages/react-native/Libraries/Animated/useAnimatedProps.js
+++ b/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);
 
diff --git a/packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js b/packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js
index 2dafd7de630..16fb2c5873a 100644
--- a/packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js
+++ b/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;