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,73 @@
 #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 (number / size / null).
+CSSPropertyValue endpointFromJSI(jsi::Runtime &rt, const jsi::Value &value) {
+  CSSPropertyValue result;
+  if (value.isNull() || value.isUndefined()) {
+    result.isNull = true;
+  } else if (value.isNumber()) {
+    result.number = value.asNumber();
+  } else if (value.isObject()) {
+    const auto object = value.asObject(rt);
+    const auto width = object.getProperty(rt, "width");
+    const auto height = object.getProperty(rt, "height");
+    result.size = std::array<double, 2>{
+        width.isNumber() ? width.asNumber() : 0.0,
+        height.isNumber() ? height.asNumber() : 0.0,
+    };
+  }
+  return result;
+}
+
+// The same reduction for the runtime-free pseudo-selector toggle path.
+CSSPropertyValue endpointFromDynamic(const folly::dynamic &value) {
+  CSSPropertyValue result;
+  if (value.isNull()) {
+    result.isNull = true;
+  } else if (value.isNumber()) {
+    result.number = value.asDouble();
+  } else if (value.isObject()) {
+    const auto *width = value.get_ptr("width");
+    const auto *height = value.get_ptr("height");
+    result.size = std::array<double, 2>{
+        width != nullptr && width->isNumber() ? width->asDouble() : 0.0,
+        height != nullptr && height->isNumber() ? height->asDouble() : 0.0,
+    };
+  }
+  return result;
+}
+
+} // 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 CSSPropertyValue &value) const {
+  return parseValue_ ? parseValue_(propertyName, value) : std::nullopt;
+}
+
 void CSSPlatformTransitionProxy::run(const CSSPlatformTransitionPropertyConfig &config) const {
   if (applyTransition_) {
     applyTransition_(config);
@@ -34,35 +80,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 +137,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 +149,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