Route shadow and color transitions to Core Animation

Author: MatiPl01

packages/react-native-reanimated/apple/reanimated/apple/CSS/REACSSTransitionRouting.mm

@@ -2,23 +2,103 @@
 
 #import <reanimated/Tools/FeatureFlags.h>
 
+#import <react/renderer/components/view/ViewProps.h>
+#import <react/renderer/core/LayoutableShadowNode.h>
+#import <react/renderer/graphics/Color.h>
+
+#import <array>
+#import <memory>
+#import <string_view>
 #import <variant>
 
+using namespace facebook::react;
 using namespace reanimated::css;
 
+// Properties expressible as a CABasicAnimation on the view's main layer.
+static const std::unordered_set<std::string> &routableProperties()
+{
+  static const std::unordered_set<std::string> kRoutable = {
+      "opacity",
+      "shadowOpacity",
+      "shadowRadius",
+      "shadowOffset",
+      "shadowColor",
+      "backgroundColor",
+      "borderColor",
+  };
+  return kRoutable;
+}
+
+// Per-side colors that subvert the uniform `borderColor` when they transition
+// together with it - RN then draws the border through its custom path, where
+// main-layer animations are invisible.
+static bool hasPerSideBorderColorSibling(const std::unordered_set<std::string> &transitioningProperties)
+{
+  static constexpr std::array<std::string_view, 9> kSiblings = {
+      "borderTopColor",
+      "borderRightColor",
+      "borderBottomColor",
+      "borderLeftColor",
+      "borderStartColor",
+      "borderEndColor",
+      "borderBlockColor",
+      "borderBlockStartColor",
+      "borderBlockEndColor",
+  };
+  for (const auto &sibling : kSiblings) {
+    if (transitioningProperties.contains(std::string(sibling))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// Mirrors the `useCoreAnimationBorderRendering` condition in RN's
+// RCTViewComponentView. When it fails, RN zeroes the layer's border properties
+// and draws the background + border into dedicated sublayers that get rebuilt
+// (and stripped of animations) on every commit - so main-layer keypath
+// animations of background/border properties would be invisible there.
+static bool usesCoreAnimationBorderRendering(const ShadowNode &shadowNode)
+{
+  const auto *layoutableShadowNode = dynamic_cast<const LayoutableShadowNode *>(&shadowNode);
+  if (layoutableShadowNode == nullptr) {
+    return false;
+  }
+  const auto viewProps = std::static_pointer_cast<const ViewProps>(shadowNode.getProps());
+  const auto borderMetrics = viewProps->resolveBorderMetrics(layoutableShadowNode->layoutMetrics_);
+  return borderMetrics.borderColors.isUniform() && borderMetrics.borderWidths.isUniform() &&
+      borderMetrics.borderStyles.isUniform() && borderMetrics.borderStyles.left == BorderStyle::Solid &&
+      borderMetrics.borderRadii.isUniform() &&
+      (borderMetrics.borderWidths.left == 0 || viewProps->getClipsContentToBounds() ||
+       (colorComponentsFromColor(borderMetrics.borderColors.left).alpha == 0 &&
+        (*borderMetrics.borderColors.left).getUIColor() != nullptr));
+}
+
 bool canRouteCSSProperty(
     const std::string &propertyName,
     const EasingConfig &easing,
-    const facebook::react::ShadowNode & /*shadowNode*/,
-    const std::unordered_set<std::string> & /*transitioningProperties*/)
+    const facebook::react::ShadowNode &shadowNode,
+    const std::unordered_set<std::string> &transitioningProperties)
 {
   if constexpr (!reanimated::StaticFeatureFlags::getFlag("IOS_CSS_CORE_ANIMATION")) {
     return false;
   }
-  if (propertyName != "opacity") {
+  if (!routableProperties().contains(propertyName)) {
     return false;
   }
   // CAMediaTimingFunction can express only linear and cubic-bezier curves;
   // steps / linear-stops easings have to interpolate per-frame on the loop.
-  return std::holds_alternative<LinearEasing>(easing) || std::holds_alternative<CubicBezierEasing>(easing);
+  if (!std::holds_alternative<LinearEasing>(easing) && !std::holds_alternative<CubicBezierEasing>(easing)) {
+    return false;
+  }
+  // Background and border colors live on the main layer only while RN uses
+  // Core Animation border rendering for this view.
+  if ((propertyName == "backgroundColor" || propertyName == "borderColor") &&
+      !usesCoreAnimationBorderRendering(shadowNode)) {
+    return false;
+  }
+  if (propertyName == "borderColor" && hasPerSideBorderColorSibling(transitioningProperties)) {
+    return false;
+  }
+  return true;
 }