Commit hook

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

@@ -15,8 +15,9 @@ import type {HostInstance} from 'react-native';
 
 import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
 import * as Fantom from '@react-native/fantom';
-import {createRef} from 'react';
+import {createRef, useEffect, useState} 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', () => {
@@ -83,3 +84,217 @@ test('animated opacity', () => {
     <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 />);
+  });
+
+  Fantom.runTask(() => {
+    _heightAnimation = Animated.timing(_animatedHeight, {
+      toValue: 100,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(100);
+
+  // 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="50.000000" />,
+  );
+
+  Fantom.unstable_produceFramesForDuration(100);
+
+  // TODO: this shouldn't be neccessary since animation should be stopped after duration
+  Fantom.runTask(() => {
+    _heightAnimation?.stop();
+  });
+
+  expect(root.getRenderedOutput({props: ['height']}).toJSX()).toEqual(
+    <rn-view height="100.000000" />,
+  );
+});
+
+test('animate layout props and rerender', () => {
+  const viewRef = createRef<HostInstance>();
+  allowStyleProp('height');
+
+  let _animatedHeight;
+  let _heightAnimation;
+  let _setWidth;
+
+  function MyApp() {
+    const animatedHeight = useAnimatedValue(0);
+    const [width, setWidth] = useState(100);
+    _animatedHeight = animatedHeight;
+    _setWidth = setWidth;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: width,
+            height: animatedHeight,
+          },
+        ]}
+      />
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  Fantom.runTask(() => {
+    _heightAnimation = Animated.timing(_animatedHeight, {
+      toValue: 100,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(500);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="100.000000" />,
+  );
+
+  Fantom.runTask(() => {
+    _setWidth(200);
+  });
+
+  // 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(50);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="200.000000" />,
+  );
+});
+
+test('animate layout props and rerender in many components', () => {
+  const viewRef = createRef<HostInstance>();
+  allowStyleProp('height');
+
+  let _animatedHeight;
+  let _heightAnimation;
+  let _setWidth;
+  const N = 100;
+
+  function AnimatedComponent() {
+    const animatedHeight = useAnimatedValue(0);
+
+    useEffect(() => {
+      Animated.timing(animatedHeight, {
+        toValue: 100,
+        duration: 1000,
+        useNativeDriver: true,
+      }).start();
+    });
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: 100,
+            height: animatedHeight,
+          },
+        ]}
+      />
+    );
+  }
+
+  function MyApp() {
+    const animatedHeight = useAnimatedValue(0);
+    const [width, setWidth] = useState(100);
+    _animatedHeight = animatedHeight;
+    _setWidth = setWidth;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: width,
+            height: animatedHeight,
+          },
+        ]}>
+        {Array.from({length: N}, (_, i) => (
+          <AnimatedComponent key={i} />
+        ))}
+      </Animated.View>
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  Fantom.runTask(() => {
+    _heightAnimation = Animated.timing(_animatedHeight, {
+      toValue: 100,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(500);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="100.000000">
+      {Array.from({length: N}, (_, i) => (
+        <rn-view key={i} height="50.000000" width="100.000000" />
+      ))}
+    </rn-view>,
+  );
+
+  Fantom.runTask(() => {
+    _setWidth(200);
+  });
+
+  // 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(50);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="200.000000">
+      {Array.from({length: N}, (_, i) => (
+        <rn-view key={i} height="50.000000" width="100.000000" />
+      ))}
+    </rn-view>,
+  );
+});

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

@@ -14,7 +14,9 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import {getNodeFromPublicInstance} from '../../ReactPrivate/ReactNativePrivateInterface';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
@@ -251,7 +253,9 @@ export default class AnimatedProps extends AnimatedNode {
       super.__setPlatformConfig(platformConfig);
 
       if (this._target != null) {
-        this.#connectAnimatedView(this._target);
+        const target = this._target;
+        this.#connectAnimatedView(target);
+        this.#connectShadowNode(target);
       }
     }
   }
@@ -260,9 +264,10 @@ export default class AnimatedProps extends AnimatedNode {
     if (this._target?.instance === instance) {
       return;
     }
-    this._target = {instance, connectedViewTag: null};
+    const target = (this._target = {instance, connectedViewTag: null});
     if (this.__isNative) {
-      this.#connectAnimatedView(this._target);
+      this.#connectAnimatedView(target);
+      this.#connectShadowNode(target);
     }
   }
 
@@ -283,6 +288,27 @@ export default class AnimatedProps extends AnimatedNode {
     target.connectedViewTag = viewTag;
   }
 
+  #connectShadowNode(target: TargetView): void {
+    if (
+      !ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() ||
+      //eslint-disable-next-line
+      !ReactNativeFeatureFlags.useSharedAnimatedBackend()
+    ) {
+      return;
+    }
+
+    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

@@ -10,6 +10,7 @@
 #import <React/RCTInitializing.h>
 #import <React/RCTNativeAnimatedNodesManager.h>
 #import <React/RCTNativeAnimatedTurboModule.h>
+#import <react/debug/react_native_assert.h>
 #import <react/featureflags/ReactNativeFeatureFlags.h>
 
 #import "RCTAnimationPlugins.h"
@@ -165,6 +166,12 @@ - (void)setSurfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter
   }];
 }
 
+RCT_EXPORT_METHOD(connectAnimatedNodeToShadowNodeFamily : (double)nodeTag shadowNode : (NSDictionary *)shadowNode)
+{
+  // This method should only be called when using CxxNativeAnimated
+  react_native_assert(false);
+}
+
 RCT_EXPORT_METHOD(disconnectAnimatedNodeFromView : (double)nodeTag viewTag : (double)viewTag)
 {
   [self queueOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {

packages/react-native/Libraries/NativeAnimation/React-RCTAnimation.podspec

@@ -48,6 +48,7 @@ Pod::Spec.new do |s|
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])
   add_dependency(s, "React-NativeModulesApple")
   add_dependency(s, "React-featureflags")
+  add_dependency(s, "React-debug")
 
   add_rn_third_party_dependencies(s)
   add_rncore_dependency(s)

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

@@ -9,9 +9,9 @@
 
 #include <glog/logging.h>
 #include <jsi/JSIDynamic.h>
+#include <react/renderer/bridging/bridging.h>
 
 namespace facebook::react {
-
 AnimatedModule::AnimatedModule(
     std::shared_ptr<CallInvoker> jsInvoker,
     std::shared_ptr<NativeAnimatedNodesManagerProvider> nodesManagerProvider)
@@ -160,6 +160,19 @@ void AnimatedModule::connectAnimatedNodeToView(
       ConnectAnimatedNodeToViewOp{.nodeTag = nodeTag, .viewTag = viewTag});
 }
 
+void AnimatedModule::connectAnimatedNodeToShadowNodeFamily(
+    jsi::Runtime& rt,
+    Tag nodeTag,
+    jsi::Object shadowNodeObj) {
+  const auto& shadowNode = Bridging<std::shared_ptr<const ShadowNode>>::fromJs(
+      rt, jsi::Value(rt, shadowNodeObj));
+
+  operations_.emplace_back(
+      ConnectAnimatedNodeToShadowNodeFamilyOp{
+          .nodeTag = nodeTag,
+          .shadowNodeFamily = shadowNode->getFamilyShared()});
+}
+
 void AnimatedModule::disconnectAnimatedNodeFromView(
     jsi::Runtime& /*rt*/,
     Tag nodeTag,
@@ -282,6 +295,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);