Pass committed view props to the platform routing predicate

Author: MatiPl01

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

@@ -29,13 +29,18 @@ bool valueShapeRoutable(
 CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
     CSSCanRoutePropertyFunction canRoute,
     CSSApplyTransitionFunction applyTransition,
-    CSSRemoveTransitionFunction removeTransition)
+    CSSRemoveTransitionFunction removeTransition,
+    std::shared_ptr<ViewStylesRepository> viewStylesRepository)
     : canRoute_(std::move(canRoute)),
       applyTransition_(std::move(applyTransition)),
-      removeTransition_(std::move(removeTransition)) {}
+      removeTransition_(std::move(removeTransition)),
+      viewStylesRepository_(std::move(viewStylesRepository)) {}
 
-bool CSSPlatformTransitionProxy::canRoute(const std::string &propertyName, const EasingConfig &easing) const {
-  return canRoute_ && canRoute_(propertyName, easing);
+bool CSSPlatformTransitionProxy::canRoute(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const ShadowNode &shadowNode) const {
+  return canRoute_ && canRoute_(propertyName, easing, shadowNode);
 }
 
 void CSSPlatformTransitionProxy::run(const CSSPlatformTransitionPropertyConfig &config) const {
@@ -56,11 +61,15 @@ void CSSPlatformTransitionProxy::remove(const Tag viewTag, const std::string &pr
 // the prop is migrating sides - that's how we emit cancels.
 CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processConfig(
     jsi::Runtime &rt,
+    const std::shared_ptr<const ShadowNode> &shadowNode,
     CSSTransitionConfig &&config,
     const CSSTransitionRouting &previousRouting) const {
   ProcessedConfig result;
   result.routing = previousRouting;
 
+  // Eligibility is decided against the view's latest committed props.
+  const auto newestShadowNode = viewStylesRepository_->getNewestShadowNode(shadowNode);
+
   // The sibling-aware border check below needs to see all transitioning props.
   std::unordered_set<std::string> transitioningNames;
   transitioningNames.reserve(config.changedPropertiesSettings.size());
@@ -82,7 +91,7 @@ CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processC
     const bool valuesRoutable = valueIt == config.changedProperties.end() ||
         valueShapeRoutable(rt, propertyName, valueIt->second.first, valueIt->second.second);
 
-    if (canRoute(propertyName, settings.easingConfig) &&
+    if (canRoute(propertyName, settings.easingConfig, *newestShadowNode) &&
         !hasNonUniformBorderSibling(propertyName, transitioningNames) && valuesRoutable) {
       // loop -> platform migration: cancel on loop.
       if (result.routing.loop.erase(propertyName) > 0) {

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

@@ -3,12 +3,15 @@
 #include <reanimated/CSS/common/definitions.h>
 #include <reanimated/CSS/configs/CSSTransitionConfig.h>
 #include <reanimated/CSS/easing/EasingConfigs.h>
+#include <reanimated/CSS/misc/ViewStylesRepository.h>
 #include <reanimated/CSS/utils/platform.h>
 
 #include <jsi/jsi.h>
 #include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/core/ShadowNode.h>
 
 #include <functional>
+#include <memory>
 #include <string>
 #include <vector>
 
@@ -47,7 +50,11 @@ struct CSSPlatformTransitionConfig {
   }
 };
 
-using CSSCanRoutePropertyFunction = std::function<bool(const std::string &propertyName, const EasingConfig &easing)>;
+// The shadow node carries the view's latest committed props so platform
+// implementations can reject properties whose rendering depends on sibling
+// style (e.g. border drawing paths).
+using CSSCanRoutePropertyFunction =
+    std::function<bool(const std::string &propertyName, const EasingConfig &easing, const ShadowNode &shadowNode)>;
 using CSSApplyTransitionFunction = std::function<void(const CSSPlatformTransitionPropertyConfig &config)>;
 using CSSRemoveTransitionFunction = std::function<void(Tag viewTag, const std::string &propertyName)>;
 
@@ -67,26 +74,32 @@ class CSSPlatformTransitionProxy {
   CSSPlatformTransitionProxy(
       CSSCanRoutePropertyFunction canRoute,
       CSSApplyTransitionFunction applyTransition,
-      CSSRemoveTransitionFunction removeTransition);
+      CSSRemoveTransitionFunction removeTransition,
+      std::shared_ptr<ViewStylesRepository> viewStylesRepository);
 
   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.
   // 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;
+  // routable (canRoute, given the view's latest committed props), 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,
+      const std::shared_ptr<const ShadowNode> &shadowNode,
+      CSSTransitionConfig &&config,
+      const CSSTransitionRouting &previousRouting) const;
 
  private:
-  bool canRoute(const std::string &propertyName, const EasingConfig &easing) const;
+  bool canRoute(const std::string &propertyName, const EasingConfig &easing, const ShadowNode &shadowNode) const;
 
   CSSCanRoutePropertyFunction canRoute_;
   CSSApplyTransitionFunction applyTransition_;
   CSSRemoveTransitionFunction removeTransition_;
+  std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
 };
 
 } // namespace reanimated::css

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

@@ -38,7 +38,7 @@ folly::dynamic CSSTransition::run(jsi::Runtime &rt, CSSTransitionConfig &&config
 
   // 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(rt, std::move(config), routing_);
+  auto processed = platformTransitionProxy_->processConfig(rt, shadowNode_, std::move(config), routing_);
   routing_ = std::move(processed.routing);
 
   if (!processed.platform.empty()) {

packages/react-native-reanimated/Common/cpp/reanimated/CSS/misc/ViewStylesRepository.cpp

@@ -74,6 +74,15 @@ folly::dynamic ViewStylesRepository::getStyleProp(const Tag tag, const PropertyP
   return getPropertyValue(staticPropsRegistry_->get(tag), propertyPath);
 }
 
+std::shared_ptr<const ShadowNode> ViewStylesRepository::getNewestShadowNode(
+    const std::shared_ptr<const ShadowNode> &shadowNode) {
+  if (!uiManager_) {
+    return shadowNode;
+  }
+  auto newestClone = uiManager_->getNewestCloneOfShadowNode(*shadowNode);
+  return newestClone ? newestClone : shadowNode;
+}
+
 void ViewStylesRepository::clearNodesCache() {
   shadowNodeCache_.clear();
 }

packages/react-native-reanimated/Common/cpp/reanimated/CSS/misc/ViewStylesRepository.h

@@ -36,6 +36,10 @@ class ViewStylesRepository {
   jsi::Value getParentNodeProp(const std::shared_ptr<const ShadowNode> &shadowNode, const std::string &propName);
   folly::dynamic getStyleProp(Tag tag, const PropertyPath &propertyPath);
 
+  // Resolves the latest committed clone of the node (the caller's reference may
+  // be stale); falls back to the given node when no newer clone exists.
+  std::shared_ptr<const ShadowNode> getNewestShadowNode(const std::shared_ptr<const ShadowNode> &shadowNode);
+
   void clearNodesCache();
 
  private:

packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp

@@ -223,7 +223,8 @@ ReanimatedModuleProxy::ReanimatedModuleProxy(
           std::make_shared<CSSPlatformTransitionProxy>(
               platformDepMethodsHolder.cssCanRouteProperty,
               platformDepMethodsHolder.cssApplyTransition,
-              platformDepMethodsHolder.cssRemoveTransition))),
+              platformDepMethodsHolder.cssRemoveTransition,
+              viewStylesRepository_))),
       pseudoStylesRegistry_(std::make_shared<PseudoStylesRegistry>(
           platformDepMethodsHolder.attachPseudoSelector,
           platformDepMethodsHolder.detachPseudoSelector,

packages/react-native-reanimated/apple/reanimated/apple/CSS/REACSSPlatformTransitions.h

@@ -17,6 +17,9 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
-bool canRouteCSSProperty(const std::string &propertyName, const reanimated::css::EasingConfig &easing);
+bool canRouteCSSProperty(
+    const std::string &propertyName,
+    const reanimated::css::EasingConfig &easing,
+    const facebook::react::ShadowNode &shadowNode);
 
 NS_ASSUME_NONNULL_END

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

@@ -30,11 +30,17 @@ static CGColorSpaceRef sharedSRGBColorSpace()
   return space;
 }
 
-bool canRouteCSSProperty(const std::string &propertyName, const EasingConfig &easing)
+bool canRouteCSSProperty(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const facebook::react::ShadowNode & /*shadowNode*/)
 {
   if constexpr (!StaticFeatureFlags::getFlag("IOS_CSS_CORE_ANIMATION")) {
     return false;
   }
+  // The shadow node carries the view's committed props; properties whose
+  // rendering depends on sibling style will consult it here when they are
+  // added to the routable set.
   if (propertyName != "opacity") {
     return false;
   }