@react-native-ohos/react-native-reanimated 4.0.2-beta.1 → 4.1.0-beta.1

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

@@ -1,12 +1,12 @@
+#include <reanimated/CSS/InterpolatorRegistry.h>
 #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);
+bool isDiscreteProperty(const std::string &propName, const std::string &nativeComponentName) {
+  const auto &interpolators = getComponentInterpolators(nativeComponentName);
   const auto it = interpolators.find(propName);
   if (it == interpolators.end()) {
     return false;
@@ -14,136 +14,17 @@ bool isDiscreteProperty(const std::string &propName, const std::string &componen
   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;
-    }
-  }
-
+ColorChannels extractColorChannels(int64_t numberValue) {
+  // Colors above 2^31 arrive as signed negatives (JS applies `| 0`); cast
+  // through int32_t to preserve the bit pattern.
+  const uint32_t color =
+      numberValue < 0 ? static_cast<uint32_t>(static_cast<int32_t>(numberValue)) : static_cast<uint32_t>(numberValue);
   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)};
+      static_cast<uint8_t>((color >> 16) & 0xFF),
+      static_cast<uint8_t>((color >> 8) & 0xFF),
+      static_cast<uint8_t>(color & 0xFF),
+      static_cast<uint8_t>((color >> 24) & 0xFF),
+  };
 }
 
 } // namespace reanimated::css

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

@@ -1,32 +1,14 @@
 #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 &nativeComponentName);
 
-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);
+/// Decodes RN's processColor output (packed ARGB int, possibly signed) into RGBA channels.
+ColorChannels extractColorChannels(int64_t numberValue);
 
 } // namespace reanimated::css

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

@@ -0,0 +1,43 @@
+#pragma once
+
+#include <reanimated/CSS/easing/EasingConfigs.h>
+
+#include <algorithm>
+#include <utility>
+
+namespace reanimated::css {
+
+// Snapshot of a transition's reversing-shortening state. Stores the easing as
+// a config (variant), not a resolved EasingFunction - the function is only
+// rebuilt inside reverseShorten when an actual reversal happens, so a
+// transition that never gets reversed never pays for the resolution.
+struct ReversingState {
+  double factor;
+  double startTimestamp;
+  double duration;
+  double delay;
+  EasingConfig easing;
+};
+
+inline ReversingState makeReversingState(double timestamp, double duration, double delay, EasingConfig easing) {
+  return {1.0, timestamp + delay, duration, delay, std::move(easing)};
+}
+
+// When a transition reverses an in-flight one, the new transition's duration
+// (and negative delay) shorten by an accumulating factor based on how far the
+// running transition had progressed.
+// See https://drafts.csswg.org/css-transitions/#reversing
+inline ReversingState
+reverseShorten(const ReversingState &previous, double timestamp, double duration, double delay, EasingConfig easing) {
+  const double elapsed = std::clamp(timestamp - previous.startTimestamp, 0.0, previous.duration);
+  const double linearProgress = previous.duration > 0 ? elapsed / previous.duration : 1.0;
+  const double easedProgress = getEasingFunctionFromConfig(previous.easing)(linearProgress);
+  const double factor = easedProgress * previous.factor + (1 - previous.factor);
+  duration *= factor;
+  if (delay < 0) {
+    delay *= factor;
+  }
+  return {factor, timestamp + delay, duration, delay, std::move(easing)};
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Compat/WorkletsApi.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include <worklets/Compat/StableApi.h>
+#include <string>
+
+#define EXPECTED_WORKLETS_STABLE_API_VERSION "0.9.0"
+
+static_assert(
+    std::string(WORKLETS_STABLE_API_VERSION) == EXPECTED_WORKLETS_STABLE_API_VERSION,
+    "Incompatible worklets stable API version. Expected " EXPECTED_WORKLETS_STABLE_API_VERSION
+    ", but got " WORKLETS_STABLE_API_VERSION ".");
+
+#undef EXPECTED_WORKLETS_STABLE_API_VERSION

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Events/UIEventHandler.cpp

@@ -0,0 +1,33 @@
+#include <reanimated/Events/UIEventHandler.h>
+
+#include <memory>
+#include <string>
+
+using namespace worklets;
+
+namespace reanimated {
+
+void UIEventHandler::process(
+    const std::shared_ptr<WorkletRuntime> &uiRuntime,
+    const double eventTimestamp,
+    const jsi::Value &eventValue) const {
+  runSyncOnRuntime(uiRuntime, handlerFunction_, jsi::Value(eventTimestamp), eventValue);
+}
+
+uint64_t UIEventHandler::getHandlerId() const {
+  return handlerId_;
+}
+
+const std::string &UIEventHandler::getEventName() const {
+  return eventName_;
+}
+
+uint64_t UIEventHandler::getEmitterReactTag() const {
+  return emitterReactTag_;
+}
+
+bool UIEventHandler::shouldIgnoreEmitterReactTag() const {
+  return emitterReactTag_ == -1;
+}
+
+} // namespace reanimated

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Events/UIEventHandler.h

@@ -0,0 +1,39 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <reanimated/Compat/WorkletsApi.h>
+
+#include <memory>
+#include <string>
+
+using namespace facebook;
+
+namespace reanimated {
+
+class UIEventHandler {
+  const uint64_t handlerId_;
+  const uint64_t emitterReactTag_;
+  const std::string eventName_;
+  const std::shared_ptr<worklets::Serializable> handlerFunction_;
+
+ public:
+  UIEventHandler(
+      const uint64_t handlerId,
+      const std::string &eventName,
+      const uint64_t emitterReactTag,
+      const std::shared_ptr<worklets::Serializable> &handlerFunction)
+      : handlerId_(handlerId),
+        emitterReactTag_(emitterReactTag),
+        eventName_(eventName),
+        handlerFunction_(handlerFunction) {}
+  void process(
+      const std::shared_ptr<worklets::WorkletRuntime> &uiRuntime,
+      double eventTimestamp,
+      const jsi::Value &eventValue) const;
+  uint64_t getHandlerId() const;
+  const std::string &getEventName() const;
+  uint64_t getEmitterReactTag() const;
+  bool shouldIgnoreEmitterReactTag() const;
+};
+
+} // namespace reanimated

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Events/UIEventHandlerRegistry.cpp

@@ -0,0 +1,95 @@
+#include <reanimated/Events/UIEventHandler.h>
+#include <reanimated/Events/UIEventHandlerRegistry.h>
+
+#include <memory>
+#include <string>
+#include <utility>
+#include <vector>
+
+using namespace worklets;
+
+namespace reanimated {
+
+void UIEventHandlerRegistry::registerEventHandler(const std::shared_ptr<UIEventHandler> &eventHandler) {
+  const std::lock_guard<std::mutex> lock(instanceMutex);
+  const auto &eventName = eventHandler->getEventName();
+  auto handlerId = eventHandler->getHandlerId();
+
+  if (eventHandler->shouldIgnoreEmitterReactTag()) {
+    eventMappingsWithoutTag[eventName][handlerId] = eventHandler;
+  } else {
+    const auto emitterReactTag = eventHandler->getEmitterReactTag();
+    const auto eventHash = std::make_pair(emitterReactTag, eventName);
+    eventMappingsWithTag[eventHash][handlerId] = eventHandler;
+  }
+  eventHandlers[handlerId] = eventHandler;
+}
+
+void UIEventHandlerRegistry::unregisterEventHandler(const uint64_t id) {
+  const std::lock_guard<std::mutex> lock(instanceMutex);
+  auto handlerIt = eventHandlers.find(id);
+  if (handlerIt != eventHandlers.end()) {
+    const auto &eventHandler = handlerIt->second;
+    const auto &eventName = eventHandler->getEventName();
+
+    if (eventHandler->shouldIgnoreEmitterReactTag()) {
+      const auto eventMappingIt = eventMappingsWithoutTag.find(eventName);
+      auto &handlersMap = eventMappingIt->second;
+      handlersMap.erase(id);
+      if (handlersMap.empty()) {
+        eventMappingsWithoutTag.erase(eventMappingIt);
+      }
+    } else {
+      const auto emitterReactTag = eventHandler->getEmitterReactTag();
+      const auto eventHash = std::make_pair(emitterReactTag, eventName);
+      const auto eventMappingIt = eventMappingsWithTag.find(eventHash);
+      auto &handlersMap = eventMappingIt->second;
+      handlersMap.erase(id);
+      if (handlersMap.empty()) {
+        eventMappingsWithTag.erase(eventMappingIt);
+      }
+    }
+    eventHandlers.erase(handlerIt);
+  }
+}
+
+void UIEventHandlerRegistry::processEvent(
+    const std::shared_ptr<WorkletRuntime> &uiWorkletRuntime,
+    const double eventTimestamp,
+    const std::string &eventName,
+    const int emitterReactTag,
+    const jsi::Value &eventPayload) {
+  std::vector<std::shared_ptr<UIEventHandler>> handlersForEvent;
+  {
+    const std::lock_guard<std::mutex> lock(instanceMutex);
+    auto handlersIt = eventMappingsWithoutTag.find(eventName);
+    if (handlersIt != eventMappingsWithoutTag.end()) {
+      for (const auto &handler : handlersIt->second) {
+        handlersForEvent.push_back(handler.second);
+      }
+    }
+    const auto eventHash = std::make_pair(emitterReactTag, eventName);
+    auto handlersWithTagIt = eventMappingsWithTag.find(eventHash);
+    if (handlersWithTagIt != eventMappingsWithTag.end()) {
+      for (const auto &handler : handlersWithTagIt->second) {
+        handlersForEvent.push_back(handler.second);
+      }
+    }
+  }
+
+  jsi::Runtime &uiRuntime = getJSIRuntimeFromWorkletRuntime(uiWorkletRuntime);
+  eventPayload.asObject(uiRuntime).setProperty(
+      uiRuntime, "eventName", jsi::String::createFromUtf8(uiRuntime, eventName));
+  for (const auto &handler : handlersForEvent) {
+    handler->process(uiWorkletRuntime, eventTimestamp, eventPayload);
+  }
+}
+
+bool UIEventHandlerRegistry::isAnyHandlerWaitingForEvent(const std::string &eventName, const int emitterReactTag) {
+  const std::lock_guard<std::mutex> lock(instanceMutex);
+  const auto eventHash = std::make_pair(emitterReactTag, eventName);
+  auto it = eventMappingsWithTag.find(eventHash);
+  return it != eventMappingsWithTag.end() && !it->second.empty();
+}
+
+} // namespace reanimated

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Events/UIEventHandlerRegistry.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <reanimated/Compat/WorkletsApi.h>
+
+#include <map>
+#include <memory>
+#include <mutex>
+#include <string>
+#include <unordered_map>
+#include <utility>
+
+using namespace facebook;
+
+namespace reanimated {
+
+class UIEventHandler;
+
+class UIEventHandlerRegistry {
+  std::map<std::pair<int, std::string>, std::unordered_map<uint64_t, std::shared_ptr<UIEventHandler>>>
+      eventMappingsWithTag;
+  std::map<std::string, std::unordered_map<uint64_t, std::shared_ptr<UIEventHandler>>> eventMappingsWithoutTag;
+  std::map<uint64_t, std::shared_ptr<UIEventHandler>> eventHandlers;
+  std::mutex instanceMutex;
+
+ public:
+  void registerEventHandler(const std::shared_ptr<UIEventHandler> &eventHandler);
+  void unregisterEventHandler(const uint64_t id);
+
+  void processEvent(
+      const std::shared_ptr<worklets::WorkletRuntime> &uiRuntime,
+      const double eventTimestamp,
+      const std::string &eventName,
+      const int emitterReactTag,
+      const jsi::Value &eventPayload);
+
+  bool isAnyHandlerWaitingForEvent(const std::string &eventName, const int emitterReactTag);
+};
+
+} // namespace reanimated

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

@@ -4,8 +4,6 @@
 #include <reanimated/Tools/FeatureFlags.h>
 #include <reanimated/Tools/ReanimatedSystraceSection.h>
 
-#include <react/renderer/core/ComponentDescriptor.h>
-
 #include <memory>
 #include <unordered_map>
 #include <vector>
@@ -33,19 +31,20 @@ void ReanimatedCommitHook::maybeInitializeLayoutAnimations(SurfaceId surfaceId)
   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;
-      }
-      // 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_);
-    });
+    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;
   }
 }
@@ -53,16 +52,16 @@ void ReanimatedCommitHook::maybeInitializeLayoutAnimations(SurfaceId surfaceId)
 RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
     ShadowTree const &,
     RootShadowNode::Shared const &,
-    RootShadowNode::Unshared const &newRootShadowNode
-#if REACT_NATIVE_MINOR_VERSION >= 80
-    ,
-    const ShadowTreeCommitOptions &commitOptions
-#endif
-    ) noexcept {
+    RootShadowNode::Unshared const &newRootShadowNode,
+    const ShadowTreeCommitOptions &commitOptions) noexcept {
   ReanimatedSystraceSection s("ReanimatedCommitHook::shadowTreeWillCommit");
 
   maybeInitializeLayoutAnimations(newRootShadowNode->getSurfaceId());
 
+  if constexpr (StaticFeatureFlags::getFlag("USE_ANIMATION_BACKEND")) {
+    return newRootShadowNode;
+  }
+
   auto reaShadowNode = std::reinterpret_pointer_cast<ReanimatedCommitShadowNode>(newRootShadowNode);
 
   if (reaShadowNode->hasReanimatedCommitTrait()) {
@@ -73,7 +72,6 @@ RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
     return newRootShadowNode;
   }
 
-#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.
@@ -82,7 +80,6 @@ RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
       return newRootShadowNode;
     }
   }
-#endif
 
   // ShadowTree not commited by Reanimated, apply updates from the updates
   // registry manager

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

@@ -29,12 +29,8 @@ class ReanimatedCommitHook : public UIManagerCommitHook, public std::enable_shar
   RootShadowNode::Unshared shadowTreeWillCommit(
       ShadowTree const &shadowTree,
       RootShadowNode::Shared const &oldRootShadowNode,
-      RootShadowNode::Unshared const &newRootShadowNode
-#if REACT_NATIVE_MINOR_VERSION >= 80
-      ,
-      const ShadowTreeCommitOptions &commitOptions
-#endif
-      ) noexcept override;
+      RootShadowNode::Unshared const &newRootShadowNode,
+      const ShadowTreeCommitOptions &commitOptions) noexcept override;
 
  private:
   std::shared_ptr<UIManager> uiManager_;

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

@@ -9,8 +9,12 @@ namespace reanimated {
 ReanimatedMountHook::ReanimatedMountHook(
     const std::shared_ptr<UIManager> &uiManager,
     const std::shared_ptr<UpdatesRegistryManager> &updatesRegistryManager,
+    const std::shared_ptr<css::ViewStylesRepository> &viewStylesRepository,
     const std::function<void()> &requestFlush)
-    : uiManager_(uiManager), updatesRegistryManager_(updatesRegistryManager), requestFlush_(requestFlush) {
+    : uiManager_(uiManager),
+      updatesRegistryManager_(updatesRegistryManager),
+      viewStylesRepository_(viewStylesRepository),
+      requestFlush_(requestFlush) {
   uiManager_->registerMountHook(*this);
 }
 
@@ -20,35 +24,39 @@ ReanimatedMountHook::~ReanimatedMountHook() noexcept {
 
 void ReanimatedMountHook::shadowTreeDidMount(
     const RootShadowNode::Shared &rootShadowNode,
-#if REACT_NATIVE_MINOR_VERSION >= 81
-    HighResTimeStamp
-#else
-    double
-#endif // REACT_NATIVE_MINOR_VERSION >= 81
-    ) noexcept {
+    HighResTimeStamp mountTime) noexcept {
   ReanimatedSystraceSection s("ReanimatedMountHook::shadowTreeDidMount");
 
   auto reaShadowNode = std::reinterpret_pointer_cast<ReanimatedCommitShadowNode>(
       std::const_pointer_cast<RootShadowNode>(rootShadowNode));
 
-  if (reaShadowNode->hasReanimatedMountTrait()) {
-    // We mark reanimated commits with ReanimatedMountTrait. We don't want other
-    // shadow nodes to use this trait, but since this rootShadowNode is Shared,
-    // we don't have that guarantee. That's why we also unset this trait in the
-    // commit hook. We remove it here mainly for the sake of cleanliness.
+  // We mark reanimated commits with ReanimatedMountTrait. We don't want other
+  // shadow nodes to use this trait, but since this rootShadowNode is Shared,
+  // we don't have that guarantee. That's why we also unset this trait in the
+  // commit hook. We remove it here mainly for the sake of cleanliness.
+  const bool isReanimatedMount = reaShadowNode->hasReanimatedMountTrait();
+  if (isReanimatedMount) {
     reaShadowNode->unsetReanimatedMountTrait();
-    return;
   }
 
   {
     auto lock = updatesRegistryManager_->lock();
+    // Record the mounted tree for relative-length resolution.
+    viewStylesRepository_->setLastMountedRoot(rootShadowNode);
+
+    // Always drain removable nodes, even on Reanimated's own commits. While CSS
+    // animations run every mount carries the mount trait, so returning early here
+    // would skip removals for the whole animation and leak unmounted nodes if the
+    // tree is torn down mid-animation.
     updatesRegistryManager_->handleNodeRemovals(*rootShadowNode);
 
-    // When commit from React Native has finished, we reset the skip commit flag
-    // in order to allow Reanimated to commit its tree
-    updatesRegistryManager_->unpauseReanimatedCommits();
-    if (updatesRegistryManager_->shouldCommitAfterPause()) {
-      requestFlush_();
+    if (!isReanimatedMount) {
+      // When a commit from React Native has finished, we reset the skip commit
+      // flag in order to allow Reanimated to commit its tree.
+      updatesRegistryManager_->unpauseReanimatedCommits();
+      if (updatesRegistryManager_->shouldCommitAfterPause()) {
+        requestFlush_();
+      }
     }
   }
 }

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Fabric/ReanimatedMountHook.h

@@ -1,5 +1,6 @@
 #pragma once
 
+#include <reanimated/CSS/misc/ViewStylesRepository.h>
 #include <reanimated/Fabric/ShadowTreeCloner.h>
 #include <reanimated/Fabric/updates/UpdatesRegistryManager.h>
 
@@ -16,21 +17,16 @@ class ReanimatedMountHook : public UIManagerMountHook {
   ReanimatedMountHook(
       const std::shared_ptr<UIManager> &uiManager,
       const std::shared_ptr<UpdatesRegistryManager> &updatesRegistryManager,
+      const std::shared_ptr<css::ViewStylesRepository> &viewStylesRepository,
       const std::function<void()> &requestFlush);
   ~ReanimatedMountHook() noexcept override;
 
-  void shadowTreeDidMount(
-      RootShadowNode::Shared const &rootShadowNode,
-#if REACT_NATIVE_MINOR_VERSION >= 81
-      HighResTimeStamp mountTime
-#else
-      double mountTime
-#endif // REACT_NATIVE_MINOR_VERSION >= 81
-      ) noexcept override;
+  void shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, HighResTimeStamp mountTime) noexcept override;
 
  private:
   const std::shared_ptr<UIManager> uiManager_;
   const std::shared_ptr<UpdatesRegistryManager> updatesRegistryManager_;
+  const std::shared_ptr<css::ViewStylesRepository> viewStylesRepository_;
   const std::function<void()> requestFlush_;
 };