Add test for width, height and opacity

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

@@ -298,3 +298,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

@@ -1008,9 +1008,21 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
       }
 
       for (auto& [tag, props] : updateViewPropsDirect_) {
-        propsBuilder.storeDynamic(props);
-        mutations.push_back(
-            AnimationMutation{tag, nullptr, propsBuilder.get()});
+        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;
       }
       {
@@ -1020,22 +1032,12 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
           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.hasLayoutUpdates = true;
+            mutations.batch.push_back(
                 AnimationMutation{
                     .tag = tag,
                     .family = family,
@@ -1075,13 +1077,21 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
       isEventAnimationInProgress_ = false;
 
       for (auto& [tag, props] : updateViewPropsDirect_) {
-        propsBuilder.storeDynamic(props);
-        mutations.push_back(
-            AnimationMutation{
-                .tag = tag,
-                .family = nullptr,
-                .props = propsBuilder.get(),
-            });
+        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(),
+              });
+        }
       }
       {
         std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
@@ -1090,9 +1100,12 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
           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.hasLayoutUpdates = true;
+            mutations.batch.push_back(
                 AnimationMutation{
                     .tag = tag,
                     .family = family,

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.cpp

@@ -35,6 +35,18 @@ void AnimatedPropsRegistry::update(
       auto& snapshot = it->second;
       auto& viewProps = snapshot->props;
 
+      if (animatedProps.rawProps) {
+        const auto& newRawProps = *animatedProps.rawProps;
+        auto& currentRawProps = snapshot->rawProps;
+
+        if (currentRawProps) {
+          auto newRawPropsDynamic = newRawProps.toDynamic();
+          currentRawProps->merge_patch(newRawPropsDynamic);
+        } else {
+          currentRawProps =
+              std::make_unique<folly::dynamic>(newRawProps.toDynamic());
+        }
+      }
       for (const auto& animatedProp : animatedProps.props) {
         snapshot->propNames.insert(animatedProp->propName);
         cloneProp(viewProps, *animatedProp);

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.h

@@ -19,6 +19,7 @@ namespace facebook::react {
 struct PropsSnapshot {
   BaseViewProps props;
   std::unordered_set<PropName> propNames;
+  std::unique_ptr<folly::dynamic> rawProps;
 };
 
 struct SurfaceContext {

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp

@@ -6,6 +6,7 @@
  */
 
 #include "AnimationBackend.h"
+#include <react/debug/react_native_assert.h>
 #include <react/renderer/animationbackend/AnimatedPropsSerializer.h>
 #include <react/renderer/graphics/Color.h>
 #include <chrono>
@@ -49,20 +50,6 @@ static inline Props::Shared cloneProps(
   return newProps;
 }
 
-static inline bool mutationHasLayoutUpdates(
-    facebook::react::AnimationMutation& mutation) {
-  for (auto& animatedProp : mutation.props.props) {
-    // TODO: there should also be a check for the dynamic part
-    if (animatedProp->propName == WIDTH || animatedProp->propName == HEIGHT ||
-        animatedProp->propName == FLEX || animatedProp->propName == MARGIN ||
-        animatedProp->propName == PADDING ||
-        animatedProp->propName == POSITION) {
-      return true;
-    }
-  }
-  return false;
-}
-
 AnimationBackend::AnimationBackend(
     StartOnRenderCallback&& startOnRenderCallback,
     StopOnRenderCallback&& stopOnRenderCallback,
@@ -81,27 +68,31 @@ void AnimationBackend::onAnimationFrame(double timestamp) {
   std::unordered_map<Tag, AnimatedProps> synchronousUpdates;
   std::unordered_map<SurfaceId, SurfaceUpdates> surfaceUpdates;
 
-  bool hasAnyLayoutUpdates = false;
   for (auto& callback : callbacks) {
     auto muatations = callback(static_cast<float>(timestamp));
-    for (auto& mutation : muatations) {
-      hasAnyLayoutUpdates |= mutationHasLayoutUpdates(mutation);
-      const auto family = mutation.family;
-      if (family != nullptr) {
+    if (muatations.hasLayoutUpdates) {
+      for (auto& mutation : muatations.batch) {
+        const auto family = mutation.family;
+        react_native_assert(family != nullptr);
+
         auto& [families, updates] = surfaceUpdates[family->getSurfaceId()];
         families.insert(family.get());
         updates[mutation.tag] = std::move(mutation.props);
-      } else {
+      }
+    } else {
+      for (auto& mutation : muatations.batch) {
         synchronousUpdates[mutation.tag] = std::move(mutation.props);
       }
     }
   }
 
   animatedPropsRegistry_->update(surfaceUpdates);
 
-  if (hasAnyLayoutUpdates) {
+  if (!surfaceUpdates.empty()) {
     commitUpdates(surfaceUpdates);
-  } else {
+  }
+
+  if (!synchronousUpdates.empty()) {
     synchronouslyUpdateProps(synchronousUpdates);
   }
 }
@@ -167,8 +158,8 @@ void AnimationBackend::commitUpdates(
 void AnimationBackend::synchronouslyUpdateProps(
     const std::unordered_map<Tag, AnimatedProps>& updates) {
   for (auto& [tag, animatedProps] : updates) {
-    // TODO: We shouldn't repack it into dynamic, but for that a rewrite of
-    // directManipulationCallback_ is needed
+    // TODO: We shouldn't repack it into dynamic, but for that a rewrite
+    // of directManipulationCallback_ is needed
     auto dyn = animationbackend::packAnimatedProps(animatedProps);
     directManipulationCallback_(tag, std::move(dyn));
   }

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.h

@@ -38,7 +38,10 @@ struct AnimationMutation {
   AnimatedProps props;
 };
 
-using AnimationMutations = std::vector<AnimationMutation>;
+struct AnimationMutations {
+  std::vector<AnimationMutation> batch;
+  bool hasLayoutUpdates{false};
+};
 
 class AnimationBackend : public UIManagerAnimationBackend {
  public:

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackendCommitHook.cpp

@@ -43,13 +43,19 @@ RootShadowNode::Unshared AnimationBackendCommitHook::shadowTreeWillCommit(
             if (surfaceFamilies.contains(&shadowNode.getFamily()) &&
                 updates.contains(shadowNode.getTag())) {
               auto& snapshot = updates.at(shadowNode.getTag());
-              if (!snapshot->propNames.empty()) {
+              if (!snapshot->propNames.empty() || snapshot->rawProps) {
                 PropsParserContext propsParserContext{
                     shadowNode.getSurfaceId(),
                     *shadowNode.getContextContainer()};
-
-                newProps = shadowNode.getComponentDescriptor().cloneProps(
-                    propsParserContext, shadowNode.getProps(), {});
+                if (snapshot->rawProps) {
+                  newProps = shadowNode.getComponentDescriptor().cloneProps(
+                      propsParserContext,
+                      shadowNode.getProps(),
+                      RawProps(*snapshot->rawProps));
+                } else {
+                  newProps = shadowNode.getComponentDescriptor().cloneProps(
+                      propsParserContext, shadowNode.getProps(), {});
+                }
                 viewProps = std::const_pointer_cast<BaseViewProps>(
                     std::static_pointer_cast<const BaseViewProps>(newProps));
               }