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

@@ -4,7 +4,6 @@
 #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 +22,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 +39,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,5 +1,5 @@
 #include <reanimated/CSS/core/transition/CSSPlatformTransitionProxy.h>
-#include <reanimated/Tools/FeatureFlags.h>
+#include <reanimated/CSS/utils/CSSTransitionRouting.h>
 
 #include <react/debug/react_native_assert.h>
 
@@ -8,19 +8,9 @@
 namespace reanimated::css {
 
 CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
-    CSSCanRoutePropertyFunction canRoute,
     CSSApplyTransitionFunction applyTransition,
     CSSRemoveTransitionFunction removeTransition)
-    : canRoute_(std::move(canRoute)),
-      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);
-}
+    : applyTransition_(std::move(applyTransition)), removeTransition_(std::move(removeTransition)) {}
 
 void CSSPlatformTransitionProxy::run(const CSSPlatformTransitionPropertyConfig &config) const {
   if (applyTransition_) {
@@ -34,35 +24,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 = canRouteCSSProperty(propertyName, settings.easingConfig);
+    std::optional<PlatformValue> fromValue;
+    std::optional<PlatformValue> toValue;
+    if (routable && valueIt != config.changedProperties.end()) {
+      fromValue = parsePlatformValue(rt, propertyName, valueIt->second.first);
+      toValue = parsePlatformValue(rt, propertyName, 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 +81,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));

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

@@ -17,7 +17,6 @@ namespace reanimated::css {
 using namespace facebook;
 using namespace react;
 
-// Fully-parsed property config handed to the platform-side apply callback.
 struct CSSPlatformTransitionPropertyConfig {
   Tag viewTag;
   std::string propertyName;
@@ -28,26 +27,23 @@ 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();
   }
 };
 
-using CSSCanRoutePropertyFunction = std::function<bool(const std::string &propertyName, const EasingConfig &easing)>;
 using CSSApplyTransitionFunction = std::function<void(const CSSPlatformTransitionPropertyConfig &config)>;
 using CSSRemoveTransitionFunction = std::function<void(Tag viewTag, const std::string &propertyName)>;
 
@@ -64,24 +60,19 @@ class CSSPlatformTransitionProxy {
     CSSTransitionRouting routing;
   };
 
-  CSSPlatformTransitionProxy(
-      CSSCanRoutePropertyFunction canRoute,
-      CSSApplyTransitionFunction applyTransition,
-      CSSRemoveTransitionFunction removeTransition);
+  CSSPlatformTransitionProxy(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;
+  // A property routes to the platform only when the platform declares it routable
+  // and both endpoint values parse to platform values.
+  ProcessedConfig
+  processConfig(jsi::Runtime &rt, CSSTransitionConfig &&config, const CSSTransitionRouting &previousRouting) const;
 
  private:
-  bool canRoute(const std::string &propertyName, const EasingConfig &easing) const;
-
-  CSSCanRoutePropertyFunction canRoute_;
   CSSApplyTransitionFunction applyTransition_;
   CSSRemoveTransitionFunction removeTransition_;
 };

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

@@ -36,16 +36,14 @@ TransitionProperties CSSTransition::getProperties() const {
 folly::dynamic CSSTransition::run(jsi::Runtime &rt, CSSTransitionConfig &&config, const folly::dynamic &lastUpdates) {
   const auto timestamp = loop_->resolveTimestamp();
 
-  // CSSTransition owns routing: platform-routed props run immediately on the platform
-  // transition; the loop-routed remainder is applied to the loop transition below.
-  auto processed = platformTransitionProxy_->processConfig(std::move(config), routing_);
+  auto processed = platformTransitionProxy_->processConfig(rt, std::move(config), routing_);
   routing_ = std::move(processed.routing);
 
   if (!processed.platform.empty()) {
     auto &platformTransition = ensurePlatformTransition();
     platformTransition.updateSettings(
         processed.platform.changedPropertiesSettings, processed.platform.removedProperties);
-    platformTransition.run(rt, processed.platform, timestamp);
+    platformTransition.run(processed.platform, timestamp);
   }
 
   const auto &loopConfig = processed.loop;
@@ -72,13 +70,18 @@ folly::dynamic CSSTransition::run(
   const auto timestamp = loop_->resolveTimestamp();
 
   PropertyValueDynamicDiffsMap loopDiffs;
-  PropertyValueDynamicDiffsMap platformDiffs;
+  ParsedPlatformDiffs platformDiffs;
   for (const auto &[propertyName, propertyDiff] : propertyDiffs) {
+    // Values the platform cannot express fall back to the loop.
     if (routing_.platform.contains(propertyName)) {
-      platformDiffs.emplace(propertyName, propertyDiff);
-    } else {
-      loopDiffs.emplace(propertyName, propertyDiff);
+      auto fromValue = parsePlatformValue(propertyName, propertyDiff.first);
+      auto toValue = parsePlatformValue(propertyName, propertyDiff.second);
+      if (fromValue && toValue) {
+        platformDiffs.emplace(propertyName, std::make_pair(*fromValue, *toValue));
+        continue;
+      }
     }
+    loopDiffs.emplace(propertyName, propertyDiff);
   }
 
   if (!platformDiffs.empty()) {

packages/react-native-reanimated/Common/cpp/reanimated/CSS/utils/CSSTransitionRouting.cpp

@@ -0,0 +1,14 @@
+#include <reanimated/CSS/utils/CSSTransitionRouting.h>
+
+#ifndef __APPLE__
+
+// Platforms without native transition support route everything to the loop.
+namespace reanimated::css {
+
+bool canRouteCSSProperty(const std::string & /*propertyName*/, const EasingConfig & /*easing*/) {
+  return false;
+}
+
+} // namespace reanimated::css
+
+#endif

packages/react-native-reanimated/Common/cpp/reanimated/CSS/utils/CSSTransitionRouting.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <reanimated/CSS/easing/EasingConfigs.h>
+
+#include <string>
+
+namespace reanimated::css {
+
+// Routing predicate for platform-driven CSS transitions: whether the platform
+// can animate the property natively for the given easing. Declared here and
+// implemented per platform (iOS in REACSSTransitionRouting.mm; the non-platform
+// stub in CSSTransitionRouting.cpp routes everything to the loop).
+bool canRouteCSSProperty(const std::string &propertyName, const EasingConfig &easing);
+
+} // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/utils/platform.cpp

@@ -1,42 +1,21 @@
 #include <reanimated/CSS/utils/platform.h>
 
-#include <unordered_map>
+#ifndef __APPLE__
 
+// Platforms without native transition support route everything to the loop.
 namespace reanimated::css {
 
-namespace {
-
-// CSS-spec defaults; mirror Common/cpp/reanimated/CSS/InterpolatorRegistry.cpp.
-const std::unordered_map<std::string, PlatformValue> kDefaults = {
-    {"opacity", 1.0},
-};
-
-PlatformValue parseDouble(const jsi::Value &value) {
-  return value.isNumber() ? PlatformValue(value.asNumber()) : PlatformValue{};
-}
-
-} // namespace
-
-PlatformValue parsePlatformValue(jsi::Runtime &rt, const std::string &propertyName, const jsi::Value &value) {
-  if (value.isNull() || value.isUndefined()) {
-    const auto it = kDefaults.find(propertyName);
-    return it != kDefaults.end() ? it->second : PlatformValue{};
-  }
-  if (propertyName == "opacity") {
-    return parseDouble(value);
-  }
-  return PlatformValue{};
+std::optional<PlatformValue>
+parsePlatformValue(jsi::Runtime & /*rt*/, const std::string & /*propertyName*/, const jsi::Value & /*value*/) {
+  return std::nullopt;
 }
 
-PlatformValue parsePlatformValue(const std::string &propertyName, const folly::dynamic &value) {
-  if (value.isNull()) {
-    const auto it = kDefaults.find(propertyName);
-    return it != kDefaults.end() ? it->second : PlatformValue{};
-  }
-  if (propertyName == "opacity") {
-    return value.isNumber() ? PlatformValue(value.asDouble()) : PlatformValue{};
-  }
-  return PlatformValue{};
+std::optional<PlatformValue> parsePlatformValue(
+    const std::string & /*propertyName*/,
+    const folly::dynamic & /*value*/) {
+  return std::nullopt;
 }
 
 } // namespace reanimated::css
+
+#endif