fix: Android ANR deadlock between CSS updates-registry lock and Fabric commit (#9715)

## Issue

On Android, screens using a relative CSS length (e.g. a
`transformOrigin` mixing `%` and `px`) could freeze (ANR). Resolving the
relative length read the live ShadowTree, which takes the ShadowTree
commit lock, while holding Reanimated's updates-registry lock; a
concurrent Fabric commit takes the same two locks in the opposite order,
so they deadlock (AB-BA). Regression from #9495.

## Fix

Resolve relative lengths against the last mounted tree instead of the
live ShadowTree, so the read path never takes the ShadowTree lock.
`ReanimatedMountHook` records the mounted root per surface (under the
registry lock it already holds), and `ViewStylesRepository` reads layout
from that snapshot via a plain parent/child walk. With lock A gone from
Reanimated's read path, the AB-BA cycle can't form.

Animation-backend mode keeps reading the live tree (its commit hook is
disabled there, so there is no deadlock to avoid).

Verified on device: Android (deadlock gone) and iOS (relative resolution
correct).

Author: MatiPl01

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

@@ -1,4 +1,5 @@
 #include <reanimated/CSS/misc/ViewStylesRepository.h>
+#include <reanimated/Tools/FeatureFlags.h>
 
 #include <memory>
 #include <string>
@@ -13,13 +14,11 @@ ViewStylesRepository::ViewStylesRepository(
 jsi::Value ViewStylesRepository::getNodeProp(
     const std::shared_ptr<const ShadowNode> &shadowNode,
     const std::string &propName) {
-  int tag = shadowNode->getTag();
-
-  auto &cachedNode = shadowNodeCache_[tag];
-  updateCacheIfNeeded(cachedNode, shadowNode);
+  const auto resolvedNode = getNewestNode(shadowNode);
+  const auto *layoutableShadowNode = dynamic_cast<const LayoutableShadowNode *>(resolvedNode.get());
 
   if (propName == "width" || propName == "height" || propName == "top" || propName == "left") {
-    const auto &layoutMetrics = cachedNode.layoutMetrics;
+    const auto layoutMetrics = layoutableShadowNode ? layoutableShadowNode->layoutMetrics_ : LayoutMetrics{};
 
     if (propName == "width") {
       return {layoutMetrics.frame.size.width};
@@ -31,7 +30,13 @@ jsi::Value ViewStylesRepository::getNodeProp(
       return {layoutMetrics.frame.origin.x};
     }
   } else {
-    const auto &viewProps = cachedNode.viewProps;
+    if (!layoutableShadowNode) {
+      return jsi::Value::undefined();
+    }
+    const auto viewProps = std::static_pointer_cast<const ViewProps>(resolvedNode->getProps());
+    if (!viewProps) {
+      return jsi::Value::undefined();
+    }
 
     if (propName == "opacity") {
       return {viewProps->opacity};
@@ -48,15 +53,7 @@ jsi::Value ViewStylesRepository::getNodeProp(
 jsi::Value ViewStylesRepository::getParentNodeProp(
     const std::shared_ptr<const ShadowNode> &shadowNode,
     const std::string &propName) {
-  const auto surfaceId = shadowNode->getSurfaceId();
-  const auto &shadowTreeRegistry = uiManager_->getShadowTreeRegistry();
-
-  std::shared_ptr<const ShadowNode> parentNode = nullptr;
-
-  shadowTreeRegistry.visit(surfaceId, [&](ShadowTree const &shadowTree) {
-    auto currentRevision = shadowTree.getCurrentRevision();
-    parentNode = dom::getParentNode(currentRevision.rootShadowNode, *shadowNode);
-  });
+  const auto parentNode = getParentNode(shadowNode);
 
   if (!parentNode) {
     return jsi::Value::undefined();
@@ -65,37 +62,67 @@ jsi::Value ViewStylesRepository::getParentNodeProp(
   return getNodeProp(parentNode, propName);
 }
 
-folly::dynamic ViewStylesRepository::getStyleProp(const Tag tag, const PropertyPath &propertyPath) {
-  auto animatedValue = getPropertyValue(animatedPropsRegistry_->get(tag), propertyPath);
-  if (!animatedValue.isNull()) {
-    return animatedValue;
+std::shared_ptr<const ShadowNode> ViewStylesRepository::getNewestNode(
+    const std::shared_ptr<const ShadowNode> &shadowNode) const {
+  if constexpr (StaticFeatureFlags::getFlag("USE_ANIMATION_BACKEND")) {
+    // Backend mode has no commit hook (it returns before taking the updates-registry
+    // lock), so reading the live tree here cannot deadlock and needs no snapshot.
+    const auto newestNode = uiManager_->getNewestCloneOfShadowNode(*shadowNode);
+    return newestNode ? newestNode : shadowNode;
   }
 
-  return getPropertyValue(staticPropsRegistry_->get(tag), propertyPath);
-}
+  // Resolve shadowNode against the last mounted root without the ShadowTree lock (the
+  // deadlock) that getNewestCloneOfShadowNode takes, falling back to the passed node.
+  // Mirrors RN's getShadowNodeInSubtree:
+  // https://github.com/facebook/react-native/blob/v0.86.0-rc.3/packages/react-native/ReactCommon/react/renderer/uimanager/UIManager.cpp#L339
+  const auto it = lastMountedRootBySurface_.find(shadowNode->getSurfaceId());
+  if (it == lastMountedRootBySurface_.end()) {
+    return shadowNode;
+  }
+  const auto &root = it->second;
 
-void ViewStylesRepository::clearNodesCache() {
-  shadowNodeCache_.clear();
+  if (ShadowNode::sameFamily(*root, *shadowNode)) {
+    return root;
+  }
+
+  const auto ancestors = shadowNode->getFamily().getAncestors(*root);
+  if (ancestors.empty()) {
+    return shadowNode;
+  }
+
+  const auto &deepest = ancestors.back();
+  return deepest.first.get().getChildren().at(deepest.second);
 }
 
-void ViewStylesRepository::updateCacheIfNeeded(
-    CachedShadowNode &cachedNode,
-    const std::shared_ptr<const ShadowNode> &shadowNode) {
-  auto newestCloneOfShadowNode = uiManager_->getNewestCloneOfShadowNode(*shadowNode);
+std::shared_ptr<const ShadowNode> ViewStylesRepository::getParentNode(
+    const std::shared_ptr<const ShadowNode> &shadowNode) const {
+  if constexpr (StaticFeatureFlags::getFlag("USE_ANIMATION_BACKEND")) {
+    // Backend mode resolves against the live tree (see getNewestNode).
+    std::shared_ptr<const ShadowNode> parentNode = nullptr;
+    uiManager_->getShadowTreeRegistry().visit(shadowNode->getSurfaceId(), [&](const ShadowTree &shadowTree) {
+      parentNode = dom::getParentNode(shadowTree.getCurrentRevision().rootShadowNode, *shadowNode);
+    });
+    return parentNode;
+  }
 
-  // Check if newestCloneOfShadowNode is valid (is already mounted / not
-  // yet unmounted)
-  if (!newestCloneOfShadowNode) {
-    return;
+  const auto it = lastMountedRootBySurface_.find(shadowNode->getSurfaceId());
+  if (it == lastMountedRootBySurface_.end()) {
+    return nullptr;
   }
+  return dom::getParentNode(it->second, *shadowNode);
+}
+
+void ViewStylesRepository::setLastMountedRoot(const RootShadowNode::Shared &rootShadowNode) {
+  lastMountedRootBySurface_[rootShadowNode->getSurfaceId()] = rootShadowNode;
+}
 
-  auto layoutableShadowNode = dynamic_cast<const LayoutableShadowNode *>(newestCloneOfShadowNode.get());
-  if (!layoutableShadowNode) {
-    return;
+folly::dynamic ViewStylesRepository::getStyleProp(const Tag tag, const PropertyPath &propertyPath) {
+  auto animatedValue = getPropertyValue(animatedPropsRegistry_->get(tag), propertyPath);
+  if (!animatedValue.isNull()) {
+    return animatedValue;
   }
 
-  cachedNode.layoutMetrics = layoutableShadowNode->layoutMetrics_;
-  cachedNode.viewProps = std::static_pointer_cast<const ViewProps>(newestCloneOfShadowNode->getProps());
+  return getPropertyValue(staticPropsRegistry_->get(tag), propertyPath);
 }
 
 folly::dynamic ViewStylesRepository::getPropertyValue(const folly::dynamic &value, const PropertyPath &propertyPath) {

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

@@ -4,9 +4,11 @@
 #include <reanimated/CSS/registries/StaticPropsRegistry.h>
 #include <reanimated/Fabric/updates/AnimatedPropsRegistry.h>
 
+#include <react/renderer/components/root/RootShadowNode.h>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/LayoutableShadowNode.h>
 #include <react/renderer/dom/DOM.h>
+#include <react/renderer/uimanager/UIManager.h>
 
 #include <memory>
 #include <string>
@@ -17,11 +19,6 @@ namespace reanimated::css {
 using namespace facebook;
 using namespace react;
 
-struct CachedShadowNode {
-  LayoutMetrics layoutMetrics;
-  std::shared_ptr<const ViewProps> viewProps;
-};
-
 class ViewStylesRepository {
  public:
   ViewStylesRepository(
@@ -36,16 +33,17 @@ class ViewStylesRepository {
   jsi::Value getParentNodeProp(const std::shared_ptr<const ShadowNode> &shadowNode, const std::string &propName);
   folly::dynamic getStyleProp(Tag tag, const PropertyPath &propertyPath);
 
-  void clearNodesCache();
+  void setLastMountedRoot(const RootShadowNode::Shared &rootShadowNode);
 
  private:
   std::shared_ptr<UIManager> uiManager_;
   std::shared_ptr<StaticPropsRegistry> staticPropsRegistry_;
   std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
 
-  std::unordered_map<int, CachedShadowNode> shadowNodeCache_;
+  std::unordered_map<SurfaceId, RootShadowNode::Shared> lastMountedRootBySurface_;
 
-  void updateCacheIfNeeded(CachedShadowNode &cachedNode, const std::shared_ptr<const ShadowNode> &shadowNode);
+  std::shared_ptr<const ShadowNode> getNewestNode(const std::shared_ptr<const ShadowNode> &shadowNode) const;
+  std::shared_ptr<const ShadowNode> getParentNode(const std::shared_ptr<const ShadowNode> &shadowNode) const;
 
   static folly::dynamic getPropertyValue(const folly::dynamic &value, const PropertyPath &propertyPath);
 };

packages/react-native-reanimated/Common/cpp/reanimated/Fabric/ReanimatedMountHook.cpp

@@ -9,8 +9,12 @@ namespace reanimated {
 ReanimatedMountHook::ReanimatedMountHook(
     const std::shared_ptr<UIManager> &uiManager,
     const std::shared_ptr<UpdatesRegistryManager> &updatesRegistryManager,
+    const std::shared_ptr<css::ViewStylesRepository> &viewStylesRepository,
     const std::function<void()> &requestFlush)
-    : uiManager_(uiManager), updatesRegistryManager_(updatesRegistryManager), requestFlush_(requestFlush) {
+    : uiManager_(uiManager),
+      updatesRegistryManager_(updatesRegistryManager),
+      viewStylesRepository_(viewStylesRepository),
+      requestFlush_(requestFlush) {
   uiManager_->registerMountHook(*this);
 }
 
@@ -26,17 +30,24 @@ void ReanimatedMountHook::shadowTreeDidMount(
   auto reaShadowNode = std::reinterpret_pointer_cast<ReanimatedCommitShadowNode>(
       std::const_pointer_cast<RootShadowNode>(rootShadowNode));
 
-  if (reaShadowNode->hasReanimatedMountTrait()) {
+  const bool isReanimatedMount = reaShadowNode->hasReanimatedMountTrait();
+  if (isReanimatedMount) {
     // We mark reanimated commits with ReanimatedMountTrait. We don't want other
     // shadow nodes to use this trait, but since this rootShadowNode is Shared,
     // we don't have that guarantee. That's why we also unset this trait in the
     // commit hook. We remove it here mainly for the sake of cleanliness.
     reaShadowNode->unsetReanimatedMountTrait();
-    return;
   }
 
   {
     auto lock = updatesRegistryManager_->lock();
+    // Record the mounted tree for relative-length resolution.
+    viewStylesRepository_->setLastMountedRoot(rootShadowNode);
+
+    if (isReanimatedMount) {
+      return;
+    }
+
     updatesRegistryManager_->handleNodeRemovals(*rootShadowNode);
 
     // When commit from React Native has finished, we reset the skip commit flag

packages/react-native-reanimated/Common/cpp/reanimated/Fabric/ReanimatedMountHook.h

@@ -1,5 +1,6 @@
 #pragma once
 
+#include <reanimated/CSS/misc/ViewStylesRepository.h>
 #include <reanimated/Fabric/ShadowTreeCloner.h>
 #include <reanimated/Fabric/updates/UpdatesRegistryManager.h>
 
@@ -16,6 +17,7 @@ class ReanimatedMountHook : public UIManagerMountHook {
   ReanimatedMountHook(
       const std::shared_ptr<UIManager> &uiManager,
       const std::shared_ptr<UpdatesRegistryManager> &updatesRegistryManager,
+      const std::shared_ptr<css::ViewStylesRepository> &viewStylesRepository,
       const std::function<void()> &requestFlush);
   ~ReanimatedMountHook() noexcept override;
 
@@ -24,6 +26,7 @@ class ReanimatedMountHook : public UIManagerMountHook {
  private:
   const std::shared_ptr<UIManager> uiManager_;
   const std::shared_ptr<UpdatesRegistryManager> updatesRegistryManager_;
+  const std::shared_ptr<css::ViewStylesRepository> viewStylesRepository_;
   const std::function<void()> requestFlush_;
 };
 

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

@@ -810,11 +810,6 @@ void ReanimatedModuleProxy::performOperations() {
   }
 
   commitUpdates(uiRuntime, updatesBatch);
-
-  // Clear the entire cache after the commit
-  // (we don't know if the view is updated from outside of Reanimated
-  // so we have to clear the entire cache)
-  viewStylesRepository_->clearNodesCache();
 }
 
 void ReanimatedModuleProxy::performNonLayoutOperations() {
@@ -1208,7 +1203,8 @@ void ReanimatedModuleProxy::initializeFabric(const std::shared_ptr<UIManager> &u
     // TODO: we don't use the mount hook here, but we still need a way to handleNodeRemovals
     // for now we leave this to leak the memory, a fix will come in a follow-up
   } else {
-    mountHook_ = std::make_shared<ReanimatedMountHook>(uiManager_, updatesRegistryManager_, request);
+    mountHook_ =
+        std::make_shared<ReanimatedMountHook>(uiManager_, updatesRegistryManager_, viewStylesRepository_, request);
   }
 
   commitHook_ = std::make_shared<ReanimatedCommitHook>(uiManager_, updatesRegistryManager_, layoutAnimationsProxy_);