Pass committed view props to the platform routing predicate

Author: MatiPl01

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

@@ -3,6 +3,7 @@
 #include <jsi/JSIDynamic.h>
 #include <react/debug/react_native_assert.h>
 
+#include <unordered_set>
 #include <utility>
 
 namespace reanimated::css {
@@ -11,14 +12,20 @@ CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
     CSSCanRoutePropertyFunction canRoute,
     CSSCanExpressValueFunction canExpressValue,
     CSSApplyTransitionFunction applyTransition,
-    CSSRemoveTransitionFunction removeTransition)
+    CSSRemoveTransitionFunction removeTransition,
+    std::shared_ptr<ViewStylesRepository> viewStylesRepository)
     : canRoute_(std::move(canRoute)),
       canExpressValue_(std::move(canExpressValue)),
       applyTransition_(std::move(applyTransition)),
-      removeTransition_(std::move(removeTransition)) {}
-
-bool CSSPlatformTransitionProxy::canRoute(const std::string &propertyName, const EasingConfig &easing) const {
-  return canRoute_ && canRoute_(propertyName, easing);
+      removeTransition_(std::move(removeTransition)),
+      viewStylesRepository_(std::move(viewStylesRepository)) {}
+
+bool CSSPlatformTransitionProxy::canRoute(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const ShadowNode &shadowNode,
+    const std::unordered_set<std::string> &transitioningProperties) const {
+  return canRoute_ && canRoute_(propertyName, easing, shadowNode, transitioningProperties);
 }
 
 bool CSSPlatformTransitionProxy::canExpressValue(const std::string &propertyName, const folly::dynamic &value) const {
@@ -43,11 +50,21 @@ 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);
+
+  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()) {
@@ -56,7 +73,7 @@ CSSPlatformTransitionProxy::ProcessedConfig CSSPlatformTransitionProxy::processC
     const auto &settings = settingsNode.mapped();
     const auto valueIt = config.changedProperties.find(propertyName);
 
-    bool routable = canRoute(propertyName, settings.easingConfig);
+    bool routable = canRoute(propertyName, settings.easingConfig, *newestShadowNode, transitioningNames);
     folly::dynamic fromValue;
     folly::dynamic toValue;
     if (routable && valueIt != config.changedProperties.end()) {

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

@@ -3,13 +3,17 @@
 #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 <folly/dynamic.h>
 #include <jsi/jsi.h>
 #include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/core/ShadowNode.h>
 
 #include <functional>
+#include <memory>
 #include <string>
+#include <unordered_set>
 #include <vector>
 
 namespace reanimated::css {
@@ -46,8 +50,15 @@ struct CSSPlatformTransitionConfig {
   }
 };
 
-// Whether the platform can drive the property natively for the given easing.
-using CSSCanRoutePropertyFunction = std::function<bool(const std::string &propertyName, const EasingConfig &easing)>;
+// Whether the platform can drive the property natively. The shadow node
+// carries the view's latest committed props and transitioningProperties lists
+// the props changing in the same routing pass, so platform implementations can
+// reject properties whose rendering depends on sibling style.
+using CSSCanRoutePropertyFunction = std::function<bool(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const ShadowNode &shadowNode,
+    const std::unordered_set<std::string> &transitioningProperties)>;
 // Whether the platform can express the given value for the property (cheap
 // shape check; the actual conversion happens in the apply callback).
 using CSSCanExpressValueFunction = std::function<bool(const std::string &propertyName, const folly::dynamic &value)>;
@@ -71,7 +82,8 @@ class CSSPlatformTransitionProxy {
       CSSCanRoutePropertyFunction canRoute,
       CSSCanExpressValueFunction canExpressValue,
       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;
@@ -83,16 +95,24 @@ class CSSPlatformTransitionProxy {
   // A property routes to the platform only when the platform declares both the
   // property and its values expressible; otherwise it goes to the loop, which
   // can animate everything.
-  ProcessedConfig
-  processConfig(jsi::Runtime &rt, CSSTransitionConfig &&config, const CSSTransitionRouting &previousRouting) const;
+  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 std::unordered_set<std::string> &transitioningProperties) const;
 
   CSSCanRoutePropertyFunction canRoute_;
   CSSCanExpressValueFunction canExpressValue_;
   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

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

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

@@ -2,8 +2,17 @@
 
 #import <reanimated/CSS/easing/EasingConfigs.h>
 
+#import <react/renderer/core/ShadowNode.h>
+
 #import <string>
+#import <unordered_set>
 
 // Routing predicate for platform-driven CSS transitions: whether Core
-// Animation can drive the property natively for the given easing.
-bool canRouteCSSProperty(const std::string &propertyName, const reanimated::css::EasingConfig &easing);
+// Animation can drive the property natively. The shadow node carries the
+// view's latest committed props; transitioningProperties lists the props
+// changing in the same routing pass.
+bool canRouteCSSProperty(
+    const std::string &propertyName,
+    const reanimated::css::EasingConfig &easing,
+    const facebook::react::ShadowNode &shadowNode,
+    const std::unordered_set<std::string> &transitioningProperties);

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

@@ -6,7 +6,11 @@
 
 using namespace reanimated::css;
 
-bool canRouteCSSProperty(const std::string &propertyName, const EasingConfig &easing)
+bool canRouteCSSProperty(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const facebook::react::ShadowNode & /*shadowNode*/,
+    const std::unordered_set<std::string> & /*transitioningProperties*/)
 {
   if constexpr (!reanimated::StaticFeatureFlags::getFlag("IOS_CSS_CORE_ANIMATION")) {
     return false;