Prepare platform transition routing for more properties

Author: MatiPl01

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSColor.cpp

@@ -1,5 +1,6 @@
 #include <reanimated/CSS/common/values/CSSColor.h>
 #include <reanimated/CSS/svg/values/SVGBrush.h>
+#include <reanimated/CSS/utils/props.h>
 
 #include <utility>
 
@@ -17,24 +18,7 @@ CSSColorBase<TColorType, TDerived>::CSSColorBase(TColorType colorType) : channel
 
 template <ColorTypeEnum TColorType, typename TDerived>
 CSSColorBase<TColorType, TDerived>::CSSColorBase(int64_t numberValue)
-    : channels{0, 0, 0, 0}, colorType(TColorType::Rgba) {
-  uint32_t color;
-  // On Android, colors are represented as signed 32-bit integers. In JS, we use
-  // a bitwise operation (normalizedColor = normalizedColor | 0x0) to ensure the
-  // value is treated as a signed int, causing numbers above 2^31 to become
-  // negative. To correctly interpret these in C++, we cast negative values to
-  // int32_t to preserve their bit pattern, then assign to uint32_t. This wraps
-  // the bits (modulo 2^32), effectively reversing the JS-side bit shift.
-  if (numberValue < 0) {
-    color = static_cast<int32_t>(numberValue);
-  } else {
-    color = static_cast<uint32_t>(numberValue);
-  }
-  channels[0] = (color >> 16) & 0xFF; // Red
-  channels[1] = (color >> 8) & 0xFF; // Green
-  channels[2] = color & 0xFF; // Blue
-  channels[3] = (color >> 24) & 0xFF; // Alpha
-}
+    : channels(extractColorChannels(numberValue)), colorType(TColorType::Rgba) {}
 
 template <ColorTypeEnum TColorType, typename TDerived>
 CSSColorBase<TColorType, TDerived>::CSSColorBase(bool value)

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSPlatformTransition.cpp

@@ -12,22 +12,22 @@ CSSPlatformTransition::CSSPlatformTransition(
     const std::shared_ptr<CSSPlatformTransitionProxy> &proxy)
     : viewTag_(viewTag), proxy_(proxy) {}
 
-void CSSPlatformTransition::run(jsi::Runtime &rt, const CSSPlatformTransitionConfig &config, const double timestamp) {
+void CSSPlatformTransition::run(const CSSPlatformTransitionConfig &config, const double timestamp) {
   for (const auto &entry : config.changedProperties) {
-    runEntry(rt, entry, timestamp);
+    applyEntry(entry.propertyName, entry.fromValue, entry.toValue, entry.settings, timestamp);
   }
 
   for (const auto &propertyName : config.removedProperties) {
     cancel(propertyName);
   }
 }
 
-void CSSPlatformTransition::run(const PropertyValueDynamicDiffsMap &propertiesDiffs, const double timestamp) {
+void CSSPlatformTransition::run(const ParsedPlatformDiffs &propertiesDiffs, const double timestamp) {
   for (const auto &[propertyName, propertyDiff] : propertiesDiffs) {
+    // The routing layer only sends properties registered here, so missing
+    // settings are an invariant violation.
     const auto &settings = settings_.at(propertyName);
-    auto fromValue = parsePlatformValue(propertyName, propertyDiff.first);
-    auto toValue = parsePlatformValue(propertyName, propertyDiff.second);
-    applyEntry(propertyName, fromValue, toValue, settings, timestamp);
+    applyEntry(propertyName, propertyDiff.first, propertyDiff.second, settings, timestamp);
   }
 }
 
@@ -42,17 +42,6 @@ void CSSPlatformTransition::updateSettings(
   }
 }
 
-void CSSPlatformTransition::runEntry(
-    jsi::Runtime &rt,
-    const CSSPlatformTransitionRawEntry &entry,
-    const double timestamp) {
-  // null/undefined endpoints are resolved to the property's default inside
-  // parsePlatformValue; type mismatches and unsupported properties throw.
-  auto fromValue = parsePlatformValue(rt, entry.propertyName, entry.valueDiff.first);
-  auto toValue = parsePlatformValue(rt, entry.propertyName, entry.valueDiff.second);
-  applyEntry(entry.propertyName, fromValue, toValue, entry.settings, timestamp);
-}
-
 void CSSPlatformTransition::applyEntry(
     const std::string &propertyName,
     PlatformValue fromValue,

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSPlatformTransition.h

@@ -1,10 +1,8 @@
 #pragma once
 
 #include <reanimated/CSS/core/transition/CSSPlatformTransitionProxy.h>
-#include <reanimated/CSS/utils/platform.h>
 #include <reanimated/CSS/utils/reversingShortening.h>
 
-#include <jsi/jsi.h>
 #include <react/renderer/core/ReactPrimitives.h>
 
 #include <memory>
@@ -23,9 +21,8 @@ class CSSPlatformTransition {
 
   CSSPlatformTransition(const CSSPlatformTransition &) = delete;
 
-  void run(jsi::Runtime &rt, const CSSPlatformTransitionConfig &config, double timestamp);
-  /** TODO: unify folly::dynamic and jsi::value versions */
-  void run(const PropertyValueDynamicDiffsMap &propertiesDiffs, double timestamp);
+  void run(const CSSPlatformTransitionConfig &config, double timestamp);
+  void run(const ParsedPlatformDiffs &propertiesDiffs, double timestamp);
 
   void updateSettings(
       const PropertiesSettingsMap &changedPropertiesSettings,
@@ -41,7 +38,6 @@ class CSSPlatformTransition {
     ReversingState previous;
   };
 
-  void runEntry(jsi::Runtime &rt, const CSSPlatformTransitionRawEntry &entry, double timestamp);
   void applyEntry(
       const std::string &propertyName,
       PlatformValue fromValue,

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSPlatformTransitionProxy.cpp

@@ -1,27 +1,69 @@
 #include <reanimated/CSS/core/transition/CSSPlatformTransitionProxy.h>
-#include <reanimated/Tools/FeatureFlags.h>
 
 #include <react/debug/react_native_assert.h>
 
 #include <utility>
 
 namespace reanimated::css {
 
+namespace {
+
+// Reduces a jsi::Value transition endpoint to the representation-agnostic shape
+// the platform parses (a number, a size, or monostate for null / absent).
+CSSEndpointValue endpointFromJSI(jsi::Runtime &rt, const jsi::Value &value) {
+  if (value.isNumber()) {
+    return value.asNumber();
+  }
+  if (value.isObject()) {
+    const auto object = value.asObject(rt);
+    const auto width = object.getProperty(rt, "width");
+    const auto height = object.getProperty(rt, "height");
+    return std::array<double, 2>{
+        width.isNumber() ? width.asNumber() : 0.0,
+        height.isNumber() ? height.asNumber() : 0.0,
+    };
+  }
+  return std::monostate{};
+}
+
+// The same reduction for the runtime-free pseudo-selector toggle path.
+CSSEndpointValue endpointFromDynamic(const folly::dynamic &value) {
+  if (value.isNumber()) {
+    return value.asDouble();
+  }
+  if (value.isObject()) {
+    const auto *width = value.get_ptr("width");
+    const auto *height = value.get_ptr("height");
+    return std::array<double, 2>{
+        width != nullptr && width->isNumber() ? width->asDouble() : 0.0,
+        height != nullptr && height->isNumber() ? height->asDouble() : 0.0,
+    };
+  }
+  return std::monostate{};
+}
+
+} // namespace
+
 CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
     CSSCanRoutePropertyFunction canRoute,
+    CSSParseValueFunction parseValue,
     CSSApplyTransitionFunction applyTransition,
     CSSRemoveTransitionFunction removeTransition)
     : canRoute_(std::move(canRoute)),
+      parseValue_(std::move(parseValue)),
       applyTransition_(std::move(applyTransition)),
       removeTransition_(std::move(removeTransition)) {}
 
 bool CSSPlatformTransitionProxy::canRoute(const std::string &propertyName, const EasingConfig &easing) const {
-  if constexpr (!StaticFeatureFlags::getFlag("IOS_CSS_CORE_ANIMATION")) {
-    return false;
-  }
   return canRoute_ && canRoute_(propertyName, easing);
 }
 
+std::optional<PlatformValue> CSSPlatformTransitionProxy::parseValue(
+    const std::string &propertyName,
+    const CSSEndpointValue &value) const {
+  return parseValue_ ? parseValue_(propertyName, value) : std::nullopt;
+}
+
 void CSSPlatformTransitionProxy::run(const CSSPlatformTransitionPropertyConfig &config) const {
   if (applyTransition_) {
     applyTransition_(config);
@@ -34,35 +76,42 @@ void CSSPlatformTransitionProxy::remove(const Tag viewTag, const std::string &pr
   }
 }
 
-// Splits the new split-shape config into loop / platform buckets. result.routing
-// starts as a copy of the previous call's routing and is updated as we route
-// each prop; erasing from the *other* side's set returns nonzero exactly when
-// the prop is migrating sides - that's how we emit cancels.
+// Erasing from the other side's routing set returns nonzero exactly when the
+// property migrates sides - that's when the old side gets a cancel.
 CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processConfig(
+    jsi::Runtime &rt,
     CSSTransitionConfig &&config,
     const CSSTransitionRouting &previousRouting) const {
   ProcessedConfig result;
   result.routing = previousRouting;
 
-  // Drain changedPropertiesSettings; for each, decide routing and bucket.
-  // extract() preserves move-only PropertyValueDiff (jsi::Value pair).
+  // extract() preserves the move-only jsi::Value diffs.
   while (!config.changedPropertiesSettings.empty()) {
     auto settingsNode = config.changedPropertiesSettings.extract(config.changedPropertiesSettings.begin());
     const auto &propertyName = settingsNode.key();
     const auto &settings = settingsNode.mapped();
     const auto valueIt = config.changedProperties.find(propertyName);
 
-    if (canRoute(propertyName, settings.easingConfig)) {
+    bool routable = canRoute(propertyName, settings.easingConfig);
+    std::optional<PlatformValue> fromValue;
+    std::optional<PlatformValue> toValue;
+    if (routable && valueIt != config.changedProperties.end()) {
+      fromValue = parseValue(propertyName, endpointFromJSI(rt, valueIt->second.first));
+      toValue = parseValue(propertyName, endpointFromJSI(rt, valueIt->second.second));
+      routable = fromValue.has_value() && toValue.has_value();
+    }
+
+    if (routable) {
       // loop -> platform migration: cancel on loop.
       if (result.routing.loop.erase(propertyName) > 0) {
         result.loop.removedProperties.push_back(propertyName);
       }
       result.routing.platform.insert(propertyName);
 
       if (valueIt != config.changedProperties.end()) {
-        auto valueNode = config.changedProperties.extract(valueIt);
+        config.changedProperties.erase(valueIt);
         result.platform.changedProperties.push_back(
-            CSSPlatformTransitionRawEntry{propertyName, std::move(valueNode.mapped()), settings});
+            CSSPlatformTransitionEntry{propertyName, *fromValue, *toValue, settings});
       }
       result.platform.changedPropertiesSettings.insert(std::move(settingsNode));
     } else {
@@ -84,8 +133,7 @@ CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processC
   // have consumed all of changedProperties.
   react_native_assert(config.changedProperties.empty() && "[Reanimated] CSS transition value diff without settings");
 
-  // Props JS asked to stop transitioning: look up the owning side in routing
-  // and forward the cancel there.
+  // Forward removal cancels to the side that owns the property.
   for (auto &propertyName : config.removedProperties) {
     if (result.routing.platform.erase(propertyName) > 0) {
       result.platform.removedProperties.push_back(std::move(propertyName));
@@ -97,4 +145,25 @@ CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processC
   return result;
 }
 
+CSSPlatformTransitionProxy::ProcessedDynamicDiffs CSSPlatformTransitionProxy::processDynamicDiffs(
+    const CSSTransitionRouting &routing,
+    const PropertyValueDynamicDiffsMap &propertyDiffs) const {
+  ProcessedDynamicDiffs result;
+  for (const auto &[propertyName, propertyDiff] : propertyDiffs) {
+    // The routing was decided when the transition was registered; here we only
+    // re-parse the toggled endpoints. Values the platform cannot express fall
+    // back to the loop.
+    if (routing.platform.contains(propertyName)) {
+      auto fromValue = parseValue(propertyName, endpointFromDynamic(propertyDiff.first));
+      auto toValue = parseValue(propertyName, endpointFromDynamic(propertyDiff.second));
+      if (fromValue && toValue) {
+        result.platform.emplace(propertyName, std::make_pair(*fromValue, *toValue));
+        continue;
+      }
+    }
+    result.loop.emplace(propertyName, propertyDiff);
+  }
+  return result;
+}
+
 } // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSPlatformTransitionProxy.h

@@ -3,21 +3,42 @@
 #include <reanimated/CSS/common/definitions.h>
 #include <reanimated/CSS/configs/CSSTransitionConfig.h>
 #include <reanimated/CSS/easing/EasingConfigs.h>
-#include <reanimated/CSS/utils/platform.h>
 
+#include <folly/dynamic.h>
 #include <jsi/jsi.h>
 #include <react/renderer/core/ReactPrimitives.h>
 
+#include <array>
 #include <functional>
+#include <optional>
 #include <string>
+#include <unordered_map>
+#include <utility>
+#include <variant>
 #include <vector>
 
+// PlatformValue is platform-defined: each platform sets the value shapes it can
+// animate natively; shared code only stores and moves values from parse hooks.
+#ifdef __APPLE__
+#include <reanimated/apple/CSS/REACSSPlatformValue.h>
+#endif
+
 namespace reanimated::css {
 
 using namespace facebook;
 using namespace react;
 
-// Fully-parsed property config handed to the platform-side apply callback.
+#ifndef __APPLE__
+using PlatformValue = std::monostate;
+#endif
+
+using ParsedPlatformDiffs = std::unordered_map<std::string, std::pair<PlatformValue, PlatformValue>>;
+
+/// A transition endpoint reduced to the shapes platform parsing recognizes,
+/// extracted from a jsi::Value or a folly::dynamic into one representation.
+/// monostate is a null or absent endpoint, resolved to the property's default.
+using CSSEndpointValue = std::variant<std::monostate, double, std::array<double, 2>>;
+
 struct CSSPlatformTransitionPropertyConfig {
   Tag viewTag;
   std::string propertyName;
@@ -28,26 +49,30 @@ struct CSSPlatformTransitionPropertyConfig {
   EasingConfig easing;
 };
 
-// Raw entry the proxy hands off to CSSPlatformTransition before any value
-// parsing happens. Carries the original jsi value pair + timing settings so
-// the platform side can convert lazily and inspect both from/to if needed.
-struct CSSPlatformTransitionRawEntry {
+struct CSSPlatformTransitionEntry {
   std::string propertyName;
-  PropertyValueDiff valueDiff;
+  PlatformValue fromValue;
+  PlatformValue toValue;
   CSSTransitionPropertySettings settings;
 };
 
 struct CSSPlatformTransitionConfig {
   PropertiesSettingsMap changedPropertiesSettings;
-  std::vector<CSSPlatformTransitionRawEntry> changedProperties;
+  std::vector<CSSPlatformTransitionEntry> changedProperties;
   std::vector<std::string> removedProperties;
 
   bool empty() const {
     return changedPropertiesSettings.empty() && changedProperties.empty() && removedProperties.empty();
   }
 };
 
+/// Whether the platform can animate the property natively for the given easing.
 using CSSCanRoutePropertyFunction = std::function<bool(const std::string &propertyName, const EasingConfig &easing)>;
+/// Parses an extracted endpoint into the platform's value representation. An
+/// empty endpoint resolves to the property's CSS default; nullopt means the
+/// value is not expressible natively and the property runs on the loop.
+using CSSParseValueFunction =
+    std::function<std::optional<PlatformValue>(const std::string &propertyName, const CSSEndpointValue &value)>;
 using CSSApplyTransitionFunction = std::function<void(const CSSPlatformTransitionPropertyConfig &config)>;
 using CSSRemoveTransitionFunction = std::function<void(Tag viewTag, const std::string &propertyName)>;
 
@@ -64,24 +89,39 @@ class CSSPlatformTransitionProxy {
     CSSTransitionRouting routing;
   };
 
+  struct ProcessedDynamicDiffs {
+    PropertyValueDynamicDiffsMap loop;
+    ParsedPlatformDiffs platform;
+  };
+
   CSSPlatformTransitionProxy(
       CSSCanRoutePropertyFunction canRoute,
+      CSSParseValueFunction parseValue,
       CSSApplyTransitionFunction applyTransition,
       CSSRemoveTransitionFunction removeTransition);
 
   void run(const CSSPlatformTransitionPropertyConfig &config) const;
   void remove(Tag viewTag, const std::string &propertyName) const;
 
-  // Filters the incoming config into loop / platform buckets and emits implicit
-  // cancels on the old side when a property migrates compared to previousRouting.
-  // The platform side does its own value parsing inside CSSPlatformTransition::run -
-  // the proxy only forwards the raw jsi value pair via the raw entry.
-  ProcessedConfig processConfig(CSSTransitionConfig &&config, const CSSTransitionRouting &previousRouting) const;
+  /// Filters the config into loop / platform buckets, emitting implicit cancels
+  /// on the old side when a property migrates vs previousRouting. A property
+  /// routes to the platform only when canRoute holds and both endpoints parse.
+  ProcessedConfig
+  processConfig(jsi::Runtime &rt, CSSTransitionConfig &&config, const CSSTransitionRouting &previousRouting) const;
+
+  /// Splits already-routed pseudo-selector toggle diffs into loop / platform
+  /// buckets, parsing the platform endpoints; values the platform cannot
+  /// express fall back to the loop.
+  ProcessedDynamicDiffs processDynamicDiffs(
+      const CSSTransitionRouting &routing,
+      const PropertyValueDynamicDiffsMap &propertyDiffs) const;
 
  private:
   bool canRoute(const std::string &propertyName, const EasingConfig &easing) const;
+  std::optional<PlatformValue> parseValue(const std::string &propertyName, const CSSEndpointValue &value) const;
 
   CSSCanRoutePropertyFunction canRoute_;
+  CSSParseValueFunction parseValue_;
   CSSApplyTransitionFunction applyTransition_;
   CSSRemoveTransitionFunction removeTransition_;
 };