Add synchronous updates to the AnimatedPropsRegistry

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

@@ -191,15 +191,126 @@ test('animate layout props and rerender', () => {
     _setWidth(200);
   });
 
+  // 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" />,
+  );
+
+  Fantom.unstable_produceFramesForDuration(500);
+
   // TODO: this shouldn't be neccessary since animation should be stopped after duration
   Fantom.runTask(() => {
     _heightAnimation?.stop();
   });
 
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="100.000000" width="200.000000" />,
+  );
+
+  Fantom.runTask(() => {
+    _setWidth(300);
+  });
+
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="100.000000" width="300.000000" />,
+  );
+});
+
+test('animate non-layout props and rerender', () => {
+  const viewRef = createRef<HostInstance>();
+
+  let _animatedOpacity;
+  let _opacityAnimation;
+  let _setWidth;
+
+  function MyApp() {
+    const animatedOpacity = useAnimatedValue(0);
+    const [width, setWidth] = useState(100);
+    _animatedOpacity = animatedOpacity;
+    _setWidth = setWidth;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: width,
+            opacity: animatedOpacity,
+          },
+        ]}
+      />
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+
+  Fantom.runTask(() => {
+    _opacityAnimation = Animated.timing(_animatedOpacity, {
+      toValue: 0.5,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(500);
+
+  // TODO: rendered output should be <rn-view opacity="0,5" width="100.000000" /> at this point, but synchronous updates are not captured by fantom
+  expect(root.getRenderedOutput({props: ['width']}).toJSX()).toEqual(
+    <rn-view width="100.000000" />,
+  );
+
+  expect(
+    Fantom.unstable_getDirectManipulationProps(viewElement).opacity,
+  ).toBeCloseTo(0.25, 0.001);
+
+  // Re-render
+  Fantom.runTask(() => {
+    _setWidth(150);
+  });
+
+  expect(root.getRenderedOutput({props: ['opacity', 'width']}).toJSX()).toEqual(
+    <rn-view opacity="0.25" width="150.000000" />,
+  );
+
+  Fantom.runTask(() => {
+    _setWidth(200);
+  });
+
   // 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" />,
+  expect(root.getRenderedOutput({props: ['opacity', 'width']}).toJSX()).toEqual(
+    <rn-view opacity="0.25" width="200.000000" />,
+  );
+
+  Fantom.unstable_produceFramesForDuration(500);
+
+  // TODO: this shouldn't be neccessary since animation should be stopped after duration
+  Fantom.runTask(() => {
+    _opacityAnimation?.stop();
+  });
+
+  // TODO: T246961305 rendered output should be <rn-view opacity="1" /> at this point
+  expect(root.getRenderedOutput({props: ['width']}).toJSX()).toEqual(
+    <rn-view width="200.000000" />,
+  );
+
+  expect(Fantom.unstable_getDirectManipulationProps(viewElement).opacity).toBe(
+    0.5,
+  );
+
+  // Re-render
+  Fantom.runTask(() => {
+    _setWidth(300);
+  });
+
+  expect(root.getRenderedOutput({props: ['opacity', 'width']}).toJSX()).toEqual(
+    <rn-view opacity="0.5" width="300.000000" />,
   );
 });
 
@@ -298,3 +409,72 @@ test('animate layout props and rerender in many components', () => {
     </rn-view>,
   );
 });
+
+test('animate width, height and opacity at once', () => {
+  const viewRef = createRef<HostInstance>();
+  allowStyleProp('width');
+  allowStyleProp('height');
+
+  let _animatedWidth;
+  let _animatedHeight;
+  let _animatedOpacity;
+  let _parallelAnimation;
+
+  function MyApp() {
+    const animatedWidth = useAnimatedValue(100);
+    const animatedHeight = useAnimatedValue(100);
+    const animatedOpacity = useAnimatedValue(1);
+    _animatedWidth = animatedWidth;
+    _animatedHeight = animatedHeight;
+    _animatedOpacity = animatedOpacity;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: animatedWidth,
+            height: animatedHeight,
+            opacity: animatedOpacity,
+          },
+        ]}
+      />
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  Fantom.runTask(() => {
+    _parallelAnimation = Animated.parallel([
+      Animated.timing(_animatedWidth, {
+        toValue: 200,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+      Animated.timing(_animatedHeight, {
+        toValue: 200,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+      Animated.timing(_animatedOpacity, {
+        toValue: 0.5,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(100);
+
+  // TODO: this shouldn't be neccessary since animation should be stopped after duration
+  Fantom.runTask(() => {
+    _parallelAnimation?.stop();
+  });
+
+  expect(
+    root.getRenderedOutput({props: ['width', 'height', 'opacity']}).toJSX(),
+  ).toEqual(<rn-view height="200.000000" opacity="0.5" width="200.000000" />);
+});

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

@@ -1007,39 +1007,41 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
         }
       }
 
-      for (auto& [tag, props] : updateViewPropsDirect_) {
-        propsBuilder.storeDynamic(props);
-        mutations.push_back(
-            AnimationMutation{tag, nullptr, propsBuilder.get()});
-        containsChange = true;
-      }
       {
         std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
+        for (auto& [tag, props] : updateViewPropsDirect_) {
+          auto familyIt = tagToShadowNodeFamily_.find(tag);
+          if (familyIt == tagToShadowNodeFamily_.end()) {
+            continue;
+          }
+
+          auto weakFamily = familyIt->second;
+          if (auto family = weakFamily.lock()) {
+            propsBuilder.storeDynamic(props);
+            mutations.batch.push_back(
+                AnimationMutation{
+                    .tag = tag,
+                    .family = family,
+                    .props = propsBuilder.get(),
+                });
+          }
+          containsChange = true;
+        }
         for (auto& [tag, props] : updateViewProps_) {
           auto familyIt = tagToShadowNodeFamily_.find(tag);
           if (familyIt == tagToShadowNodeFamily_.end()) {
             continue;
           }
-          if (auto family = familyIt->second.lock()) {
-            // C++ Animated produces props in the form of a folly::dynamic, so
-            // it wouldn't make sense to unpack it here. However, for the
-            // purposes of testing, we want to be able to use the statically
-            // typed AnimationMutation. At a later stage we will instead just
-            // pass the dynamic directly to propsBuilder and the new API could
-            // be used by 3rd party libraries or in the fututre by Animated.
-            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()));
-            }
-            mutations.push_back(
+
+          auto weakFamily = familyIt->second;
+          if (auto family = weakFamily.lock()) {
+            propsBuilder.storeDynamic(props);
+            mutations.batch.push_back(
                 AnimationMutation{
                     .tag = tag,
                     .family = family,
                     .props = propsBuilder.get(),
+                    .hasLayoutUpdates = true,
                 });
           }
           containsChange = true;
@@ -1074,33 +1076,46 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
 
       isEventAnimationInProgress_ = false;
 
-      for (auto& [tag, props] : updateViewPropsDirect_) {
-        propsBuilder.storeDynamic(props);
-        mutations.push_back(
-            AnimationMutation{
-                .tag = tag,
-                .family = nullptr,
-                .props = propsBuilder.get(),
-            });
-      }
       {
         std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
+        for (auto& [tag, props] : updateViewPropsDirect_) {
+          auto familyIt = tagToShadowNodeFamily_.find(tag);
+          if (familyIt == tagToShadowNodeFamily_.end()) {
+            continue;
+          }
+
+          auto weakFamily = familyIt->second;
+          if (auto family = weakFamily.lock()) {
+            propsBuilder.storeDynamic(props);
+            mutations.batch.push_back(
+                AnimationMutation{
+                    .tag = tag,
+                    .family = family,
+                    .props = propsBuilder.get(),
+                });
+          }
+        }
         for (auto& [tag, props] : updateViewProps_) {
           auto familyIt = tagToShadowNodeFamily_.find(tag);
           if (familyIt == tagToShadowNodeFamily_.end()) {
             continue;
           }
-          if (auto family = familyIt->second.lock()) {
+
+          auto weakFamily = familyIt->second;
+          if (auto family = weakFamily.lock()) {
             propsBuilder.storeDynamic(props);
-            mutations.push_back(
+            mutations.batch.push_back(
                 AnimationMutation{
                     .tag = tag,
                     .family = family,
                     .props = propsBuilder.get(),
+                    .hasLayoutUpdates = true,
                 });
           }
         }
       }
+      updateViewProps_.clear();
+      updateViewPropsDirect_.clear();
     }
   } else {
     // There is no active animation. Stop the render callback.

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

@@ -145,28 +145,30 @@ NativeAnimatedNodesManagerProvider::getOrCreate(
 
     uiManager->setNativeAnimatedDelegate(nativeAnimatedDelegate_);
 
-    animatedMountingOverrideDelegate_ =
-        std::make_shared<AnimatedMountingOverrideDelegate>(
-            *nativeAnimatedNodesManager_, *scheduler);
-
-    // Register on existing surfaces
-    uiManager->getShadowTreeRegistry().enumerate(
-        [animatedMountingOverrideDelegate =
-             std::weak_ptr<const AnimatedMountingOverrideDelegate>(
-                 animatedMountingOverrideDelegate_)](
-            const ShadowTree& shadowTree, bool& /*stop*/) {
-          shadowTree.getMountingCoordinator()->setMountingOverrideDelegate(
-              animatedMountingOverrideDelegate);
-        });
-    // Register on surfaces started in the future
-    uiManager->setOnSurfaceStartCallback(
-        [animatedMountingOverrideDelegate =
-             std::weak_ptr<const AnimatedMountingOverrideDelegate>(
-                 animatedMountingOverrideDelegate_)](
-            const ShadowTree& shadowTree) {
-          shadowTree.getMountingCoordinator()->setMountingOverrideDelegate(
-              animatedMountingOverrideDelegate);
-        });
+    if (!ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+      animatedMountingOverrideDelegate_ =
+          std::make_shared<AnimatedMountingOverrideDelegate>(
+              *nativeAnimatedNodesManager_, *scheduler);
+
+      // Register on existing surfaces
+      uiManager->getShadowTreeRegistry().enumerate(
+          [animatedMountingOverrideDelegate =
+               std::weak_ptr<const AnimatedMountingOverrideDelegate>(
+                   animatedMountingOverrideDelegate_)](
+              const ShadowTree& shadowTree, bool& /*stop*/) {
+            shadowTree.getMountingCoordinator()->setMountingOverrideDelegate(
+                animatedMountingOverrideDelegate);
+          });
+      // Register on surfaces started in the future
+      uiManager->setOnSurfaceStartCallback(
+          [animatedMountingOverrideDelegate =
+               std::weak_ptr<const AnimatedMountingOverrideDelegate>(
+                   animatedMountingOverrideDelegate_)](
+              const ShadowTree& shadowTree) {
+            shadowTree.getMountingCoordinator()->setMountingOverrideDelegate(
+                animatedMountingOverrideDelegate);
+          });
+    }
   }
   return nativeAnimatedNodesManager_;
 }