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

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Tools/ReanimatedVersion.cpp

@@ -1,8 +1,8 @@
 #include <reanimated/Tools/ReanimatedVersion.h>
-#include <worklets/Tools/JSLogger.h>
-#include <worklets/Tools/VersionUtils.h>
 
-#include <memory>
+#ifndef NDEBUG
+#include <regex>
+#endif // NDEBUG
 #include <string>
 
 #ifdef REANIMATED_VERSION
@@ -25,19 +25,56 @@ void injectReanimatedCppVersion(jsi::Runtime &rnRuntime) {
 }
 
 #ifndef NDEBUG
-void checkJSVersion(jsi::Runtime &rnRuntime, const std::shared_ptr<worklets::JSLogger> &jsLogger) {
-  auto cppVersion = getReanimatedCppVersion();
-  auto jsVersionValue = rnRuntime.global().getProperty(rnRuntime, "_REANIMATED_VERSION_JS");
-  worklets::checkJSVersion(
-      rnRuntime,
-      jsVersionValue,
-      jsLogger,
-      cppVersion,
-      "Reanimated",
-      "https://docs.swmansion.com/react-native-reanimated/");
+bool matchVersion(const std::string &version1, const std::string &version2) {
+  std::regex pattern("^(\\d+)\\.(\\d+)\\.\\d+$");
+  std::smatch mv1;
+  std::smatch mv2;
+  if (std::regex_match(version1, mv1, pattern) && std::regex_match(version2, mv2, pattern)) {
+    return mv1[1].str() == mv2[1].str() && mv1[2].str() == mv2[2].str();
+  } else {
+    return version1 == version2;
+  }
+}
+
+void checkJSVersion(jsi::Runtime &rt) {
+  const auto cppVersion = getReanimatedCppVersion();
+  const auto jsVersionValue = rt.global().getProperty(rt, "_REANIMATED_VERSION_JS");
+  const auto docsBaseUrl = "https://docs.swmansion.com/react-native-reanimated/";
+  const auto consoleWarn = rt.global().getPropertyAsObject(rt, "console").getPropertyAsFunction(rt, "warn");
+  const auto libraryPrefix = std::string("[Reanimated] ");
+
+  if (jsVersionValue.isUndefined()) {
+    consoleWarn.call(
+        rt,
+        std::string(
+            libraryPrefix +
+            "C++ side failed to resolve JavaScript code "
+            "version\n") +
+            "See " + docsBaseUrl +
+            "guides/"
+            "troubleshooting#c-side-failed-to-resolve-javascript-code-version for "
+            "more details.");
+    return;
+  }
+
+  const auto jsVersion = jsVersionValue.asString(rt).utf8(rt);
+
+  if (!matchVersion(cppVersion, jsVersion)) {
+    consoleWarn.call(
+        rt,
+        std::string(
+            libraryPrefix +
+            "Mismatch between C++ code version and "
+            "JavaScript code version (") +
+            cppVersion + " vs. " + jsVersion + " respectively).\n" + "See " + docsBaseUrl +
+            "/guides/"
+            "troubleshooting#mismatch-between-c-code-version-and-javascript-code-"
+            "version` for more details.");
+    return;
+  }
 }
 #else
-void checkJSVersion(jsi::Runtime &rnRuntime, const std::shared_ptr<worklets::JSLogger> &jsLogger) {
+void checkJSVersion(jsi::Runtime &rt) {
   // In release builds we don't check the version, hence
   // this function is a NOOP.
 }

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Tools/ReanimatedVersion.h

@@ -1,10 +1,7 @@
 #pragma once
 
-#include <worklets/Tools/JSLogger.h>
-
 #include <jsi/jsi.h>
 
-#include <memory>
 #include <string>
 
 using namespace facebook;
@@ -12,7 +9,7 @@ using namespace facebook;
 namespace reanimated {
 
 std::string getReanimatedCppVersion();
-void injectReanimatedCppVersion(jsi::Runtime &);
-void checkJSVersion(jsi::Runtime &, const std::shared_ptr<worklets::JSLogger> &);
+void injectReanimatedCppVersion(jsi::Runtime &rt);
+void checkJSVersion(jsi::Runtime &rt);
 
 }; // namespace reanimated

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Tools/SingleInstanceChecker.h

@@ -0,0 +1,76 @@
+#pragma once
+
+#ifndef NDEBUG
+
+#include <react/debug/react_native_assert.h>
+
+#include <cxxabi.h>
+
+#include <atomic>
+#include <cassert>
+#include <cstdlib>
+#include <string>
+
+#ifdef ANDROID
+#include <android/log.h>
+#else
+#include <iostream>
+#endif
+
+namespace reanimated {
+
+// This is a class that counts how many instances of a different class there
+// are. It is meant only to be used with classes that should only have one
+// instance.
+
+template <class T>
+class SingleInstanceChecker {
+ public:
+  SingleInstanceChecker();
+  ~SingleInstanceChecker();
+
+ private:
+  void assertWithMessage(bool condition, const std::string &message) {
+    if (!condition) {
+#ifdef ANDROID
+      __android_log_print(ANDROID_LOG_WARN, "Reanimated", "%s", message.c_str());
+#else
+      std::cerr << "[Reanimated] " << message << std::endl;
+#endif
+
+#ifdef IS_REANIMATED_EXAMPLE_APP
+      react_native_assert(false && "SingleInstanceChecker failed");
+#endif
+    }
+  }
+
+  // A static field will exist separately for every class template.
+  // This has to be inline for automatic initialization.
+  inline static std::atomic<int> instanceCount_;
+};
+
+template <class T>
+SingleInstanceChecker<T>::SingleInstanceChecker() {
+  int status = 0;
+  char *demangled = __cxxabiv1::__cxa_demangle(typeid(T).name(), nullptr, nullptr, &status);
+  std::string className = (status == 0 && demangled != nullptr) ? demangled : typeid(T).name();
+  std::free(demangled);
+
+  // React Native can spawn up to two instances of a Native Module at the same
+  // time. This happens during a reload when a new instance of React Native is
+  // created while simultaneously the old one is torn down.
+  instanceCount_++;
+  assertWithMessage(
+      instanceCount_ <= 2,
+      "[Reanimated] More than two instances of " + className +
+          " present. This may indicate a memory leak due to a retain cycle.");
+}
+
+template <class T>
+SingleInstanceChecker<T>::~SingleInstanceChecker() {
+  instanceCount_--;
+}
+
+} // namespace reanimated
+
+#endif // NDEBUG

package/harmony/reanimated/src/main/cpp/OHOSCSSPlatformTransitions.cpp

@@ -0,0 +1,353 @@
+// Copyright (c) 2026 Huawei Device Co., Ltd. All rights reserved
+// Use of this source code is governed by a MIT license that can be
+// found in the LICENSE file.
+
+#include "OHOSCSSPlatformTransitions.h"
+
+#include "RNOH/ComponentInstance.h"
+#include "RNOH/RNInstance.h"
+#include "RNOH/RNInstanceCAPI.h"
+#include "RNOH/TaskExecutor/TaskExecutor.h"
+#include "RNOH/arkui/ArkUINode.h"
+#include "RNOH/arkui/NativeNodeApi.h"
+
+#include <arkui/native_animate.h>
+#include <arkui/native_interface.h>
+#include <arkui/native_node.h>
+
+#include <glog/logging.h>
+
+#include <algorithm>
+#include <array>
+#include <chrono>
+#include <cstdint>
+#include <optional>
+#include <utility>
+#include <vector>
+
+using namespace facebook;
+
+namespace reanimated::css {
+
+namespace {
+
+double wallClockMs() {
+  return std::chrono::duration<double, std::milli>(
+             std::chrono::high_resolution_clock::now().time_since_epoch())
+      .count();
+}
+
+// CSS property -> the ArkUI node attribute that renders it. The routable set
+// matches platform.cpp's OHOS whitelist (shadow* stays on the loop: ArkUI's
+// NODE_SHADOW takes only predefined style enums).
+std::optional<ArkUI_NodeAttributeType> attributeForProperty(const std::string &propertyName) {
+  static const std::unordered_map<std::string, ArkUI_NodeAttributeType> kAttributes = {
+      {"opacity", NODE_OPACITY},
+      {"backgroundColor", NODE_BACKGROUND_COLOR},
+      {"borderColor", NODE_BORDER_COLOR},
+      {"borderRadius", NODE_BORDER_RADIUS},
+      {"borderWidth", NODE_BORDER_WIDTH},
+  };
+  const auto it = kAttributes.find(propertyName);
+  return it != kAttributes.end() ? std::optional<ArkUI_NodeAttributeType>(it->second) : std::nullopt;
+}
+
+// Normalized [r,g,b,a] doubles (parsePlatformValue's Color form) -> 0xAARRGGBB,
+// the layout ArkUI color attributes take.
+uint32_t argbFromColor(const std::array<double, 4> &rgba) {
+  const auto channel = [](const double v) {
+    return static_cast<uint32_t>(std::clamp(v, 0.0, 1.0) * 255.0 + 0.5);
+  };
+  return (channel(rgba[3]) << 24) | (channel(rgba[0]) << 16) | (channel(rgba[1]) << 8) | channel(rgba[2]);
+}
+
+// The single ArkUI_NumberValue expressing this property's endpoint. A Size
+// value (array<double,2>) is not expressible — unreachable through the
+// routing gate, reported as nullopt so callers can bail out.
+struct AttributePayload {
+  ArkUI_NumberValue value;
+};
+std::optional<AttributePayload> payloadForValue(const PlatformValue &value) {
+  if (const auto *scalar = std::get_if<double>(&value)) {
+    return AttributePayload{ArkUI_NumberValue{.f32 = static_cast<float>(*scalar)}};
+  }
+  if (const auto *color = std::get_if<std::array<double, 4>>(&value)) {
+    return AttributePayload{ArkUI_NumberValue{.u32 = argbFromColor(*color)}};
+  }
+  return std::nullopt;
+}
+
+std::string describeValue(const PlatformValue &value) {
+  if (const auto *scalar = std::get_if<double>(&value)) {
+    return std::to_string(*scalar);
+  }
+  if (const auto *color = std::get_if<std::array<double, 4>>(&value)) {
+    std::string out = "#" + std::to_string(argbFromColor(*color));
+    return out;
+  }
+  return "size";
+}
+
+// Only linear and cubic-bezier reach the backend (canRouteCSSProperty gate);
+// steps / linear-stops would need per-frame interpolation on the loop.
+ArkUI_CurveHandle createCurve(const EasingConfig &easing) {
+  if (const auto *bezier = std::get_if<CubicBezierEasing>(&easing)) {
+    return OH_ArkUI_Curve_CreateCubicBezierCurve(
+        static_cast<float>(bezier->x1),
+        static_cast<float>(bezier->y1),
+        static_cast<float>(bezier->x2),
+        static_cast<float>(bezier->y2));
+  }
+  return OH_ArkUI_Curve_CreateCurveByType(ARKUI_CURVE_LINEAR);
+}
+
+// Everything the MAIN-thread animation needs; plain copies only, so the
+// closure outlives the caller-side state safely.
+struct AnimateRequest {
+  react::Tag tag;
+  std::string property;
+  ArkUI_NodeAttributeType attribute;
+  AttributePayload payload;
+  double durationMs;
+  double delayMs;
+  EasingConfig easing;
+};
+
+// Resolves the raw ArkUI node behind a view tag. Must run on MAIN (component
+// instances live there); returns nullptr for unmounted/unresolved tags.
+ArkUI_NodeHandle resolveNode(
+    const std::weak_ptr<rnoh::RNInstance> &weakInstance,
+    const react::Tag tag) {
+  const auto instance = weakInstance.lock();
+  const auto instanceCapi = std::dynamic_pointer_cast<rnoh::RNInstanceCAPI>(instance);
+  if (instanceCapi == nullptr) {
+    return nullptr;
+  }
+  const auto componentInstance = instanceCapi->findComponentInstanceByTag(tag);
+  if (componentInstance == nullptr) {
+    return nullptr;
+  }
+  return componentInstance->getLocalRootArkUINode().getArkUINodeHandle();
+}
+
+} // namespace
+
+OHOSCSSPlatformTransitions::OHOSCSSPlatformTransitions(
+    std::weak_ptr<rnoh::RNInstance> instance,
+    std::weak_ptr<rnoh::TaskExecutor> taskExecutor)
+    : instance_(std::move(instance)), taskExecutor_(std::move(taskExecutor)) {}
+
+bool OHOSCSSPlatformTransitions::applyTransitionForTag(
+    jsi::Runtime &rt,
+    const react::Tag viewTag,
+    const std::string &propertyName,
+    const jsi::Value &fromValue,
+    const jsi::Value &toValue,
+    const CSSTransitionPropertySettings &settings,
+    const double timestamp) {
+  const auto from = parsePlatformValue(rt, propertyName, fromValue);
+  const auto to = parsePlatformValue(rt, propertyName, toValue);
+  if (!from || !to || !attributeForProperty(propertyName) || !payloadForValue(*to)) {
+    return false;
+  }
+  DLOG(INFO) << "[css-route] apply tag=" << viewTag << " prop=" << propertyName
+             << " from=" << describeValue(*from) << " to=" << describeValue(*to)
+             << " duration=" << settings.duration << " delay=" << settings.delay;
+  applyForTag(viewTag, propertyName, *from, *to, settings, timestamp);
+  return true;
+}
+
+bool OHOSCSSPlatformTransitions::applyDynamicTransitionForTag(
+    const react::Tag viewTag,
+    const std::string &propertyName,
+    const folly::dynamic &fromValue,
+    const folly::dynamic &toValue,
+    const double timestamp) {
+  std::optional<CSSTransitionPropertySettings> settings;
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    const auto propertiesIt = active_.find(viewTag);
+    if (propertiesIt == active_.end()) {
+      return false;
+    }
+    const auto activeIt = propertiesIt->second.find(propertyName);
+    if (activeIt == propertiesIt->second.end()) {
+      // No config apply ran for this property, so there are no settings to reuse.
+      return false;
+    }
+    settings = activeIt->second.settings;
+  }
+  const auto from = parsePlatformValue(propertyName, fromValue);
+  const auto to = parsePlatformValue(propertyName, toValue);
+  if (!from || !to || !attributeForProperty(propertyName) || !payloadForValue(*to)) {
+    return false;
+  }
+  DLOG(INFO) << "[css-route] applyDynamic tag=" << viewTag << " prop=" << propertyName
+             << " from=" << describeValue(*from) << " to=" << describeValue(*to);
+  applyForTag(viewTag, propertyName, *from, *to, *settings, timestamp);
+  return true;
+}
+
+void OHOSCSSPlatformTransitions::removeTransitionForTag(
+    const react::Tag viewTag, const std::string &propertyName) {
+  std::optional<PlatformValue> endValue;
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    const auto propertiesIt = active_.find(viewTag);
+    if (propertiesIt != active_.end()) {
+      const auto activeIt = propertiesIt->second.find(propertyName);
+      if (activeIt != propertiesIt->second.end()) {
+        endValue = activeIt->second.adjustedEnd;
+      }
+      propertiesIt->second.erase(propertyName);
+      if (propertiesIt->second.empty()) {
+        active_.erase(propertiesIt);
+      }
+    }
+  }
+  const auto attribute = attributeForProperty(propertyName);
+  if (!endValue || !attribute) {
+    return;
+  }
+  const auto payload = payloadForValue(*endValue);
+  if (!payload) {
+    return;
+  }
+  // v1: snap the node to the recorded target value. iOS freezes the live
+  // presentation value on cancel; ArkUI has no generic presentation getter
+  // for arbitrary attributes, so the node lands on the target instead.
+  const auto weakInstance = instance_;
+  const ArkUI_NodeAttributeType attr = *attribute;
+  const AttributePayload payloadCopy = *payload;
+  const std::string property = propertyName;
+  runOnMain([weakInstance, viewTag, property, attr, payloadCopy]() {
+    const auto nodeApi = rnoh::NativeNodeApi::getInstance();
+    ArkUI_NodeHandle node = resolveNode(weakInstance, viewTag);
+    if (node == nullptr) {
+      DLOG(WARNING) << "[css-route] remove: node not found tag=" << viewTag;
+      return;
+    }
+    ArkUI_NumberValue value = payloadCopy.value;
+    const ArkUI_AttributeItem item{&value, 1, nullptr, nullptr};
+    nodeApi->setAttribute(node, attr, &item);
+    DLOG(INFO) << "[css-route] remove tag=" << viewTag << " prop=" << property
+               << " (snapped to target)";
+  });
+}
+
+void OHOSCSSPlatformTransitions::applyForTag(
+    const react::Tag viewTag,
+    const std::string &propertyName,
+    const PlatformValue &fromValue,
+    const PlatformValue &toValue,
+    const CSSTransitionPropertySettings &settings,
+    const double timestamp) {
+  const auto attribute = attributeForProperty(propertyName);
+  const auto payload = payloadForValue(toValue);
+  if (!attribute || !payload) {
+    return;
+  }
+
+  ReversingState reversing;
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    auto &properties = active_[viewTag];
+    const auto activeIt = properties.find(propertyName);
+    // Targeting the in-flight transition's start value means this is a reversal.
+    const bool isReversal =
+        activeIt != properties.end() && toValue == activeIt->second.adjustedStart;
+    if (isReversal) {
+      reversing = reverseShorten(
+          activeIt->second.reversing, timestamp, settings.duration, settings.delay, settings.easingConfig);
+      DLOG(INFO) << "[css-route] reversal tag=" << viewTag << " prop=" << propertyName
+                 << " shortened=" << reversing.duration << "ms";
+    } else {
+      reversing = makeReversingState(timestamp, settings.duration, settings.delay, settings.easingConfig);
+    }
+    properties[propertyName] = ActiveTransition{
+        isReversal ? activeIt->second.adjustedEnd : fromValue, toValue, reversing, settings};
+  }
+
+  // reversing.startTimestamp is absolute (ms); animateTo wants a relative
+  // delay. Negative delays (already-part-elapsed W3C semantics) clamp to 0 —
+  // ArkUI has no negative-delay form.
+  double delayMs = reversing.startTimestamp - wallClockMs();
+  if (delayMs < 0) {
+    delayMs = 0;
+  }
+
+  AnimateRequest request{
+      viewTag,
+      propertyName,
+      *attribute,
+      *payload,
+      std::max(0.0, reversing.duration),
+      delayMs,
+      settings.easingConfig};
+  const auto weakInstance = instance_;
+  runOnMain([weakInstance, request = std::move(request)]() {
+    ArkUI_NodeHandle node = resolveNode(weakInstance, request.tag);
+    if (node == nullptr) {
+      DLOG(WARNING) << "[css-route] animate: node not found tag=" << request.tag
+                    << " prop=" << request.property;
+      return;
+    }
+    ArkUI_ContextHandle context = OH_ArkUI_GetContextByNode(node);
+    if (context == nullptr) {
+      DLOG(WARNING) << "[css-route] animate: no UIContext tag=" << request.tag;
+      return;
+    }
+    ArkUI_NativeAnimateAPI_1 *animateApi = nullptr;
+    OH_ArkUI_GetModuleInterface(ARKUI_NATIVE_ANIMATE, ArkUI_NativeAnimateAPI_1, animateApi);
+    if (animateApi == nullptr || animateApi->animateTo == nullptr) {
+      DLOG(WARNING) << "[css-route] animate: ArkUI_NativeAnimateAPI_1 unavailable";
+      return;
+    }
+
+    ArkUI_AnimateOption *option = OH_ArkUI_AnimateOption_Create();
+    OH_ArkUI_AnimateOption_SetDuration(option, static_cast<int32_t>(request.durationMs));
+    OH_ArkUI_AnimateOption_SetDelay(option, static_cast<int32_t>(request.delayMs));
+    ArkUI_CurveHandle curve = createCurve(request.easing);
+    if (curve != nullptr) {
+      OH_ArkUI_AnimateOption_SetICurve(option, curve);
+    }
+
+    // animateTo invokes the update closure synchronously (it exists to record
+    // the end-state diff), so a stack context is safe as its userData.
+    struct UpdateCtx {
+      ArkUI_NodeHandle node;
+      ArkUI_NodeAttributeType attribute;
+      ArkUI_NumberValue value;
+    } updateCtx{node, request.attribute, request.payload.value};
+    ArkUI_ContextCallback update{
+        &updateCtx,
+        [](void *userData) {
+          const auto *ctx = static_cast<UpdateCtx *>(userData);
+          ArkUI_NumberValue value = ctx->value;
+          const ArkUI_AttributeItem item{&value, 1, nullptr, nullptr};
+          rnoh::NativeNodeApi::getInstance()->setAttribute(ctx->node, ctx->attribute, &item);
+        }};
+    const int32_t result = animateApi->animateTo(context, option, &update, nullptr);
+    OH_ArkUI_AnimateOption_Dispose(option);
+    if (curve != nullptr) {
+      OH_ArkUI_Curve_DisposeCurve(curve);
+    }
+    DLOG(INFO) << "[css-route] animateTo tag=" << request.tag << " prop=" << request.property
+               << " result=" << result << " duration=" << static_cast<int32_t>(request.durationMs)
+               << "ms delay=" << static_cast<int32_t>(request.delayMs) << "ms";
+  });
+}
+
+void OHOSCSSPlatformTransitions::runOnMain(std::function<void()> task) {
+  auto taskExecutor = taskExecutor_.lock();
+  if (!taskExecutor) {
+    return;
+  }
+  if (taskExecutor->isOnTaskThread(rnoh::TaskThread::MAIN)) {
+    task();
+  } else {
+    taskExecutor->runTask(rnoh::TaskThread::MAIN, std::move(task));
+  }
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/OHOSCSSPlatformTransitions.h

@@ -0,0 +1,95 @@
+// Copyright (c) 2026 Huawei Device Co., Ltd. All rights reserved
+// Use of this source code is governed by a MIT license that can be
+// found in the LICENSE file.
+
+#pragma once
+
+#include <reanimated/CSS/configs/CSSTransitionConfig.h>
+#include <reanimated/CSS/utils/platform.h>
+#include <reanimated/CSS/utils/reversingShortening.h>
+
+#include <folly/dynamic.h>
+#include <jsi/jsi.h>
+#include <react/renderer/core/ReactPrimitives.h>
+
+#include <functional>
+#include <memory>
+#include <mutex>
+#include <string>
+#include <unordered_map>
+
+namespace rnoh {
+class RNInstance;
+class TaskExecutor;
+} // namespace rnoh
+
+namespace reanimated::css {
+
+// Per-property state for an in-flight native transition. adjustedStart/adjustedEnd
+// and the reversing snapshot handle interruptions; settings are reused by the
+// toggle path. (Mirrors the Apple backend's ActiveTransition.)
+struct ActiveTransition {
+  PlatformValue adjustedStart;
+  PlatformValue adjustedEnd;
+  ReversingState reversing;
+  CSSTransitionPropertySettings settings;
+};
+
+/// ArkUI-backed CSS transition backend — the OHOS counterpart of Apple's
+/// REACSSPlatformTransitions. Routed properties animate via
+/// ArkUI_NativeAnimateAPI_1::animateTo on the real UI nodes (implicit
+/// attribute animation) instead of being interpolated per-frame on the
+/// reanimated loop.
+///
+/// The state map is mutex-guarded (routing can arrive from the JS thread as
+/// well as the operations loop); the ArkUI work always runs on MAIN and the
+/// posted closures only carry copies, never map references.
+class OHOSCSSPlatformTransitions {
+ public:
+  OHOSCSSPlatformTransitions(
+      std::weak_ptr<rnoh::RNInstance> instance,
+      std::weak_ptr<rnoh::TaskExecutor> taskExecutor);
+
+  /// Config path (CSSPlatformTransitionProxy's applyJSI hook). Returns false
+  /// when the platform can't express an endpoint — the proxy then falls back
+  /// to the loop for this property.
+  bool applyTransitionForTag(
+      facebook::jsi::Runtime &rt,
+      react::Tag viewTag,
+      const std::string &propertyName,
+      const facebook::jsi::Value &fromValue,
+      const facebook::jsi::Value &toValue,
+      const CSSTransitionPropertySettings &settings,
+      double timestamp);
+
+  /// Pseudo-selector toggle path: reuses the settings of the active transition.
+  bool applyDynamicTransitionForTag(
+      react::Tag viewTag,
+      const std::string &propertyName,
+      const folly::dynamic &fromValue,
+      const folly::dynamic &toValue,
+      double timestamp);
+
+  /// Cancels the property's native transition and drops its platform-side state.
+  void removeTransitionForTag(react::Tag viewTag, const std::string &propertyName);
+
+ private:
+  // Reverse-shortens against any in-flight transition (W3C reversing),
+  // records the new active state and kicks off the ArkUI animation.
+  void applyForTag(
+      react::Tag viewTag,
+      const std::string &propertyName,
+      const PlatformValue &fromValue,
+      const PlatformValue &toValue,
+      const CSSTransitionPropertySettings &settings,
+      double timestamp);
+
+  void runOnMain(std::function<void()> task);
+
+  std::unordered_map<react::Tag, std::unordered_map<std::string, ActiveTransition>> active_;
+  std::mutex mutex_;
+  std::weak_ptr<rnoh::RNInstance> instance_;
+  std::weak_ptr<rnoh::TaskExecutor> taskExecutor_;
+};
+
+} // namespace reanimated::css