Pass families to Native Animated

packages/react-native/Libraries/Animated/__tests__/AnimatedBackend-itest.js

@@ -17,6 +17,7 @@
 import * as Fantom from '@react-native/fantom';
 import {createRef} from 'react';
 import {Animated, useAnimatedValue} from 'react-native';
+import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 test('animated opacity', () => {
@@ -73,3 +74,56 @@
     <rn-view opacity="0" />,
   );
 });
+
+test('animate layout props', () => {
+  const viewRef = createRef<HostInstance>();
+  allowStyleProp('height');
+
+  let _animatedHeight;
+  let _heightAnimation;
+
+  function MyApp() {
+    const animatedHeight = useAnimatedValue(0);
+    _animatedHeight = animatedHeight;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: 100,
+            height: animatedHeight,
+          },
+        ]}
+      />
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+
+  Fantom.runTask(() => {
+    _heightAnimation = Animated.timing(_animatedHeight, {
+      toValue: 100,
+      duration: 10,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(10);
+
+  // TODO: this shouldn't be neccessary since animation should be stopped after duration
+  Fantom.runTask(() => {
+    _heightAnimation?.stop();
+  });
+
+  // TODO: getFabricUpdateProps is not working with the cloneMutliple method
+  // expect(Fantom.unstable_getFabricUpdateProps(viewElement).height).toBe(100);
+  expect(root.getRenderedOutput({props: ['height']}).toJSX()).toEqual(
+    <rn-view height="100.000000" />,
+  );
+});

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

@@ -14,6 +14,7 @@ import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import {getNodeFromPublicInstance} from '../../ReactPrivate/ReactNativePrivateInterface';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
@@ -249,6 +250,9 @@ export default class AnimatedProps extends AnimatedNode {
       if (this._target != null) {
         this.#connectAnimatedView(this._target);
       }
+      if (this._target != null) {
+        this.#connectShadowNode(this._target);
+      }
     }
   }
 
@@ -259,6 +263,9 @@ export default class AnimatedProps extends AnimatedNode {
     this._target = {instance, connectedViewTag: null};
     if (this.__isNative) {
       this.#connectAnimatedView(this._target);
+      if (this._target) {
+        this.#connectShadowNode(this._target);
+      }
     }
   }
 
@@ -279,6 +286,19 @@ export default class AnimatedProps extends AnimatedNode {
     target.connectedViewTag = viewTag;
   }
 
+  #connectShadowNode(target: TargetView): void {
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    // $FlowExpectedError[incompatible-type] - target.instance may be an HTMLElement but we need ReactNativeElement for Fabric
+    const shadowNode = getNodeFromPublicInstance(target.instance);
+    if (shadowNode == null) {
+      return;
+    }
+    NativeAnimatedHelper.API.connectAnimatedNodeToShadowNodeFamily(
+      this.__getNativeTag(),
+      shadowNode,
+    );
+  }
+
   #disconnectAnimatedView(target: TargetView): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
     const viewTag = target.connectedViewTag;

packages/react-native/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm

@@ -165,6 +165,8 @@ - (void)setSurfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter
   }];
 }
 
+RCT_EXPORT_METHOD(connectAnimatedNodeToShadowNodeFamily : (double)nodeTag shadowNode : (NSDictionary *)shadowNode) {}
+
 RCT_EXPORT_METHOD(disconnectAnimatedNodeFromView : (double)nodeTag viewTag : (double)viewTag)
 {
   [self queueOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -457,6 +457,7 @@ public final class com/facebook/react/animated/NativeAnimatedModule : com/facebo
 	public fun <init> (Lcom/facebook/react/bridge/ReactApplicationContext;)V
 	public fun addAnimatedEventToView (DLjava/lang/String;Lcom/facebook/react/bridge/ReadableMap;)V
 	public fun addListener (Ljava/lang/String;)V
+	public fun connectAnimatedNodeToShadowNodeFamily (DLcom/facebook/react/bridge/ReadableMap;)V
 	public fun connectAnimatedNodeToView (DD)V
 	public fun connectAnimatedNodes (DD)V
 	public fun createAnimatedNode (DLcom/facebook/react/bridge/ReadableMap;)V

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.kt

@@ -1117,4 +1117,6 @@ public class NativeAnimatedModule(reactContext: ReactApplicationContext) :
 
     public const val ANIMATED_MODULE_DEBUG: Boolean = false
   }
+
+  override fun connectAnimatedNodeToShadowNodeFamily(p0: Double, p1: ReadableMap) {}
 }

packages/react-native/ReactCommon/react/renderer/animated/AnimatedModule.cpp

@@ -160,6 +160,20 @@ void AnimatedModule::connectAnimatedNodeToView(
       ConnectAnimatedNodeToViewOp{.nodeTag = nodeTag, .viewTag = viewTag});
 }
 
+void AnimatedModule::connectAnimatedNodeToShadowNodeFamily(
+    jsi::Runtime& rt,
+    Tag nodeTag,
+    jsi::Object shadowNodeObj) {
+  const auto& nativeState = shadowNodeObj.getNativeState(rt);
+  const auto& shadowNode =
+      std::dynamic_pointer_cast<ShadowNodeWrapper>(nativeState)->shadowNode;
+
+  operations_.emplace_back(
+      ConnectAnimatedNodeToShadowNodeFamilyOp{
+          .nodeTag = nodeTag,
+          .shadowNodeFamily = shadowNode->getFamilyShared()});
+}
+
 void AnimatedModule::disconnectAnimatedNodeFromView(
     jsi::Runtime& /*rt*/,
     Tag nodeTag,
@@ -282,6 +296,11 @@ void AnimatedModule::executeOperation(
                                    DisconnectAnimatedNodeFromViewOp>) {
             nodesManager->disconnectAnimatedNodeFromView(
                 op.nodeTag, op.viewTag);
+          } else if constexpr (std::is_same_v<
+                                   T,
+                                   ConnectAnimatedNodeToShadowNodeFamilyOp>) {
+            nodesManager->connectAnimatedNodeToShadowNodeFamily(
+                op.nodeTag, op.shadowNodeFamily);
           } else if constexpr (std::is_same_v<T, RestoreDefaultValuesOp>) {
             nodesManager->restoreDefaultValues(op.nodeTag);
           } else if constexpr (std::is_same_v<T, DropAnimatedNodeOp>) {

packages/react-native/ReactCommon/react/renderer/animated/AnimatedModule.h

@@ -87,6 +87,11 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
     Tag viewTag{};
   };
 
+  struct ConnectAnimatedNodeToShadowNodeFamilyOp {
+    Tag nodeTag{};
+    std::shared_ptr<const ShadowNodeFamily> shadowNodeFamily{};
+  };
+
   struct DisconnectAnimatedNodeFromViewOp {
     Tag nodeTag{};
     Tag viewTag{};
@@ -124,6 +129,7 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
       SetAnimatedNodeOffsetOp,
       SetAnimatedNodeValueOp,
       ConnectAnimatedNodeToViewOp,
+      ConnectAnimatedNodeToShadowNodeFamilyOp,
       DisconnectAnimatedNodeFromViewOp,
       RestoreDefaultValuesOp,
       FlattenAnimatedNodeOffsetOp,
@@ -176,6 +182,8 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
 
   void connectAnimatedNodeToView(jsi::Runtime &rt, Tag nodeTag, Tag viewTag);
 
+  void connectAnimatedNodeToShadowNodeFamily(jsi::Runtime &rt, Tag nodeTag, jsi::Object shadowNode);
+
   void disconnectAnimatedNodeFromView(jsi::Runtime &rt, Tag nodeTag, Tag viewTag);
 
   void restoreDefaultValues(jsi::Runtime &rt, Tag nodeTag);

packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -238,6 +238,20 @@ void NativeAnimatedNodesManager::connectAnimatedNodeToView(
   }
 }
 
+void NativeAnimatedNodesManager::connectAnimatedNodeToShadowNodeFamily(
+    Tag propsNodeTag,
+    std::shared_ptr<const ShadowNodeFamily> family) noexcept {
+  react_native_assert(propsNodeTag);
+  auto node = getAnimatedNode<PropsAnimatedNode>(propsNodeTag);
+  if (node != nullptr) {
+    node->connectToFamily(family);
+    updatedNodeTags_.insert(node->tag());
+  } else {
+    LOG(WARNING)
+        << "Cannot ConnectAnimatedNodeToShadowNodeFamily, animated node has to be props type";
+  }
+}
+
 void NativeAnimatedNodesManager::disconnectAnimatedNodeFromView(
     Tag propsNodeTag,
     Tag viewTag) noexcept {
@@ -889,10 +903,14 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     Tag viewTag,
     const folly::dynamic& props,
     bool layoutStyleUpdated,
-    bool forceFabricCommit) noexcept {
+    bool forceFabricCommit,
+    std::shared_ptr<const ShadowNodeFamily> family) noexcept {
   if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
     if (layoutStyleUpdated) {
       mergeObjects(updateViewProps_[viewTag], props);
+      if (family) {
+        tagToShadowNodeFamily_[viewTag] = std::move(family);
+      }
     } else {
       mergeObjects(updateViewPropsDirect_[viewTag], props);
     }
@@ -1003,7 +1021,31 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
             AnimationMutation{tag, nullptr, propsBuilder.get()});
         containsChange = true;
       }
-      updateViewPropsDirect_.clear();
+      for (auto& [tag, props] : updateViewProps_) {
+        auto familyIt = tagToShadowNodeFamily_.find(tag);
+        if (familyIt != tagToShadowNodeFamily_.end()) {
+          if (props.find("width") != props.items().end()) {
+            propsBuilder.setWidth(
+                yoga::Style::SizeLength::points(props["width"].asDouble()));
+          }
+          if (props.find("height") != props.items().end()) {
+            propsBuilder.setHeight(
+                yoga::Style::SizeLength::points(props["height"].asDouble()));
+          }
+          // propsBuilder.storeDynamic(props);
+          mutations.push_back(
+              AnimationMutation{
+                  .tag = tag,
+                  .family = familyIt->second.get(),
+                  .props = propsBuilder.get()});
+        }
+        containsChange = true;
+      }
+      if (containsChange) {
+        updateViewPropsDirect_.clear();
+        updateViewProps_.clear();
+        tagToShadowNodeFamily_.clear();
+      }
     }
 
     if (!containsChange) {
@@ -1023,7 +1065,8 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
         }
       }
 
-      // Step 2: update all nodes that are connected to the finished animations.
+      // Step 2: update all nodes that are connected to the finished
+      // animations.
       updateNodes(finishedAnimationValueNodes);
 
       isEventAnimationInProgress_ = false;
@@ -1034,6 +1077,17 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
         mutations.push_back(
             AnimationMutation{tag, nullptr, propsBuilder.get()});
       }
+      for (auto& [tag, props] : updateViewProps_) {
+        auto familyIt = tagToShadowNodeFamily_.find(tag);
+        if (familyIt != tagToShadowNodeFamily_.end()) {
+          propsBuilder.storeDynamic(props);
+          mutations.push_back(
+              AnimationMutation{
+                  .tag = tag,
+                  .family = familyIt->second.get(),
+                  .props = propsBuilder.get()});
+        }
+      }
     }
   } else {
     // There is no active animation. Stop the render callback.
@@ -1113,7 +1167,8 @@ void NativeAnimatedNodesManager::onRender() {
         }
       }
 
-      // Step 2: update all nodes that are connected to the finished animations.
+      // Step 2: update all nodes that are connected to the finished
+      // animations.
       updateNodes(finishedAnimationValueNodes);
 
       isEventAnimationInProgress_ = false;

packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h

@@ -21,6 +21,7 @@
 #include <react/renderer/animationbackend/AnimationBackend.h>
 #endif
 #include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/core/ShadowNode.h>
 #include <react/renderer/uimanager/UIManagerAnimationBackend.h>
 #include <chrono>
 #include <memory>
@@ -95,6 +96,8 @@ class NativeAnimatedNodesManager {
 
   void connectAnimatedNodeToView(Tag propsNodeTag, Tag viewTag) noexcept;
 
+  void connectAnimatedNodeToShadowNodeFamily(Tag propsNodeTag, std::shared_ptr<const ShadowNodeFamily> family) noexcept;
+
   void disconnectAnimatedNodes(Tag parentTag, Tag childTag) noexcept;
 
   void disconnectAnimatedNodeFromView(Tag propsNodeTag, Tag viewTag) noexcept;
@@ -144,7 +147,8 @@ class NativeAnimatedNodesManager {
       Tag viewTag,
       const folly::dynamic &props,
       bool layoutStyleUpdated,
-      bool forceFabricCommit) noexcept;
+      bool forceFabricCommit,
+      std::shared_ptr<const ShadowNodeFamily> family = nullptr) noexcept;
 
   /**
    * Commits all pending animated property updates to their respective views.
@@ -251,6 +255,7 @@ class NativeAnimatedNodesManager {
 
   std::unordered_map<Tag, folly::dynamic> updateViewProps_{};
   std::unordered_map<Tag, folly::dynamic> updateViewPropsDirect_{};
+  std::unordered_map<Tag, std::shared_ptr<const ShadowNodeFamily>> tagToShadowNodeFamily_{};
 
   /*
    * Sometimes a view is not longer connected to a PropsAnimatedNode, but

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

@@ -58,6 +58,11 @@ void PropsAnimatedNode::connectToView(Tag viewTag) {
   connectedViewTag_ = viewTag;
 }
 
+void PropsAnimatedNode::connectToFamily(
+    std::shared_ptr<const ShadowNodeFamily>& family) {
+  viewShadowNodeFamily_ = family;
+}
+
 void PropsAnimatedNode::disconnectFromView(Tag viewTag) {
   react_native_assert(
       connectedViewTag_ == viewTag &&
@@ -144,7 +149,11 @@ void PropsAnimatedNode::update(bool forceFabricCommit) {
   layoutStyleUpdated_ = isLayoutStyleUpdated(getConfig()["props"], *manager_);
 
   manager_->schedulePropsCommit(
-      connectedViewTag_, props_, layoutStyleUpdated_, forceFabricCommit);
+      connectedViewTag_,
+      props_,
+      layoutStyleUpdated_,
+      forceFabricCommit,
+      viewShadowNodeFamily_.lock());
 }
 
 } // namespace facebook::react

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

@@ -14,13 +14,15 @@
 #include "AnimatedNode.h"
 
 #include <react/renderer/animated/internal/primitives.h>
+#include <react/renderer/core/ShadowNode.h>
 #include <mutex>
 
 namespace facebook::react {
 class PropsAnimatedNode final : public AnimatedNode {
  public:
   PropsAnimatedNode(Tag tag, const folly::dynamic &config, NativeAnimatedNodesManager &manager);
   void connectToView(Tag viewTag);
+  void connectToFamily(std::shared_ptr<const ShadowNodeFamily> &family);
   void disconnectFromView(Tag viewTag);
   void restoreDefaultValues();
 
@@ -45,5 +47,6 @@ class PropsAnimatedNode final : public AnimatedNode {
   bool layoutStyleUpdated_{false};
 
   Tag connectedViewTag_{animated::undefinedAnimatedNodeIdentifier};
+  std::weak_ptr<const ShadowNodeFamily> viewShadowNodeFamily_{};
 };
 } // namespace facebook::react