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

@@ -3,6 +3,7 @@
 #include <reanimated/CSS/utils/reversingShortening.h>
 
 #include <utility>
+#include <variant>
 #include <vector>
 
 namespace reanimated::css {
@@ -24,10 +25,13 @@ void CSSPlatformTransition::run(jsi::Runtime &rt, const CSSPlatformTransitionCon
 
 void CSSPlatformTransition::run(const PropertyValueDynamicDiffsMap &propertiesDiffs, const double timestamp) {
   for (const auto &[propertyName, propertyDiff] : propertiesDiffs) {
-    const auto &settings = settings_.at(propertyName);
+    const auto settingsIt = settings_.find(propertyName);
+    if (settingsIt == settings_.end()) {
+      continue;
+    }
     auto fromValue = parsePlatformValue(propertyName, propertyDiff.first);
     auto toValue = parsePlatformValue(propertyName, propertyDiff.second);
-    applyEntry(propertyName, fromValue, toValue, settings, timestamp);
+    applyEntry(propertyName, fromValue, toValue, settingsIt->second, timestamp);
   }
 }
 
@@ -59,14 +63,21 @@ void CSSPlatformTransition::applyEntry(
     PlatformValue toValue,
     const CSSTransitionPropertySettings &settings,
     const double timestamp) {
+  // Values that failed to parse must never reach the renderer (it throws on
+  // monostate). This can happen on the dynamic-diffs path, which bypasses the
+  // value-shape routing check.
+  if (std::holds_alternative<std::monostate>(fromValue) || std::holds_alternative<std::monostate>(toValue)) {
+    return;
+  }
   const auto activeIt = activeProperties_.find(propertyName);
   auto *prev =
       activeIt != activeProperties_.end() && toValue == activeIt->second.adjustedStart ? &activeIt->second : nullptr;
   auto rs = prev ? reverseShorten(prev->previous, timestamp, settings.duration, settings.delay, settings.easingConfig)
                  : makeReversingState(timestamp, settings.duration, settings.delay, settings.easingConfig);
 
-  proxy_->run(CSSPlatformTransitionPropertyConfig{
-      viewTag_, propertyName, fromValue, toValue, rs.duration, rs.startTimestamp, settings.easingConfig});
+  proxy_->run(
+      CSSPlatformTransitionPropertyConfig{
+          viewTag_, propertyName, fromValue, toValue, rs.duration, rs.startTimestamp, settings.easingConfig});
 
   activeProperties_[propertyName] = ActiveProperty{
       prev ? prev->adjustedEnd : fromValue,

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

@@ -1,10 +1,29 @@
 #include <reanimated/CSS/core/transition/CSSPlatformTransitionProxy.h>
-#include <reanimated/Tools/FeatureFlags.h>
+#include <reanimated/CSS/utils/platform.h>
+#include <reanimated/CSS/utils/props.h>
 
+#include <unordered_set>
 #include <utility>
+#include <variant>
 
 namespace reanimated::css {
 
+namespace {
+
+// Both endpoints must be expressible as platform values; anything the parser
+// cannot convert (percent lengths, platform-specific color objects, ...) must
+// run on the loop instead.
+bool valueShapeRoutable(
+    jsi::Runtime &rt,
+    const std::string &propertyName,
+    const jsi::Value &fromValue,
+    const jsi::Value &toValue) {
+  return !std::holds_alternative<std::monostate>(parsePlatformValue(rt, propertyName, fromValue)) &&
+      !std::holds_alternative<std::monostate>(parsePlatformValue(rt, propertyName, toValue));
+}
+
+} // namespace
+
 CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
     CSSCanRoutePropertyFunction canRoute,
     CSSApplyTransitionFunction applyTransition,
@@ -14,9 +33,6 @@ CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
       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);
 }
 
@@ -37,11 +53,19 @@ void CSSPlatformTransitionProxy::remove(const Tag viewTag, const std::string &pr
 // each prop; erasing from the *other* side's set returns nonzero exactly when
 // the prop is migrating sides - that's how we emit cancels.
 CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processConfig(
+    jsi::Runtime &rt,
     CSSTransitionConfig &&config,
     const CSSTransitionRouting &previousRouting) const {
   ProcessedConfig result;
   result.routing = previousRouting;
 
+  // The sibling-aware border check below needs to see all transitioning props.
+  std::unordered_set<std::string> transitioningNames;
+  transitioningNames.reserve(config.changedPropertiesSettings.size());
+  for (const auto &entry : config.changedPropertiesSettings) {
+    transitioningNames.insert(entry.first);
+  }
+
   // Drain changedPropertiesSettings; for each, decide routing and bucket.
   // extract() preserves move-only PropertyValueDiff (jsi::Value pair).
   while (!config.changedPropertiesSettings.empty()) {
@@ -50,7 +74,14 @@ CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processC
     const auto &settings = settingsNode.mapped();
     const auto valueIt = config.changedProperties.find(propertyName);
 
-    if (canRoute(propertyName, settings.easingConfig)) {
+    // Settings-only entries (no value diff) are checked by name and easing
+    // only; their values arrive later through the dynamic-diffs path, which
+    // re-parses and skips anything inexpressible.
+    const bool valuesRoutable = valueIt == config.changedProperties.end() ||
+        valueShapeRoutable(rt, propertyName, valueIt->second.first, valueIt->second.second);
+
+    if (canRoute(propertyName, settings.easingConfig) &&
+        !hasNonUniformBorderSibling(propertyName, transitioningNames) && valuesRoutable) {
       // loop -> platform migration: cancel on loop.
       if (result.routing.loop.erase(propertyName) > 0) {
         result.loop.removedProperties.push_back(propertyName);

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

@@ -70,9 +70,12 @@ class CSSPlatformTransitionProxy {
 
   // 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 (canRoute), no non-uniform border sibling is transitioning along
+  // with it, and both endpoint values are expressible as platform values;
+  // otherwise it goes to the loop, which can animate everything.
+  ProcessedConfig
+  processConfig(jsi::Runtime &rt, CSSTransitionConfig &&config, const CSSTransitionRouting &previousRouting) const;
 
  private:
   bool canRoute(const std::string &propertyName, const EasingConfig &easing) const;

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

@@ -14,11 +14,12 @@ CSSTransition::CSSTransition(
     Observer &observer,
     const std::shared_ptr<CSSPlatformTransitionProxy> &platformTransitionProxy)
     : shadowNode_(std::move(shadowNode)),
-      loopTransition_(std::make_shared<CSSLoopTransition>(
-          shadowNode_->getTag(),
-          shadowNode_->getComponentName(),
-          viewStylesRepository,
-          observer)),
+      loopTransition_(
+          std::make_shared<CSSLoopTransition>(
+              shadowNode_->getTag(),
+              shadowNode_->getComponentName(),
+              viewStylesRepository,
+              observer)),
       platformTransitionProxy_(platformTransitionProxy) {}
 
 CSSTransition::~CSSTransition() {
@@ -89,7 +90,7 @@ void CSSTransition::updateSettings(
 
 CSSTransitionConfig
 CSSTransition::splitForPlatformRouting(jsi::Runtime &rt, CSSTransitionConfig &&config, const double timestamp) {
-  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.changedPropertiesSettings.empty() || !processed.platform.removedProperties.empty()) {

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

@@ -1,41 +1,114 @@
 #include <reanimated/CSS/utils/platform.h>
 
+#include <reanimated/CSS/utils/props.h>
+
+#include <cstdint>
 #include <unordered_map>
 
 namespace reanimated::css {
 
 namespace {
 
 // CSS-spec defaults; mirror Common/cpp/reanimated/CSS/InterpolatorRegistry.cpp.
+// Used when an endpoint is null/undefined - the property's default value
+// stands in for the missing side.
 const std::unordered_map<std::string, PlatformValue> kDefaults = {
     {"opacity", 1.0},
+    {"borderWidth", 0.0},
+    {"borderRadius", 0.0},
+    {"shadowOpacity", 1.0},
+    {"shadowRadius", 0.0},
+    {"backgroundColor", std::array<double, 4>{0.0, 0.0, 0.0, 0.0}},
+    {"borderColor", std::array<double, 4>{0.0, 0.0, 0.0, 1.0}},
+    {"shadowColor", std::array<double, 4>{0.0, 0.0, 0.0, 1.0}},
+    {"shadowOffset", std::array<double, 2>{0.0, 0.0}},
 };
 
-PlatformValue parseDouble(const jsi::Value &value) {
-  return value.isNumber() ? PlatformValue(value.asNumber()) : PlatformValue{};
+bool isScalarProperty(const std::string &name) {
+  return name == "opacity" || name == "borderWidth" || name == "borderRadius" || name == "shadowOpacity" ||
+      name == "shadowRadius";
+}
+
+bool isColorProperty(const std::string &name) {
+  return name == "backgroundColor" || name == "borderColor" || name == "shadowColor";
+}
+
+PlatformValue defaultValueFor(const std::string &propertyName) {
+  const auto it = kDefaults.find(propertyName);
+  return it != kDefaults.end() ? it->second : PlatformValue{};
+}
+
+// RN's processColor pre-bakes named colors and rgba() strings into a packed
+// ARGB number. PlatformColor-like values arrive as objects instead - those are
+// rejected (monostate) so the caller falls back to the loop path.
+PlatformValue parseColorNumber(const double number) {
+  const auto channels = extractColorChannels(static_cast<int64_t>(number));
+  return std::array<double, 4>{
+      channels[0] / 255.0,
+      channels[1] / 255.0,
+      channels[2] / 255.0,
+      channels[3] / 255.0,
+  };
+}
+
+// Missing width/height components default to 0, matching the loop-path record
+// interpolator semantics.
+PlatformValue parseSizeValue(jsi::Runtime &rt, const jsi::Value &value) {
+  if (!value.isObject()) {
+    return PlatformValue{};
+  }
+  const auto obj = value.asObject(rt);
+  const auto width = obj.getProperty(rt, "width");
+  const auto height = obj.getProperty(rt, "height");
+  return std::array<double, 2>{
+      width.isNumber() ? width.asNumber() : 0.0,
+      height.isNumber() ? height.asNumber() : 0.0,
+  };
+}
+
+PlatformValue parseSizeValue(const folly::dynamic &value) {
+  if (!value.isObject()) {
+    return PlatformValue{};
+  }
+  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,
+  };
 }
 
 } // 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{};
+    return defaultValueFor(propertyName);
   }
-  if (propertyName == "opacity") {
-    return parseDouble(value);
+  if (isScalarProperty(propertyName)) {
+    return value.isNumber() ? PlatformValue(value.asNumber()) : PlatformValue{};
+  }
+  if (isColorProperty(propertyName)) {
+    return value.isNumber() ? parseColorNumber(value.asNumber()) : PlatformValue{};
+  }
+  if (propertyName == "shadowOffset") {
+    return parseSizeValue(rt, value);
   }
   return PlatformValue{};
 }
 
 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{};
+    return defaultValueFor(propertyName);
   }
-  if (propertyName == "opacity") {
+  if (isScalarProperty(propertyName)) {
     return value.isNumber() ? PlatformValue(value.asDouble()) : PlatformValue{};
   }
+  if (isColorProperty(propertyName)) {
+    return value.isNumber() ? parseColorNumber(value.asDouble()) : PlatformValue{};
+  }
+  if (propertyName == "shadowOffset") {
+    return parseSizeValue(value);
+  }
   return PlatformValue{};
 }
 

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

@@ -11,6 +11,12 @@ namespace reanimated::css {
 
 using namespace facebook;
 
+// Platform-neutral value shapes the renderers convert to their native
+// animation types. The array sizes double as type tags:
+//   - double           : scalar properties (opacity, borderWidth, ...)
+//   - array<double, 2> : width/height size (shadowOffset)
+//   - array<double, 4> : RGBA color, normalized [0, 1]
+//   - monostate        : not expressible; the caller must fall back to the loop
 using PlatformValue = std::variant<std::monostate, double, std::array<double, 2>, std::array<double, 4>>;
 
 PlatformValue parsePlatformValue(jsi::Runtime &rt, const std::string &propertyName, const jsi::Value &value);