@react-native-ohos/react-native-reanimated 3.18.1-rc.6 → 4.0.0-rc.1

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/svg/values/SVGStrokeDashArray.cpp

@@ -0,0 +1,110 @@
+#include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
+
+#include <string>
+#include <vector>
+
+namespace reanimated::css {
+
+SVGStrokeDashArray::SVGStrokeDashArray() : values() {}
+
+SVGStrokeDashArray::SVGStrokeDashArray(const std::vector<SVGLength> &values) : values(values) {}
+
+SVGStrokeDashArray::SVGStrokeDashArray(jsi::Runtime &rt, const jsi::Value &jsiValue) {
+  const auto &array = jsiValue.asObject(rt).asArray(rt);
+  const auto arraySize = array.size(rt);
+  values.reserve(arraySize);
+  for (size_t i = 0; i < arraySize; ++i) {
+    values.emplace_back(rt, array.getValueAtIndex(rt, i));
+  }
+}
+
+SVGStrokeDashArray::SVGStrokeDashArray(const folly::dynamic &value) {
+  for (const auto &value : value) {
+    values.emplace_back(value);
+  }
+}
+
+bool SVGStrokeDashArray::canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue) {
+  if (!jsiValue.isObject() || !jsiValue.asObject(rt).isArray(rt)) {
+    return false;
+  }
+  const auto &array = jsiValue.asObject(rt).asArray(rt);
+  for (size_t i = 0; i < array.size(rt); ++i) {
+    if (!SVGLength::canConstruct(rt, array.getValueAtIndex(rt, i))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+bool SVGStrokeDashArray::canConstruct(const folly::dynamic &value) {
+  return value.isArray() &&
+      std::all_of(value.begin(), value.end(), [](const auto &value) { return SVGLength::canConstruct(value); });
+}
+
+folly::dynamic SVGStrokeDashArray::toDynamic() const {
+  folly::dynamic array = folly::dynamic::array;
+  array.reserve(values.size());
+  for (const auto &value : values) {
+    array.push_back(value.toDynamic());
+  }
+  return array;
+}
+
+std::string SVGStrokeDashArray::toString() const {
+  std::stringstream ss;
+  ss << "{";
+  for (const auto &value : values) {
+    ss << value.toString();
+    if (&value != &values.back()) {
+      ss << ", ";
+    }
+  }
+  ss << "}";
+  return ss.str();
+}
+
+SVGStrokeDashArray SVGStrokeDashArray::interpolate(double progress, const SVGStrokeDashArray &to) const {
+  std::vector<SVGLength> result;
+  auto fromValues = values;
+  auto toValues = to.values;
+
+  // If one of the arrays is empty, we take the fist value from the second
+  // one and put it as the only element of the first (empty) array
+  // (this is how it works on the web)
+  if (fromValues.size() == 0 && toValues.size() > 0) {
+    fromValues = {toValues[0]};
+  }
+  if (toValues.size() == 0 && fromValues.size() > 0) {
+    toValues = {fromValues[0]};
+  }
+
+  const auto fromSize = fromValues.size();
+  const auto toSize = toValues.size();
+
+  // We need to find the least common multiple of the two arrays to get
+  // a smooth interpolation of the dash array pattern
+  const auto resultSize = std::lcm(fromSize, toSize);
+  result.reserve(resultSize);
+
+  for (size_t i = 0; i < resultSize; i++) {
+    result.emplace_back(fromValues[i % fromSize].interpolate(progress, toValues[i % toSize]));
+  }
+
+  return SVGStrokeDashArray(result);
+}
+
+bool SVGStrokeDashArray::operator==(const SVGStrokeDashArray &other) const {
+  return values == other.values;
+}
+
+#ifndef NDEBUG
+
+std::ostream &operator<<(std::ostream &os, const SVGStrokeDashArray &strokeDashArray) {
+  os << "SVGStrokeDashArray(" << strokeDashArray.toString() << ")";
+  return os;
+}
+
+#endif // NDEBUG
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/svg/values/SVGStrokeDashArray.h

@@ -0,0 +1,33 @@
+#pragma once
+
+#include <reanimated/CSS/svg/values/SVGLength.h>
+
+#include <numeric>
+#include <string>
+#include <vector>
+
+namespace reanimated::css {
+
+struct SVGStrokeDashArray : public CSSSimpleValue<SVGStrokeDashArray> {
+  std::vector<SVGLength> values;
+
+  SVGStrokeDashArray();
+  explicit SVGStrokeDashArray(const std::vector<SVGLength> &values);
+  explicit SVGStrokeDashArray(jsi::Runtime &rt, const jsi::Value &jsiValue);
+  explicit SVGStrokeDashArray(const folly::dynamic &value);
+
+  static bool canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue);
+  static bool canConstruct(const folly::dynamic &value);
+
+  folly::dynamic toDynamic() const override;
+  std::string toString() const override;
+  SVGStrokeDashArray interpolate(double progress, const SVGStrokeDashArray &to) const override;
+
+  bool operator==(const SVGStrokeDashArray &other) const;
+
+#ifndef NDEBUG
+  friend std::ostream &operator<<(std::ostream &os, const SVGStrokeDashArray &strokeDashArray);
+#endif // NDEBUG
+};
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/DelayedItemsManager.cpp

@@ -0,0 +1,75 @@
+#include <reanimated/CSS/utils/DelayedItemsManager.h>
+
+#include <functional>
+#include <utility>
+
+namespace reanimated::css {
+
+template <typename TValue>
+DelayedItem<TValue>::DelayedItem(double timestamp, TValue value) : timestamp(timestamp), value(std::move(value)) {}
+
+template <typename TValue>
+bool DelayedItemComparator<TValue>::operator()(const DelayedItem<TValue> &lhs, const DelayedItem<TValue> &rhs) const {
+  if (lhs.timestamp == rhs.timestamp) {
+    // Use address comparison as a tiebreaker when timestamps are equal
+    return std::less<const TValue *>{}(&lhs.value, &rhs.value);
+  }
+  return lhs.timestamp < rhs.timestamp;
+}
+
+template <typename TValue>
+void DelayedItemsManager<TValue>::add(const double timestamp, const TValue value) {
+  auto result = itemsSet_.emplace(timestamp, value);
+  if (result.second) {
+    itemsMap_[result.first->value] = result.first;
+  }
+}
+
+template <typename TValue>
+typename DelayedItemsManager<TValue>::Item DelayedItemsManager<TValue>::pop() {
+  if (itemsSet_.empty()) {
+    throw std::runtime_error("[Reanimated] No delayed items available to pop");
+  }
+  auto it = itemsSet_.begin();
+  Item result = std::move(*it);
+  itemsMap_.erase(it->value);
+  itemsSet_.erase(it);
+  return result;
+}
+
+template <typename TValue>
+bool DelayedItemsManager<TValue>::remove(const TValue value) {
+  auto it = itemsMap_.find(value);
+
+  if (it == itemsMap_.end()) {
+    return false;
+  }
+
+  itemsSet_.erase(it->second);
+  itemsMap_.erase(it);
+  return true;
+}
+
+template <typename TValue>
+const typename DelayedItemsManager<TValue>::Item &DelayedItemsManager<TValue>::top() const {
+  if (itemsSet_.empty()) {
+    throw std::runtime_error("[Reanimated] No delayed items available");
+  }
+  return *itemsSet_.begin();
+}
+
+template <typename TValue>
+bool DelayedItemsManager<TValue>::empty() const {
+  return itemsSet_.empty();
+}
+
+template <typename TValue>
+size_t DelayedItemsManager<TValue>::size() const {
+  return itemsSet_.size();
+}
+
+// Declare the types that will be used in the DelayedItemsManager class
+template class DelayedItemsManager<std::shared_ptr<CSSAnimation>>;
+template class DelayedItemsManager<Tag>;
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/DelayedItemsManager.h

@@ -0,0 +1,45 @@
+#pragma once
+
+#include <reanimated/CSS/core/CSSAnimation.h>
+
+#include <functional>
+#include <memory>
+#include <set>
+#include <stdexcept>
+#include <unordered_map>
+#include <utility>
+
+namespace reanimated::css {
+
+template <typename TValue>
+struct DelayedItem {
+  const double timestamp;
+  const TValue value;
+
+  DelayedItem(double timestamp, TValue value);
+};
+
+template <typename TValue>
+struct DelayedItemComparator {
+  bool operator()(const DelayedItem<TValue> &lhs, const DelayedItem<TValue> &rhs) const;
+};
+
+template <typename TValue>
+class DelayedItemsManager {
+  using Item = DelayedItem<TValue>;
+  using ItemSet = std::set<Item, DelayedItemComparator<TValue>>;
+  using ItemMap = std::unordered_map<TValue, typename ItemSet::iterator>;
+
+  ItemSet itemsSet_;
+  ItemMap itemsMap_;
+
+ public:
+  void add(double timestamp, TValue value);
+  Item pop();
+  bool remove(TValue value);
+  const Item &top() const;
+  bool empty() const;
+  size_t size() const;
+};
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/algorithms.cpp

@@ -0,0 +1,12 @@
+#include <reanimated/CSS/utils/algorithms.h>
+
+#include <vector>
+
+namespace reanimated::css {
+
+size_t firstSmallerOrEqual(const double x, const std::vector<double> &arr) {
+  auto it = std::upper_bound(arr.begin(), arr.end(), x);
+  return it == arr.begin() ? 0 : std::distance(arr.begin(), --it);
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/algorithms.h

@@ -0,0 +1,10 @@
+#pragma once
+
+#include <algorithm>
+#include <vector>
+
+namespace reanimated::css {
+
+size_t firstSmallerOrEqual(double x, const std::vector<double> &arr);
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/interpolators.cpp

@@ -0,0 +1,36 @@
+#include <reanimated/CSS/utils/interpolators.h>
+
+#include <memory>
+#include <string>
+
+namespace reanimated::css {
+
+std::shared_ptr<PropertyInterpolator> createPropertyInterpolator(
+    const std::string &propertyName,
+    const PropertyPath &propertyPath,
+    const InterpolatorFactoriesRecord &factories,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository) {
+  auto it = factories.find(propertyName);
+
+  if (it == factories.cend()) {
+    throw std::invalid_argument("[Reanimated] No interpolator factory found for property: " + propertyName);
+  }
+
+  PropertyPath newPath = propertyPath;
+  newPath.emplace_back(propertyName);
+
+  return it->second->create(newPath, viewStylesRepository);
+}
+
+std::shared_ptr<PropertyInterpolator> createPropertyInterpolator(
+    size_t arrayIndex,
+    const PropertyPath &propertyPath,
+    const InterpolatorFactoriesArray &factories,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository) {
+  PropertyPath newPath = propertyPath;
+  newPath.emplace_back(std::to_string(arrayIndex));
+
+  return factories[arrayIndex % factories.size()]->create(newPath, viewStylesRepository);
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/interpolators.h

@@ -0,0 +1,23 @@
+#pragma once
+
+#include <reanimated/CSS/interpolation/PropertyInterpolator.h>
+
+#include <memory>
+#include <string>
+#include <vector>
+
+namespace reanimated::css {
+
+std::shared_ptr<PropertyInterpolator> createPropertyInterpolator(
+    const std::string &propertyName,
+    const PropertyPath &propertyPath,
+    const InterpolatorFactoriesRecord &factories,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
+
+std::shared_ptr<PropertyInterpolator> createPropertyInterpolator(
+    size_t arrayIndex,
+    const PropertyPath &propertyPath,
+    const InterpolatorFactoriesArray &factories,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/props.cpp

@@ -0,0 +1,149 @@
+#include <reanimated/CSS/utils/props.h>
+
+#include <string>
+#include <utility>
+
+namespace reanimated::css {
+
+bool isDiscreteProperty(const std::string &propName, const std::string &componentName) {
+  const auto &interpolators = getComponentInterpolators(componentName);
+  const auto it = interpolators.find(propName);
+  if (it == interpolators.end()) {
+    return false;
+  }
+  return it->second->isDiscreteProperty();
+}
+
+bool areArraysDifferentRecursive(const folly::dynamic &oldArray, const folly::dynamic &newArray) {
+  if (oldArray.size() != newArray.size()) {
+    return true;
+  }
+
+  for (size_t i = 0; i < oldArray.size(); i++) {
+    const auto [oldChangedProp, newChangedProp] = getChangedPropsRecursive(oldArray[i], newArray[i]);
+
+    if (!oldChangedProp.isNull() || !newChangedProp.isNull()) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+std::pair<folly::dynamic, folly::dynamic> getChangedPropsRecursive(
+    const folly::dynamic &oldProp,
+    const folly::dynamic &newProp) {
+  if (!oldProp.isObject() || !newProp.isObject()) {
+    // Primitive values comparison
+    if (oldProp != newProp) {
+      return {oldProp, newProp};
+    }
+    return {folly::dynamic(), folly::dynamic()};
+  }
+
+  if (oldProp.isArray() && newProp.isArray()) {
+    // Arrays comparison
+    if (areArraysDifferentRecursive(oldProp, newProp)) {
+      return {oldProp, newProp};
+    }
+    return {folly::dynamic(), folly::dynamic()};
+  }
+
+  folly::dynamic oldResult = folly::dynamic::object;
+  folly::dynamic newResult = folly::dynamic::object;
+  bool oldHasChanges = false;
+  bool newHasChanges = false;
+
+  // Check for removed properties
+  for (const auto &item : oldProp.items()) {
+    const auto &propName = item.first.asString();
+    if (!newProp.count(propName)) {
+      const auto &oldValue = item.second;
+      oldResult[propName] = oldValue;
+      oldHasChanges = true;
+    }
+  }
+
+  // Check for new and changed properties
+  for (const auto &item : newProp.items()) {
+    const auto &propName = item.first.asString();
+    const auto &newValue = item.second;
+
+    if (oldProp.count(propName)) {
+      const auto &oldValue = oldProp[propName];
+      auto [oldChangedProp, newChangedProp] = getChangedPropsRecursive(oldValue, newValue);
+
+      if (!oldChangedProp.isNull() && !newChangedProp.isNull()) {
+        oldResult[propName] = std::move(oldChangedProp);
+        newResult[propName] = std::move(newChangedProp);
+        oldHasChanges = true;
+        newHasChanges = true;
+      }
+    } else {
+      newResult[propName] = newValue;
+      newHasChanges = true;
+    }
+  }
+
+  return {
+      oldHasChanges ? std::move(oldResult) : folly::dynamic(), newHasChanges ? std::move(newResult) : folly::dynamic()};
+}
+
+std::pair<folly::dynamic, folly::dynamic>
+getChangedValueForProp(const folly::dynamic &oldObject, const folly::dynamic &newObject, const std::string &propName) {
+  const bool oldHasProperty = oldObject.count(propName);
+  const bool newHasProperty = newObject.count(propName);
+
+  if (oldHasProperty && newHasProperty) {
+    const auto &oldVal = oldObject[propName];
+    const auto &newVal = newObject[propName];
+
+    if (oldVal.isObject() && newVal.isObject()) {
+      return getChangedPropsRecursive(oldVal, newVal);
+    } else if (oldVal != newVal) {
+      return {oldVal, newVal};
+    }
+
+    return {folly::dynamic(), folly::dynamic()};
+  }
+
+  if (oldHasProperty) {
+    const auto &oldVal = oldObject[propName];
+    return {oldVal, folly::dynamic()};
+  } else if (newHasProperty) {
+    const auto &newVal = newObject[propName];
+    return {folly::dynamic(), newVal};
+  }
+
+  return {folly::dynamic(), folly::dynamic()};
+}
+
+ChangedProps getChangedProps(
+    const folly::dynamic &oldProps,
+    const folly::dynamic &newProps,
+    const PropertyNames &allowedProperties) {
+  folly::dynamic oldResult = folly::dynamic::object;
+  folly::dynamic newResult = folly::dynamic::object;
+  PropertyNames changedPropertyNames;
+
+  for (const auto &propName : allowedProperties) {
+    auto [oldChangedProp, newChangedProp] = getChangedValueForProp(oldProps, newProps, propName);
+
+    const auto hasOldChangedProp = !oldChangedProp.isNull();
+    const auto hasNewChangedProp = !newChangedProp.isNull();
+
+    if (hasOldChangedProp) {
+      oldResult[propName] = std::move(oldChangedProp);
+    }
+    if (hasNewChangedProp) {
+      newResult[propName] = std::move(newChangedProp);
+    }
+    if (hasOldChangedProp || hasNewChangedProp) {
+      changedPropertyNames.push_back(propName);
+    }
+  }
+
+  return {std::move(oldResult), std::move(newResult), std::move(changedPropertyNames)};
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/utils/props.h

@@ -0,0 +1,32 @@
+#pragma once
+
+#include <reanimated/CSS/InterpolatorRegistry.h>
+#include <reanimated/CSS/common/definitions.h>
+
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <unordered_set>
+#include <utility>
+
+namespace reanimated::css {
+
+struct ChangedProps {
+  const folly::dynamic oldProps;
+  const folly::dynamic newProps;
+  const PropertyNames changedPropertyNames;
+};
+
+bool isDiscreteProperty(const std::string &propName, const std::string &componentName);
+
+// We need to specify it here because there are 2 methods referencing
+// each other in the recursion and areArraysDifferentRecursive must be
+// aware that getChangedPropsRecursive exists
+std::pair<folly::dynamic, folly::dynamic> getChangedPropsRecursive(
+    const folly::dynamic &oldProp,
+    const folly::dynamic &newProp);
+
+ChangedProps
+getChangedProps(const folly::dynamic &oldProps, const folly::dynamic &newProps, const PropertyNames &allowedProperties);
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Fabric/ReanimatedCommitHook.cpp

@@ -1,11 +1,12 @@
-#ifdef RCT_NEW_ARCH_ENABLED
-
 #include <reanimated/Fabric/ReanimatedCommitHook.h>
 #include <reanimated/Fabric/ReanimatedCommitShadowNode.h>
 #include <reanimated/Fabric/ShadowTreeCloner.h>
+#include <reanimated/Tools/FeatureFlags.h>
+#include <reanimated/Tools/ReanimatedSystraceSection.h>
 
 #include <react/renderer/core/ComponentDescriptor.h>
 
+#include <memory>
 #include <unordered_map>
 #include <vector>
 
@@ -14,11 +15,11 @@ using namespace facebook::react;
 namespace reanimated {
 
 ReanimatedCommitHook::ReanimatedCommitHook(
-    const std::shared_ptr<PropsRegistry> &propsRegistry,
     const std::shared_ptr<UIManager> &uiManager,
-    const std::shared_ptr<LayoutAnimationsProxy> &layoutAnimationsProxy)
-    : propsRegistry_(propsRegistry),
-      uiManager_(uiManager),
+    const std::shared_ptr<UpdatesRegistryManager> &updatesRegistryManager,
+    const std::shared_ptr<LayoutAnimationsProxyCommon> &layoutAnimationsProxy)
+    : uiManager_(uiManager),
+      updatesRegistryManager_(updatesRegistryManager),
       layoutAnimationsProxy_(layoutAnimationsProxy) {
   uiManager_->registerCommitHook(*this);
 }
@@ -27,24 +28,24 @@ ReanimatedCommitHook::~ReanimatedCommitHook() noexcept {
   uiManager_->unregisterCommitHook(*this);
 }
 
-void ReanimatedCommitHook::maybeInitializeLayoutAnimations(
-    SurfaceId surfaceId) {
+void ReanimatedCommitHook::maybeInitializeLayoutAnimations(SurfaceId surfaceId) {
   auto lock = std::unique_lock<std::mutex>(mutex_);
   if (surfaceId > currentMaxSurfaceId_) {
     // when a new surfaceId is observed we call setMountingOverrideDelegate
     // for all yet unseen surfaces
-    uiManager_->getShadowTreeRegistry().enumerate(
-        [strongThis = shared_from_this()](
-            const ShadowTree &shadowTree, bool &stop) {
-          // Executed synchronously.
-          if (shadowTree.getSurfaceId() <= strongThis->currentMaxSurfaceId_) {
-            // the set function actually adds our delegate to a list, so we
-            // shouldn't invoke it twice for the same surface
-            return;
-          }
-          shadowTree.getMountingCoordinator()->setMountingOverrideDelegate(
-              strongThis->layoutAnimationsProxy_);
-        });
+    uiManager_->getShadowTreeRegistry().enumerate([strongThis = shared_from_this()](
+                                                      const ShadowTree &shadowTree, bool &stop) {
+      // Executed synchronously.
+      if (shadowTree.getSurfaceId() <= strongThis->currentMaxSurfaceId_) {
+        // the set function actually adds our delegate to a list, so we
+        // shouldn't invoke it twice for the same surface
+        return;
+      }
+      // TODO: We should consider registering a new instance of proxy for each surface.
+      // The current approach will encounter problems on platforms where it is more common to have multiple surfaces.
+      strongThis->layoutAnimationsProxy_->startSurface(shadowTree.getSurfaceId());
+      shadowTree.getMountingCoordinator()->setMountingOverrideDelegate(strongThis->layoutAnimationsProxy_);
+    });
     currentMaxSurfaceId_ = surfaceId;
   }
 }
@@ -52,50 +53,61 @@ void ReanimatedCommitHook::maybeInitializeLayoutAnimations(
 RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
     ShadowTree const &,
     RootShadowNode::Shared const &,
-    RootShadowNode::Unshared const &newRootShadowNode) noexcept {
+    RootShadowNode::Unshared const &newRootShadowNode
+#if REACT_NATIVE_MINOR_VERSION >= 80
+    ,
+    const ShadowTreeCommitOptions &commitOptions
+#endif
+    ) noexcept {
+  ReanimatedSystraceSection s("ReanimatedCommitHook::shadowTreeWillCommit");
+
   maybeInitializeLayoutAnimations(newRootShadowNode->getSurfaceId());
 
-  auto reaShadowNode =
-      std::reinterpret_pointer_cast<ReanimatedCommitShadowNode>(
-          newRootShadowNode);
+  auto reaShadowNode = std::reinterpret_pointer_cast<ReanimatedCommitShadowNode>(newRootShadowNode);
 
   if (reaShadowNode->hasReanimatedCommitTrait()) {
     // ShadowTree commited by Reanimated, no need to apply updates from
-    // PropsRegistry
+    // the updates registry manager
     reaShadowNode->unsetReanimatedCommitTrait();
     reaShadowNode->setReanimatedMountTrait();
     return newRootShadowNode;
   }
 
-  // ShadowTree not commited by Reanimated, apply updates from PropsRegistry
+#if REACT_NATIVE_MINOR_VERSION >= 80
+  if constexpr (StaticFeatureFlags::getFlag("USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS")) {
+    // State updates are based on the currently committed ShadowTree,
+    // which means that all animation changes are already included.
+    // Therefore, there's no need to reapply styles from the props map.
+    if (commitOptions.source != ShadowTreeCommitSource::React) {
+      return newRootShadowNode;
+    }
+  }
+#endif
+
+  // ShadowTree not commited by Reanimated, apply updates from the updates
+  // registry manager
   reaShadowNode->unsetReanimatedMountTrait();
   RootShadowNode::Unshared rootNode = newRootShadowNode;
-  PropsMap propsMap;
 
   {
-    auto lock = propsRegistry_->createLock();
+    auto lock = updatesRegistryManager_->lock();
 
-    propsRegistry_->for_each(
-        [&](const ShadowNodeFamily &family, const folly::dynamic &props) {
-          propsMap[&family].emplace_back(props);
-        });
+    PropsMap propsMap = updatesRegistryManager_->collectProps();
+    updatesRegistryManager_->cancelCommitAfterPause();
 
     rootNode = cloneShadowTreeWithNewProps(*rootNode, propsMap);
-
     // If the commit comes from React Native then pause commits from
     // Reanimated since the ShadowTree to be committed by Reanimated may not
     // include the new changes from React Native yet and all changes of animated
-    // props will be applied in ReanimatedCommitHook by iterating over
-    // PropsRegistry.
+    // props will be applied in ReanimatedCommitHook by UpdatesRegistryManager
     // This is very important, since if we didn't pause Reanimated commits,
     // it could lead to RN commits being delayed until the animation is finished
-    // (very bad).
-    propsRegistry_->pauseReanimatedCommits();
+    // (very bad). We don't pause Reanimated commits for state updates coming
+    // from React Native as this would break sticky header animations.
+    updatesRegistryManager_->pauseReanimatedCommits();
   }
 
   return rootNode;
 }
 
 } // namespace reanimated
-
-#endif // RCT_NEW_ARCH_ENABLED