Thread down rootTag/surfaceId to AnimatedInterpolation node (#54621)

Summary:
Pull Request resolved: #54621

## Changelog:

[General] [Added] - Thread down rootTag/surfaceId to AnimatedInterpolation node

Thread down rootTag (aka surfaceId) from AnimatedProps to AnimatedInterpolation in c++ animated for the PlatformColor resolver
Directly read rootTag value from RootTagContext in `useAnimatedProps` hook, this might be the fastest way to look up rootTag for AnimatedProps - an alternative is to find ShadowNode in ShadowTreeRegistry with react tag and read surfaceId on it, which is very expensive.

Reviewed By: javache

Differential Revision: D86999015

fbshipit-source-id: b84fbfe7e8be6a423c3d25e4e3939d59ac338a45

Author: zeyap

packages/react-native/Libraries/Animated/nodes/AnimatedProps.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {RootTag} from '../../Types/RootTagTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
@@ -97,11 +98,13 @@ export default class AnimatedProps extends AnimatedNode {
   _nodes: $ReadOnlyArray<AnimatedNode>;
   _props: {[string]: mixed};
   _target: ?TargetView = null;
+  _rootTag: ?RootTag = undefined;
 
   constructor(
     inputProps: {[string]: mixed},
     callback: () => void,
     allowlist?: ?AnimatedPropsAllowlist,
+    rootTag?: RootTag,
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
@@ -110,6 +113,7 @@ export default class AnimatedProps extends AnimatedNode {
     this._nodes = nodes;
     this._props = props;
     this._callback = callback;
+    this._rootTag = rootTag;
   }
 
   __getValue(): Object {
@@ -318,6 +322,7 @@ export default class AnimatedProps extends AnimatedNode {
     return {
       type: 'props',
       props: propsConfig,
+      rootTag: this._rootTag ?? undefined,
       debugID: this.__getDebugID(),
     };
   }

packages/react-native/ReactCommon/react/renderer/animated/nodes/InterpolationAnimatedNode.cpp

@@ -11,9 +11,11 @@
 
 #include "InterpolationAnimatedNode.h"
 
+#include <glog/logging.h>
 #include <react/renderer/animated/NativeAnimatedNodesManager.h>
 #include <react/renderer/animated/drivers/AnimationDriverUtils.h>
 #include <react/renderer/animated/internal/primitives.h>
+#include <react/renderer/animated/nodes/PropsAnimatedNode.h>
 #include <react/renderer/graphics/HostPlatformColor.h>
 
 namespace facebook::react {
@@ -150,6 +152,10 @@ double InterpolationAnimatedNode::interpolateColor(double value) {
 }
 
 double InterpolationAnimatedNode::interpolatePlatformColor(double value) {
+  if (connectedRootTag_ == animated::undefinedAnimatedNodeIdentifier) {
+    connectedRootTag_ = resolveConnectedRootTag();
+  }
+
   // Compute range index
   size_t index = 1;
   for (; index < inputRanges_.size() - 1; ++index) {
@@ -211,4 +217,27 @@ double InterpolationAnimatedNode::interpolatePlatformColor(double value) {
       static_cast<uint8_t>(outputValueA)));
 }
 
+SurfaceId InterpolationAnimatedNode::resolveConnectedRootTag() const {
+  // find nearest connected props node
+  std::deque<Tag> nodesQueue{tag()};
+  while (!nodesQueue.empty()) {
+    auto nodeTag = nodesQueue.front();
+    nodesQueue.pop_front();
+    if (auto node = manager_->getAnimatedNode<AnimatedNode>(nodeTag)) {
+      if (node->type() == AnimatedNodeType::Props) {
+        if (auto propsNode = static_cast<PropsAnimatedNode*>(node)) {
+          return propsNode->connectedRootTag();
+        }
+        break;
+      }
+      auto children = node->getChildren();
+      nodesQueue.insert(nodesQueue.end(), children.begin(), children.end());
+    }
+  }
+
+  LOG(ERROR)
+      << "InterpolationAnimatedNode: Unable to resolve connected root tag";
+  return animated::undefinedAnimatedNodeIdentifier;
+}
+
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/animated/nodes/InterpolationAnimatedNode.h

@@ -31,6 +31,8 @@ class InterpolationAnimatedNode final : public ValueAnimatedNode {
   double interpolateColor(double value);
   double interpolatePlatformColor(double value);
 
+  SurfaceId resolveConnectedRootTag() const;
+
   std::vector<double> inputRanges_;
   std::vector<double> defaultOutputRanges_;
   std::vector<Color> colorOutputRanges_;

packages/react-native/ReactCommon/react/renderer/animated/nodes/PropsAnimatedNode.cpp

@@ -49,7 +49,11 @@ PropsAnimatedNode::PropsAnimatedNode(
     const folly::dynamic& config,
     NativeAnimatedNodesManager& manager)
     : AnimatedNode(tag, config, manager, AnimatedNodeType::Props),
-      props_(folly::dynamic::object()) {}
+      props_(folly::dynamic::object()) {
+  if (auto it = getConfig().find("rootTag"); it != getConfig().items().end()) {
+    connectedRootTag_ = static_cast<Tag>(it->second.asInt());
+  }
+}
 
 void PropsAnimatedNode::connectToView(Tag viewTag) {
   react_native_assert(

packages/react-native/ReactCommon/react/renderer/animated/nodes/PropsAnimatedNode.h

@@ -29,6 +29,11 @@ class PropsAnimatedNode final : public AnimatedNode {
     return connectedViewTag_;
   }
 
+  SurfaceId connectedRootTag() const
+  {
+    return connectedRootTag_;
+  }
+
   folly::dynamic props()
   {
     std::lock_guard<std::mutex> lock(propsMutex_);
@@ -45,5 +50,8 @@ class PropsAnimatedNode final : public AnimatedNode {
   bool layoutStyleUpdated_{false};
 
   Tag connectedViewTag_{animated::undefinedAnimatedNodeIdentifier};
+
+  // Needed for PlatformColor resolver
+  SurfaceId connectedRootTag_{animated::undefinedAnimatedNodeIdentifier};
 };
 } // namespace facebook::react

packages/react-native/src/private/animated/__tests__/AnimatedNative-test.js

@@ -445,7 +445,7 @@ describe('Native Animated', () => {
       );
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
-        {type: 'props', props: {style: expect.any(Number)}},
+        {type: 'props', props: {style: expect.any(Number)}, rootTag: 0},
       );
     });
 
@@ -1195,7 +1195,7 @@ describe('Native Animated', () => {
       );
       expect(NativeAnimatedModule.createAnimatedNode).toBeCalledWith(
         expect.any(Number),
-        {type: 'props', props: {style: expect.any(Number)}},
+        {type: 'props', props: {style: expect.any(Number)}, rootTag: 0},
       );
     });
   });
@@ -1565,7 +1565,7 @@ describe('Native Animated', () => {
             type: 'style',
           },
         ],
-        [5, {debugID: undefined, props: {style: 2}, type: 'props'}],
+        [5, {debugID: undefined, props: {style: 2}, type: 'props', rootTag: 0}],
       ]);
 
       createAnimatedNodeCalledTimes += 5;
@@ -1613,7 +1613,7 @@ describe('Native Animated', () => {
             type: 'style',
           },
         ],
-        [9, {debugID: undefined, props: {style: 7}, type: 'props'}],
+        [9, {debugID: undefined, props: {style: 7}, type: 'props', rootTag: 0}],
       ]);
 
       createAnimatedNodeCalledTimes += 4;
@@ -1672,7 +1672,10 @@ describe('Native Animated', () => {
             type: 'style',
           },
         ],
-        [13, {debugID: undefined, props: {style: 12}, type: 'props'}],
+        [
+          13,
+          {debugID: undefined, props: {style: 12}, type: 'props', rootTag: 0},
+        ],
       ]);
 
       createAnimatedNodeCalledTimes += 4;

packages/react-native/src/private/animated/createAnimatedPropsHook.js

@@ -15,12 +15,14 @@ import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
 import AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
 import AnimatedValue from '../../../Libraries/Animated/nodes/AnimatedValue';
 import {isPublicInstance as isFabricPublicInstance} from '../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import {RootTagContext} from '../../../Libraries/ReactNative/RootTag';
 import useRefEffect from '../../../Libraries/Utilities/useRefEffect';
 import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
 import {createAnimatedPropsMemoHook} from './createAnimatedPropsMemoHook';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
 import {
   useCallback,
+  useContext,
   useEffect,
   useInsertionEffect,
   useReducer,
@@ -60,8 +62,16 @@ export default function createAnimatedPropsHook(
     const onUpdateRef = useRef<UpdateCallback | null>(null);
     const timerRef = useRef<TimeoutID | null>(null);
 
+    const rootTag = useContext(RootTagContext);
+
     const node = useAnimatedPropsMemo(
-      () => new AnimatedProps(props, () => onUpdateRef.current?.(), allowlist),
+      () =>
+        new AnimatedProps(
+          props,
+          () => onUpdateRef.current?.(),
+          allowlist,
+          rootTag,
+        ),
       props,
     );