Pass committed view props to the platform routing predicate

Author: MatiPl01

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

@@ -2,6 +2,7 @@
 
 #include <react/debug/react_native_assert.h>
 
+#include <unordered_set>
 #include <utility>
 
 namespace reanimated::css {
@@ -48,14 +49,20 @@ CSSPlatformTransitionProxy::CSSPlatformTransitionProxy(
     CSSCanRoutePropertyFunction canRoute,
     CSSParseValueFunction parseValue,
     CSSApplyTransitionFunction applyTransition,
-    CSSRemoveTransitionFunction removeTransition)
+    CSSRemoveTransitionFunction removeTransition,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository)
     : canRoute_(std::move(canRoute)),
       parseValue_(std::move(parseValue)),
       applyTransition_(std::move(applyTransition)),
-      removeTransition_(std::move(removeTransition)) {}
+      removeTransition_(std::move(removeTransition)),
+      viewStylesRepository_(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 std::unordered_set<std::string> &transitioningProperties) const {
+  return canRoute_ && canRoute_(propertyName, easing, shadowNode, transitioningProperties);
 }
 
 std::optional<PlatformValue> CSSPlatformTransitionProxy::parseValue(
@@ -80,19 +87,29 @@ void CSSPlatformTransitionProxy::remove(const Tag viewTag, const std::string &pr
 // property migrates sides - that's when the old side gets a cancel.
 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;
 
+  // Routing eligibility is decided against the view's latest committed props.
+  const auto newestShadowNode = viewStylesRepository_->getNewestShadowNode(shadowNode);
+
+  std::unordered_set<std::string> transitioningProperties;
+  transitioningProperties.reserve(config.changedPropertiesSettings.size());
+  for (const auto &entry : config.changedPropertiesSettings) {
+    transitioningProperties.insert(entry.first);
+  }
+
   // 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);
 
-    bool routable = canRoute(propertyName, settings.easingConfig);
+    bool routable = canRoute(propertyName, settings.easingConfig, *newestShadowNode, transitioningProperties);
     std::optional<PlatformValue> fromValue;
     std::optional<PlatformValue> toValue;
     if (routable && valueIt != config.changedProperties.end()) {

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

@@ -3,16 +3,20 @@
 #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 <array>
 #include <functional>
+#include <memory>
 #include <optional>
 #include <string>
 #include <unordered_map>
+#include <unordered_set>
 #include <utility>
 #include <variant>
 #include <vector>
@@ -66,8 +70,14 @@ struct CSSPlatformTransitionConfig {
   }
 };
 
-/// Whether the platform can animate the property natively for the given easing.
-using CSSCanRoutePropertyFunction = std::function<bool(const std::string &propertyName, const EasingConfig &easing)>;
+/// Whether the platform can animate the property natively. shadowNode carries the
+/// view's latest committed props; transitioningProperties lists the co-changing
+/// properties, so platforms can reject ones whose rendering depends on siblings.
+using CSSCanRoutePropertyFunction = std::function<bool(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const ShadowNode &shadowNode,
+    const std::unordered_set<std::string> &transitioningProperties)>;
 /// Parses an extracted endpoint into the platform's value representation. An
 /// empty endpoint resolves to the property's CSS default; nullopt means the
 /// value is not expressible natively and the property runs on the loop.
@@ -98,16 +108,20 @@ class CSSPlatformTransitionProxy {
       CSSCanRoutePropertyFunction canRoute,
       CSSParseValueFunction parseValue,
       CSSApplyTransitionFunction applyTransition,
-      CSSRemoveTransitionFunction removeTransition);
+      CSSRemoveTransitionFunction removeTransition,
+      const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
 
   void run(const CSSPlatformTransitionPropertyConfig &config) const;
   void remove(Tag viewTag, const std::string &propertyName) const;
 
   /// Filters the config into loop / platform buckets, emitting implicit cancels
   /// on the old side when a property migrates vs previousRouting. A property
   /// routes to the platform only when canRoute holds and both endpoints parse.
-  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;
 
   /// Splits already-routed pseudo-selector toggle diffs into loop / platform
   /// buckets, parsing the platform endpoints; values the platform cannot
@@ -117,13 +131,18 @@ class CSSPlatformTransitionProxy {
       const PropertyValueDynamicDiffsMap &propertyDiffs) 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;
   std::optional<PlatformValue> parseValue(const std::string &propertyName, const CSSEndpointValue &value) const;
 
   CSSCanRoutePropertyFunction canRoute_;
   CSSParseValueFunction parseValue_;
   CSSApplyTransitionFunction applyTransition_;
   CSSRemoveTransitionFunction removeTransition_;
+  const 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.cssParseValue,
               platformDepMethodsHolder.cssApplyTransition,
-              platformDepMethodsHolder.cssRemoveTransition))),
+              platformDepMethodsHolder.cssRemoveTransition,
+              viewStylesRepository_))),
       pseudoStylesRegistry_(std::make_shared<PseudoStylesRegistry>(
           platformDepMethodsHolder.attachPseudoSelector,
           platformDepMethodsHolder.detachPseudoSelector,

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

@@ -4,18 +4,27 @@
 #import <reanimated/CSS/easing/EasingConfigs.h>
 #import <reanimated/apple/CSS/REACSSPlatformValue.h>
 
+#import <react/renderer/core/ShadowNode.h>
+
 #import <Foundation/Foundation.h>
 #import <QuartzCore/QuartzCore.h>
 
 #import <optional>
 #import <string>
+#import <unordered_set>
 
 NS_ASSUME_NONNULL_BEGIN
 
 namespace reanimated::css {
 
-/// Whether Core Animation can drive the property natively for the given easing.
-bool canRouteCSSProperty(const std::string &propertyName, const EasingConfig &easing);
+/// Whether Core Animation can drive the property natively. shadowNode carries
+/// the view's latest committed props; transitioningProperties lists the
+/// properties changing in the same pass.
+bool canRouteCSSProperty(
+    const std::string &propertyName,
+    const EasingConfig &easing,
+    const facebook::react::ShadowNode &shadowNode,
+    const std::unordered_set<std::string> &transitioningProperties);
 
 /// Parses an extracted endpoint into the platform value representation. An empty
 /// (monostate) endpoint resolves to the property's CSS default; nullopt means the

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

@@ -61,7 +61,11 @@ CGColorSpaceRef sharedSRGBColorSpace()
 
 } // namespace
 
-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 (!StaticFeatureFlags::getFlag("IOS_CSS_CORE_ANIMATION")) {
     return false;