react-native-tvos 0.83.1-0 → 0.84.0-0rc0

package/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.h

@@ -0,0 +1,246 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/components/view/BaseViewProps.h>
+#include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/uimanager/UIManager.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+#include "AnimatedProps.h"
+
+namespace facebook::react {
+
+struct PropsSnapshot {
+  BaseViewProps props;
+  std::unordered_set<PropName> propNames;
+  std::unique_ptr<folly::dynamic> rawProps;
+};
+
+struct SurfaceContext {
+  std::unordered_map<Tag, std::unique_ptr<PropsSnapshot>> pendingMap, map;
+  std::unordered_set<const ShadowNodeFamily *> pendingFamilies, families;
+};
+
+struct SurfaceUpdates {
+  std::unordered_set<const ShadowNodeFamily *> families;
+  std::unordered_map<Tag, AnimatedProps> propsMap;
+  bool hasLayoutUpdates{false};
+};
+
+using SnapshotMap = std::unordered_map<Tag, std::unique_ptr<PropsSnapshot>>;
+
+class AnimatedPropsRegistry {
+ public:
+  void update(const std::unordered_map<SurfaceId, SurfaceUpdates> &surfaceUpdates);
+  void clear(SurfaceId surfaceId);
+  std::pair<std::unordered_set<const ShadowNodeFamily *> &, SnapshotMap &> getMap(SurfaceId surfaceId);
+
+ private:
+  std::unordered_map<SurfaceId, SurfaceContext> surfaceContexts_;
+  std::mutex mutex_;
+};
+
+inline void updateProp(const PropName propName, BaseViewProps &viewProps, const PropsSnapshot &snapshot)
+{
+  switch (propName) {
+    case OPACITY:
+      viewProps.opacity = snapshot.props.opacity;
+      break;
+
+    case WIDTH:
+      viewProps.yogaStyle.setDimension(
+          yoga::Dimension::Width, snapshot.props.yogaStyle.dimension(yoga::Dimension::Width));
+      break;
+
+    case HEIGHT: {
+      auto d = snapshot.props.yogaStyle.dimension(yoga::Dimension::Height);
+      viewProps.yogaStyle.setDimension(yoga::Dimension::Height, d);
+      break;
+    }
+
+    case TRANSFORM:
+      viewProps.transform = snapshot.props.transform;
+      break;
+
+    case BORDER_RADII:
+      viewProps.borderRadii = snapshot.props.borderRadii;
+      break;
+
+    case FLEX:
+      viewProps.yogaStyle.setFlex(snapshot.props.yogaStyle.flex());
+      break;
+
+    case BACKGROUND_COLOR:
+      viewProps.backgroundColor = snapshot.props.backgroundColor;
+      break;
+
+    case SHADOW_COLOR:
+      viewProps.shadowColor = snapshot.props.shadowColor;
+      break;
+
+    case SHADOW_OFFSET:
+      viewProps.shadowOffset = snapshot.props.shadowOffset;
+      break;
+
+    case SHADOW_OPACITY:
+      viewProps.shadowOpacity = snapshot.props.shadowOpacity;
+      break;
+
+    case SHADOW_RADIUS:
+      viewProps.shadowRadius = snapshot.props.shadowRadius;
+      break;
+
+    case MARGIN:
+      viewProps.yogaStyle.setMargin(yoga::Edge::Left, snapshot.props.yogaStyle.margin(yoga::Edge::Left));
+      viewProps.yogaStyle.setMargin(yoga::Edge::Right, snapshot.props.yogaStyle.margin(yoga::Edge::Right));
+      viewProps.yogaStyle.setMargin(yoga::Edge::Top, snapshot.props.yogaStyle.margin(yoga::Edge::Top));
+      viewProps.yogaStyle.setMargin(yoga::Edge::Bottom, snapshot.props.yogaStyle.margin(yoga::Edge::Bottom));
+      viewProps.yogaStyle.setMargin(yoga::Edge::Start, snapshot.props.yogaStyle.margin(yoga::Edge::Start));
+      viewProps.yogaStyle.setMargin(yoga::Edge::End, snapshot.props.yogaStyle.margin(yoga::Edge::End));
+      viewProps.yogaStyle.setMargin(yoga::Edge::Horizontal, snapshot.props.yogaStyle.margin(yoga::Edge::Horizontal));
+      viewProps.yogaStyle.setMargin(yoga::Edge::Vertical, snapshot.props.yogaStyle.margin(yoga::Edge::Vertical));
+      break;
+
+    case PADDING:
+      viewProps.yogaStyle.setPadding(yoga::Edge::Left, snapshot.props.yogaStyle.padding(yoga::Edge::Left));
+      viewProps.yogaStyle.setPadding(yoga::Edge::Right, snapshot.props.yogaStyle.padding(yoga::Edge::Right));
+      viewProps.yogaStyle.setPadding(yoga::Edge::Top, snapshot.props.yogaStyle.padding(yoga::Edge::Top));
+      viewProps.yogaStyle.setPadding(yoga::Edge::Bottom, snapshot.props.yogaStyle.padding(yoga::Edge::Bottom));
+      viewProps.yogaStyle.setPadding(yoga::Edge::Start, snapshot.props.yogaStyle.padding(yoga::Edge::Start));
+      viewProps.yogaStyle.setPadding(yoga::Edge::End, snapshot.props.yogaStyle.padding(yoga::Edge::End));
+      viewProps.yogaStyle.setPadding(yoga::Edge::Horizontal, snapshot.props.yogaStyle.padding(yoga::Edge::Horizontal));
+      viewProps.yogaStyle.setPadding(yoga::Edge::Vertical, snapshot.props.yogaStyle.padding(yoga::Edge::Vertical));
+      break;
+
+    case POSITION:
+      viewProps.yogaStyle.setPosition(yoga::Edge::Left, snapshot.props.yogaStyle.position(yoga::Edge::Left));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Right, snapshot.props.yogaStyle.position(yoga::Edge::Right));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Top, snapshot.props.yogaStyle.position(yoga::Edge::Top));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Bottom, snapshot.props.yogaStyle.position(yoga::Edge::Bottom));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Start, snapshot.props.yogaStyle.position(yoga::Edge::Start));
+      viewProps.yogaStyle.setPosition(yoga::Edge::End, snapshot.props.yogaStyle.position(yoga::Edge::End));
+      viewProps.yogaStyle.setPosition(
+          yoga::Edge::Horizontal, snapshot.props.yogaStyle.position(yoga::Edge::Horizontal));
+      viewProps.yogaStyle.setPosition(yoga::Edge::Vertical, snapshot.props.yogaStyle.position(yoga::Edge::Vertical));
+      break;
+
+    case BORDER_WIDTH:
+      viewProps.yogaStyle.setBorder(yoga::Edge::Left, snapshot.props.yogaStyle.border(yoga::Edge::Left));
+      viewProps.yogaStyle.setBorder(yoga::Edge::Right, snapshot.props.yogaStyle.border(yoga::Edge::Right));
+      viewProps.yogaStyle.setBorder(yoga::Edge::Top, snapshot.props.yogaStyle.border(yoga::Edge::Top));
+      viewProps.yogaStyle.setBorder(yoga::Edge::Bottom, snapshot.props.yogaStyle.border(yoga::Edge::Bottom));
+      viewProps.yogaStyle.setBorder(yoga::Edge::Start, snapshot.props.yogaStyle.border(yoga::Edge::Start));
+      viewProps.yogaStyle.setBorder(yoga::Edge::End, snapshot.props.yogaStyle.border(yoga::Edge::End));
+      viewProps.yogaStyle.setBorder(yoga::Edge::Horizontal, snapshot.props.yogaStyle.border(yoga::Edge::Horizontal));
+      viewProps.yogaStyle.setBorder(yoga::Edge::Vertical, snapshot.props.yogaStyle.border(yoga::Edge::Vertical));
+      break;
+
+    case BORDER_COLOR:
+      viewProps.borderColors = snapshot.props.borderColors;
+      break;
+
+    case FILTER:
+      viewProps.filter = snapshot.props.filter;
+      break;
+
+    case OUTLINE_COLOR:
+      viewProps.outlineColor = snapshot.props.outlineColor;
+      break;
+
+    case OUTLINE_OFFSET:
+      viewProps.outlineOffset = snapshot.props.outlineOffset;
+      break;
+
+    case OUTLINE_STYLE:
+      viewProps.outlineStyle = snapshot.props.outlineStyle;
+      break;
+
+    case OUTLINE_WIDTH:
+      viewProps.outlineWidth = snapshot.props.outlineWidth;
+      break;
+
+    case ALIGN_CONTENT:
+      viewProps.yogaStyle.setAlignContent(snapshot.props.yogaStyle.alignContent());
+      break;
+
+    case ALIGN_ITEMS:
+      viewProps.yogaStyle.setAlignItems(snapshot.props.yogaStyle.alignItems());
+      break;
+
+    case ALIGN_SELF:
+      viewProps.yogaStyle.setAlignSelf(snapshot.props.yogaStyle.alignSelf());
+      break;
+
+    case ASPECT_RATIO:
+      viewProps.yogaStyle.setAspectRatio(snapshot.props.yogaStyle.aspectRatio());
+      break;
+
+    case BOX_SIZING:
+      viewProps.yogaStyle.setBoxSizing(snapshot.props.yogaStyle.boxSizing());
+      break;
+
+    case DISPLAY:
+      viewProps.yogaStyle.setDisplay(snapshot.props.yogaStyle.display());
+      break;
+
+    case FLEX_BASIS:
+      viewProps.yogaStyle.setFlexBasis(snapshot.props.yogaStyle.flexBasis());
+      break;
+
+    case FLEX_DIRECTION:
+      viewProps.yogaStyle.setFlexDirection(snapshot.props.yogaStyle.flexDirection());
+      break;
+
+    case ROW_GAP:
+      viewProps.yogaStyle.setGap(yoga::Gutter::Row, snapshot.props.yogaStyle.gap(yoga::Gutter::Row));
+      break;
+
+    case COLUMN_GAP:
+      viewProps.yogaStyle.setGap(yoga::Gutter::Column, snapshot.props.yogaStyle.gap(yoga::Gutter::Column));
+      break;
+
+    case FLEX_GROW:
+      viewProps.yogaStyle.setFlexGrow(snapshot.props.yogaStyle.flexGrow());
+      break;
+
+    case FLEX_SHRINK:
+      viewProps.yogaStyle.setFlexShrink(snapshot.props.yogaStyle.flexShrink());
+      break;
+
+    case FLEX_WRAP:
+      viewProps.yogaStyle.setFlexWrap(snapshot.props.yogaStyle.flexWrap());
+      break;
+
+    case JUSTIFY_CONTENT:
+      viewProps.yogaStyle.setJustifyContent(snapshot.props.yogaStyle.justifyContent());
+      break;
+
+    case MAX_HEIGHT:
+      viewProps.yogaStyle.setMaxDimension(
+          yoga::Dimension::Height, snapshot.props.yogaStyle.maxDimension(yoga::Dimension::Height));
+      break;
+
+    case MAX_WIDTH:
+      viewProps.yogaStyle.setMaxDimension(
+          yoga::Dimension::Width, snapshot.props.yogaStyle.maxDimension(yoga::Dimension::Width));
+      break;
+
+    case MIN_HEIGHT:
+      viewProps.yogaStyle.setMinDimension(
+          yoga::Dimension::Height, snapshot.props.yogaStyle.minDimension(yoga::Dimension::Height));
+      break;
+
+    case MIN_WIDTH:
+      viewProps.yogaStyle.setMinDimension(
+          yoga::Dimension::Width, snapshot.props.yogaStyle.minDimension(yoga::Dimension::Width));
+      break;
+  }
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/animationbackend/AnimatedPropsSerializer.h

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <folly/dynamic.h>
+#include "AnimatedProps.h"
+
+namespace facebook::react::animationbackend {
+
+folly::dynamic packAnimatedProps(const AnimatedProps &animatedProps);
+
+} // namespace facebook::react::animationbackend

package/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp

@@ -6,10 +6,39 @@
  */
 
 #include "AnimationBackend.h"
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/animationbackend/AnimatedPropsSerializer.h>
+#include <react/renderer/graphics/Color.h>
 #include <chrono>
+#include <set>
+#include "AnimatedPropsRegistry.h"
 
 namespace facebook::react {
 
+static const auto layoutProps = std::set<PropName>{
+    PropName::WIDTH,        PropName::HEIGHT,        PropName::FLEX,
+    PropName::MARGIN,       PropName::PADDING,       PropName::POSITION,
+    PropName::BORDER_WIDTH, PropName::ALIGN_CONTENT, PropName::ALIGN_ITEMS,
+    PropName::ALIGN_SELF,   PropName::ASPECT_RATIO,  PropName::BOX_SIZING,
+    PropName::DISPLAY,      PropName::FLEX_BASIS,    PropName::FLEX_DIRECTION,
+    PropName::ROW_GAP,      PropName::COLUMN_GAP,    PropName::FLEX_GROW,
+    PropName::FLEX_SHRINK,  PropName::FLEX_WRAP,     PropName::JUSTIFY_CONTENT,
+    PropName::MAX_HEIGHT,   PropName::MAX_WIDTH,     PropName::MIN_HEIGHT,
+    PropName::MIN_WIDTH,
+};
+
+UIManagerNativeAnimatedDelegateBackendImpl::
+    UIManagerNativeAnimatedDelegateBackendImpl(
+        std::weak_ptr<UIManagerAnimationBackend> animationBackend)
+    : animationBackend_(std::move(animationBackend)) {}
+
+void UIManagerNativeAnimatedDelegateBackendImpl::runAnimationFrame() {
+  if (auto animationBackendStrong = animationBackend_.lock()) {
+    animationBackendStrong->onAnimationFrame(
+        std::chrono::steady_clock::now().time_since_epoch().count() / 1000);
+  }
+}
+
 static inline Props::Shared cloneProps(
     AnimatedProps& animatedProps,
     const ShadowNode& shadowNode) {
@@ -29,50 +58,11 @@ static inline Props::Shared cloneProps(
   auto viewProps = std::const_pointer_cast<BaseViewProps>(
       std::static_pointer_cast<const BaseViewProps>(newProps));
   for (auto& animatedProp : animatedProps.props) {
-    switch (animatedProp->propName) {
-      case OPACITY:
-        viewProps->opacity = get<Float>(animatedProp);
-        break;
-
-      case WIDTH:
-        viewProps->yogaStyle.setDimension(
-            yoga::Dimension::Width, get<yoga::Style::SizeLength>(animatedProp));
-        break;
-
-      case HEIGHT:
-        viewProps->yogaStyle.setDimension(
-            yoga::Dimension::Height,
-            get<yoga::Style::SizeLength>(animatedProp));
-        break;
-
-      case BORDER_RADII:
-        viewProps->borderRadii = get<CascadedBorderRadii>(animatedProp);
-        break;
-
-      case FLEX:
-        viewProps->yogaStyle.setFlex(get<yoga::FloatOptional>(animatedProp));
-        break;
-
-      case TRANSFORM:
-        viewProps->transform = get<Transform>(animatedProp);
-        break;
-    }
+    cloneProp(*viewProps, *animatedProp);
   }
   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) {
-      return true;
-    }
-  }
-  return false;
-}
-
 AnimationBackend::AnimationBackend(
     StartOnRenderCallback&& startOnRenderCallback,
     StopOnRenderCallback&& stopOnRenderCallback,
@@ -83,62 +73,85 @@ AnimationBackend::AnimationBackend(
       stopOnRenderCallback_(std::move(stopOnRenderCallback)),
       directManipulationCallback_(std::move(directManipulationCallback)),
       fabricCommitCallback_(std::move(fabricCommitCallback)),
-      uiManager_(uiManager) {}
+      animatedPropsRegistry_(std::make_shared<AnimatedPropsRegistry>()),
+      uiManager_(uiManager),
+      commitHook_(uiManager, animatedPropsRegistry_) {}
 
 void AnimationBackend::onAnimationFrame(double timestamp) {
-  std::unordered_map<Tag, AnimatedProps> updates;
-  std::unordered_set<const ShadowNodeFamily*> families;
-  bool hasAnyLayoutUpdates = false;
+  std::unordered_map<SurfaceId, SurfaceUpdates> surfaceUpdates;
+
   for (auto& callback : callbacks) {
     auto muatations = callback(static_cast<float>(timestamp));
-    for (auto& mutation : muatations) {
-      hasAnyLayoutUpdates |= mutationHasLayoutUpdates(mutation);
-      families.insert(mutation.family);
+    for (auto& mutation : muatations.batch) {
+      const auto family = mutation.family;
+      react_native_assert(family != nullptr);
+
+      auto& [families, updates, hasLayoutUpdates] =
+          surfaceUpdates[family->getSurfaceId()];
+      hasLayoutUpdates |= mutation.hasLayoutUpdates;
+      families.insert(family.get());
       updates[mutation.tag] = std::move(mutation.props);
     }
   }
 
-  if (hasAnyLayoutUpdates) {
-    commitUpdatesWithFamilies(families, updates);
-  } else {
-    synchronouslyUpdateProps(updates);
+  animatedPropsRegistry_->update(surfaceUpdates);
+
+  for (auto& [surfaceId, updates] : surfaceUpdates) {
+    if (updates.hasLayoutUpdates) {
+      commitUpdates(surfaceId, updates);
+    } else {
+      synchronouslyUpdateProps(updates.propsMap);
+    }
   }
 }
 
 void AnimationBackend::start(const Callback& callback, bool isAsync) {
   callbacks.push_back(callback);
-  // TODO: startOnRenderCallback_ should provide the timestamp from the platform
-  startOnRenderCallback_(
-      [this]() {
-        onAnimationFrame(
-            std::chrono::steady_clock::now().time_since_epoch().count() / 1000);
-      },
-      isAsync);
+  // TODO: startOnRenderCallback_ should provide the timestamp from the
+  // platform
+  if (startOnRenderCallback_) {
+    startOnRenderCallback_(
+        [this]() {
+          onAnimationFrame(
+              std::chrono::steady_clock::now().time_since_epoch().count() /
+              1000);
+        },
+        isAsync);
+  }
 }
 void AnimationBackend::stop(bool isAsync) {
-  stopOnRenderCallback_(isAsync);
+  if (stopOnRenderCallback_) {
+    stopOnRenderCallback_(isAsync);
+  }
   callbacks.clear();
 }
 
-void AnimationBackend::commitUpdatesWithFamilies(
-    const std::unordered_set<const ShadowNodeFamily*>& families,
-    std::unordered_map<Tag, AnimatedProps>& updates) {
-  uiManager_->getShadowTreeRegistry().enumerate(
-      [families, &updates](const ShadowTree& shadowTree, bool& /*stop*/) {
+void AnimationBackend::commitUpdates(
+    SurfaceId surfaceId,
+    SurfaceUpdates& surfaceUpdates) {
+  auto& surfaceFamilies = surfaceUpdates.families;
+  auto& updates = surfaceUpdates.propsMap;
+  uiManager_->getShadowTreeRegistry().visit(
+      surfaceId, [&surfaceFamilies, &updates](const ShadowTree& shadowTree) {
         shadowTree.commit(
-            [families, &updates](const RootShadowNode& oldRootShadowNode) {
+            [&surfaceFamilies,
+             &updates](const RootShadowNode& oldRootShadowNode) {
               return std::static_pointer_cast<RootShadowNode>(
                   oldRootShadowNode.cloneMultiple(
-                      families,
-                      [families, &updates](
+                      surfaceFamilies,
+                      [&surfaceFamilies, &updates](
                           const ShadowNode& shadowNode,
                           const ShadowNodeFragment& fragment) {
-                        auto& animatedProps = updates.at(shadowNode.getTag());
-                        auto newProps = cloneProps(animatedProps, shadowNode);
+                        auto newProps = ShadowNodeFragment::propsPlaceholder();
+                        if (surfaceFamilies.contains(&shadowNode.getFamily())) {
+                          auto& animatedProps = updates.at(shadowNode.getTag());
+                          newProps = cloneProps(animatedProps, shadowNode);
+                        }
                         return shadowNode.clone(
-                            {newProps,
-                             fragment.children,
-                             shadowNode.getState()});
+                            {.props = newProps,
+                             .children = fragment.children,
+                             .state = shadowNode.getState(),
+                             .runtimeShadowNodeReference = false});
                       }));
             },
             {.mountSynchronously = true});
@@ -148,29 +161,15 @@ void AnimationBackend::commitUpdatesWithFamilies(
 void AnimationBackend::synchronouslyUpdateProps(
     const std::unordered_map<Tag, AnimatedProps>& updates) {
   for (auto& [tag, animatedProps] : updates) {
-    auto dyn = animatedProps.rawProps ? animatedProps.rawProps->toDynamic()
-                                      : folly::dynamic::object();
-    for (auto& animatedProp : animatedProps.props) {
-      // TODO: We shouldn't repack it into dynamic, but for that a rewrite of
-      // directManipulationCallback_ is needed
-      switch (animatedProp->propName) {
-        case OPACITY:
-          dyn.insert("opacity", get<Float>(animatedProp));
-          break;
-
-        case BORDER_RADII:
-        case TRANSFORM:
-          // TODO: handle other things than opacity
-          break;
-
-        case WIDTH:
-        case HEIGHT:
-        case FLEX:
-          throw "Tried to synchronously update layout props";
-      }
-    }
-    directManipulationCallback_(tag, dyn);
+    // 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));
   }
 }
 
+void AnimationBackend::clearRegistry(SurfaceId surfaceId) {
+  animatedPropsRegistry_->clear(surfaceId);
+}
+
 } // namespace facebook::react

package/ReactCommon/react/renderer/animationbackend/AnimationBackend.h

@@ -15,16 +15,33 @@
 #include <vector>
 #include "AnimatedProps.h"
 #include "AnimatedPropsBuilder.h"
+#include "AnimatedPropsRegistry.h"
+#include "AnimationBackendCommitHook.h"
 
 namespace facebook::react {
 
+class AnimationBackend;
+
+class UIManagerNativeAnimatedDelegateBackendImpl : public UIManagerNativeAnimatedDelegate {
+ public:
+  explicit UIManagerNativeAnimatedDelegateBackendImpl(std::weak_ptr<UIManagerAnimationBackend> animationBackend);
+
+  void runAnimationFrame() override;
+
+ private:
+  std::weak_ptr<UIManagerAnimationBackend> animationBackend_;
+};
+
 struct AnimationMutation {
   Tag tag;
-  const ShadowNodeFamily *family;
+  std::shared_ptr<const ShadowNodeFamily> family;
   AnimatedProps props;
+  bool hasLayoutUpdates{false};
 };
 
-using AnimationMutations = std::vector<AnimationMutation>;
+struct AnimationMutations {
+  std::vector<AnimationMutation> batch;
+};
 
 class AnimationBackend : public UIManagerAnimationBackend {
  public:
@@ -39,7 +56,9 @@ class AnimationBackend : public UIManagerAnimationBackend {
   const StopOnRenderCallback stopOnRenderCallback_;
   const DirectManipulationCallback directManipulationCallback_;
   const FabricCommitCallback fabricCommitCallback_;
+  std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
   UIManager *uiManager_;
+  AnimationBackendCommitHook commitHook_;
 
   AnimationBackend(
       StartOnRenderCallback &&startOnRenderCallback,
@@ -47,10 +66,9 @@ class AnimationBackend : public UIManagerAnimationBackend {
       DirectManipulationCallback &&directManipulationCallback,
       FabricCommitCallback &&fabricCommitCallback,
       UIManager *uiManager);
-  void commitUpdatesWithFamilies(
-      const std::unordered_set<const ShadowNodeFamily *> &families,
-      std::unordered_map<Tag, AnimatedProps> &updates);
+  void commitUpdates(SurfaceId surfaceId, SurfaceUpdates &surfaceUpdates);
   void synchronouslyUpdateProps(const std::unordered_map<Tag, AnimatedProps> &updates);
+  void clearRegistry(SurfaceId surfaceId) override;
 
   void onAnimationFrame(double timestamp) override;
   void start(const Callback &callback, bool isAsync);

package/ReactCommon/react/renderer/animationbackend/AnimationBackendCommitHook.cpp

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/renderer/animationbackend/AnimationBackendCommitHook.h>
+
+namespace facebook::react {
+
+AnimationBackendCommitHook::AnimationBackendCommitHook(
+    UIManager* uiManager,
+    std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry)
+    : animatedPropsRegistry_(std::move(animatedPropsRegistry)) {
+  uiManager->registerCommitHook(*this);
+}
+
+RootShadowNode::Unshared AnimationBackendCommitHook::shadowTreeWillCommit(
+    const ShadowTree& shadowTree,
+    const RootShadowNode::Shared& oldRootShadowNode,
+    const RootShadowNode::Unshared& newRootShadowNode,
+    const ShadowTreeCommitOptions& commitOptions) noexcept {
+  if (commitOptions.source != ShadowTreeCommitSource::React) {
+    return newRootShadowNode;
+  }
+
+  const auto& res = animatedPropsRegistry_->getMap(shadowTree.getSurfaceId());
+  auto& surfaceFamilies = res.first;
+  auto& updates = res.second;
+
+  if (surfaceFamilies.empty()) {
+    return newRootShadowNode;
+  }
+  return std::static_pointer_cast<RootShadowNode>(
+      newRootShadowNode->cloneMultiple(
+          surfaceFamilies,
+          [&surfaceFamilies, &updates](
+              const ShadowNode& shadowNode,
+              const ShadowNodeFragment& fragment) {
+            auto newProps = ShadowNodeFragment::propsPlaceholder();
+            std::shared_ptr<BaseViewProps> viewProps = nullptr;
+            if (surfaceFamilies.contains(&shadowNode.getFamily()) &&
+                updates.contains(shadowNode.getTag())) {
+              auto& snapshot = updates.at(shadowNode.getTag());
+              if (!snapshot->propNames.empty() || snapshot->rawProps) {
+                PropsParserContext propsParserContext{
+                    shadowNode.getSurfaceId(),
+                    *shadowNode.getContextContainer()};
+                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));
+              }
+
+              for (const auto& propName : snapshot->propNames) {
+                updateProp(propName, *viewProps, *snapshot);
+              }
+            }
+            return shadowNode.clone(
+                {.props = newProps,
+                 .children = fragment.children,
+                 .state = shadowNode.getState(),
+                 .runtimeShadowNodeReference = true});
+          }));
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/animationbackend/AnimationBackendCommitHook.h

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/uimanager/UIManager.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+#include "AnimatedPropsRegistry.h"
+
+namespace facebook::react {
+
+class AnimationBackendCommitHook : public UIManagerCommitHook {
+  std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
+
+ public:
+  AnimationBackendCommitHook(UIManager *uiManager, std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry);
+  RootShadowNode::Unshared shadowTreeWillCommit(
+      const ShadowTree &shadowTree,
+      const RootShadowNode::Shared &oldRootShadowNode,
+      const RootShadowNode::Unshared &newRootShadowNode,
+      const ShadowTreeCommitOptions &commitOptions) noexcept override;
+  void commitHookWasRegistered(const UIManager &uiManager) noexcept override {}
+  void commitHookWasUnregistered(const UIManager &uiManager) noexcept override {}
+};
+
+} // namespace facebook::react