Fix Fabric reusing nodes with a stale font scale (#57246)

Summary:
Fixes #52895

The original solution to this issue approached this by comparing the font scale used to lay out respective root nodes and re-cloning measurable nodes in the entire tree when it was different. This didn't work when a node within the tree was cloned from a node with an obsolete font scale stored (with root having the correct one). The new node would use the obsolete value in that pass.

This PR changes this approach - instead of comparing font scale in `SurfaceHandler::constraintLayout` (only when it changes), it moves the comparison to happen as part of `configureYogaTree`, similarly to `pointScaleFactor`. This way, nodes with an obsolete value stored get re-cloned using the correct one on each commit instead of only on the first one.

## Changelog:

[GENERAL][FIXED] - Fixed Fabric reusing nodes with a stale font scale

Pull Request resolved: #57246

Test Plan:
Issue reproducer

||Before|After|
|-|-|-|
|Android|<video src="https://github.com/user-attachments/assets/0b30ca95-76e9-4ce9-8d8f-418f9d827bea" />|<video src="https://github.com/user-attachments/assets/009be13c-c3b5-4af0-8be1-b44c94ac0496" />|
|iOS|<video src="https://github.com/user-attachments/assets/b861b622-a2ea-4cc4-a8db-0e3ad4cae5e7" />|<video src="https://github.com/user-attachments/assets/ec4d6f6e-7558-4430-813b-61a6e911c3b0" />|

Reviewed By: javache

Differential Revision: D108877387

Pulled By: j-piasecki

fbshipit-source-id: f4c5335dc691d30a50db7e6f66744fa9c7295fb2

Author: j-piasecki

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -480,6 +480,7 @@ void YogaLayoutableShadowNode::updateYogaProps() {
 
 void YogaLayoutableShadowNode::configureYogaTree(
     float pointScaleFactor,
+    Float fontSizeMultiplier,
     YGErrata defaultErrata,
     bool swapLeftAndRight) {
   ensureUnsealed();
@@ -489,6 +490,18 @@ void YogaLayoutableShadowNode::configureYogaTree(
   YGConfigSetErrata(&yogaConfig_, errata);
   YGConfigSetPointScaleFactor(&yogaConfig_, pointScaleFactor);
 
+  // A measurable node's measurement depends on `fontSizeMultiplier`, but unlike
+  // `pointScaleFactor` it is not part of the Yoga config, so a change does not
+  // invalidate Yoga's layout cache. Dirty the node when it changes to force
+  // re-measurement. We propagate up to the root so an unchanged, still-cached
+  // ancestor isn't skipped by `calculateLayoutInternal` before reaching us.
+  if (ReactNativeFeatureFlags::enableFontScaleChangesUpdatingLayout() &&
+      getTraits().check(ShadowNodeTraits::Trait::MeasurableYogaNode) &&
+      !floatEquality(
+          getLayoutMetrics().fontSizeMultiplier, fontSizeMultiplier)) {
+    yogaNode_.markDirtyAndPropagate();
+  }
+
   // TODO: `swapLeftAndRight` modified backing props and cannot be undone
   if (swapLeftAndRight) {
     swapStyleLeftAndRight();
@@ -507,6 +520,8 @@ void YogaLayoutableShadowNode::configureYogaTree(
 
     if (child.yogaTreeHasBeenConfigured_ &&
         childLayoutMetrics.pointScaleFactor == pointScaleFactor &&
+        floatEquality(
+            childLayoutMetrics.fontSizeMultiplier, fontSizeMultiplier) &&
         childLayoutMetrics.wasLeftAndRightSwapped == swapLeftAndRight &&
         childErrata == child.resolveErrata(errata)) {
       continue;
@@ -515,10 +530,13 @@ void YogaLayoutableShadowNode::configureYogaTree(
     if (doesOwn(child)) {
       auto& mutableChild = const_cast<YogaLayoutableShadowNode&>(child);
       mutableChild.configureYogaTree(
-          pointScaleFactor, child.resolveErrata(errata), swapLeftAndRight);
+          pointScaleFactor,
+          fontSizeMultiplier,
+          child.resolveErrata(errata),
+          swapLeftAndRight);
     } else {
       cloneChildInPlace(i).configureYogaTree(
-          pointScaleFactor, errata, swapLeftAndRight);
+          pointScaleFactor, fontSizeMultiplier, errata, swapLeftAndRight);
     }
   }
 }
@@ -627,6 +645,7 @@ void YogaLayoutableShadowNode::layoutTree(
     TraceSection s2("YogaLayoutableShadowNode::configureYogaTree");
     configureYogaTree(
         layoutContext.pointScaleFactor,
+        layoutContext.fontSizeMultiplier,
         YGErrataAll /*defaultErrata*/,
         swapLeftAndRight);
   }
@@ -692,6 +711,7 @@ void YogaLayoutableShadowNode::layoutTree(
   if (yogaNode_.getHasNewLayout()) {
     auto layoutMetrics = layoutMetricsFromYogaNode(yogaNode_);
     layoutMetrics.pointScaleFactor = layoutContext.pointScaleFactor;
+    layoutMetrics.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
     layoutMetrics.wasLeftAndRightSwapped = swapLeftAndRight;
     setLayoutMetrics(layoutMetrics);
     yogaNode_.setHasNewLayout(false);
@@ -739,6 +759,7 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
 
       auto newLayoutMetrics = layoutMetricsFromYogaNode(*childYogaNode);
       newLayoutMetrics.pointScaleFactor = layoutContext.pointScaleFactor;
+      newLayoutMetrics.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
       newLayoutMetrics.wasLeftAndRightSwapped =
           layoutContext.swapLeftAndRightInRTL &&
           newLayoutMetrics.layoutDirection == LayoutDirection::RightToLeft;

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h

@@ -134,7 +134,8 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {
    * ShadowTree has been constructed, but before it has been is laid out or
    * committed.
    */
-  void configureYogaTree(float pointScaleFactor, YGErrata defaultErrata, bool swapLeftAndRight);
+  void
+  configureYogaTree(float pointScaleFactor, Float fontSizeMultiplier, YGErrata defaultErrata, bool swapLeftAndRight);
 
   /**
    * Return an errata based on a `layoutConformance` prop if given, otherwise

packages/react-native/ReactCommon/react/renderer/core/LayoutMetrics.h

@@ -40,6 +40,8 @@ struct LayoutMetrics {
   bool wasLeftAndRightSwapped{false};
   // Pixel density. Number of device pixels per density-independent pixel.
   Float pointScaleFactor{1.0};
+  // Surface font scale this node was last laid out with.
+  Float fontSizeMultiplier{1.0};
   // How much the children of the node actually overflow in each direction.
   // Positive values indicate that children are overflowing outside of the node.
   // Negative values indicate that children are clipped inside the node
@@ -120,6 +122,7 @@ struct hash<facebook::react::LayoutMetrics> {
         layoutMetrics.displayType,
         layoutMetrics.layoutDirection,
         layoutMetrics.pointScaleFactor,
+        layoutMetrics.fontSizeMultiplier,
         layoutMetrics.overflowInset);
   }
 };

packages/react-native/ReactCommon/react/renderer/scheduler/SurfaceHandler.cpp

@@ -9,7 +9,6 @@
 
 #include <cxxreact/TraceSection.h>
 #include <react/debug/react_native_assert.h>
-#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/uimanager/UIManager.h>
 
 namespace facebook::react {
@@ -213,78 +212,6 @@ Size SurfaceHandler::measure(
   return rootShadowNode->getLayoutMetrics().frame.size;
 }
 
-std::shared_ptr<const ShadowNode> SurfaceHandler::dirtyMeasurableNodesRecursive(
-    std::shared_ptr<const ShadowNode> node) const {
-  const auto nodeHasChildren = !node->getChildren().empty();
-  const auto isMeasurableYogaNode =
-      node->getTraits().check(ShadowNodeTraits::Trait::MeasurableYogaNode);
-
-  // Node is not measurable and has no children, its layout will not be affected
-  if (!nodeHasChildren && !isMeasurableYogaNode) {
-    return nullptr;
-  }
-
-  std::shared_ptr<const std::vector<std::shared_ptr<const ShadowNode>>>
-      newChildren = ShadowNodeFragment::childrenPlaceholder();
-
-  if (nodeHasChildren) {
-    std::shared_ptr<std::vector<std::shared_ptr<const ShadowNode>>>
-        newChildrenMutable = nullptr;
-    for (size_t i = 0; i < node->getChildren().size(); i++) {
-      const auto& child = node->getChildren()[i];
-
-      if (const auto& layoutableNode =
-              std::dynamic_pointer_cast<const YogaLayoutableShadowNode>(
-                  child)) {
-        auto newChild = dirtyMeasurableNodesRecursive(layoutableNode);
-
-        if (newChild != nullptr) {
-          if (newChildrenMutable == nullptr) {
-            newChildrenMutable = std::make_shared<
-                std::vector<std::shared_ptr<const ShadowNode>>>(
-                node->getChildren());
-            newChildren = newChildrenMutable;
-          }
-
-          (*newChildrenMutable)[i] = newChild;
-        }
-      }
-    }
-
-    // Node is not measurable and its children were not dirtied, its layout will
-    // not be affected
-    if (!isMeasurableYogaNode && newChildrenMutable == nullptr) {
-      return nullptr;
-    }
-  }
-
-  const auto newNode = node->getComponentDescriptor().cloneShadowNode(
-      *node,
-      {
-          .children = newChildren,
-          // Preserve the original state of the node
-          .state = node->getState(),
-      });
-
-  if (isMeasurableYogaNode) {
-    std::static_pointer_cast<YogaLayoutableShadowNode>(newNode)->dirtyLayout();
-  }
-
-  return newNode;
-}
-
-void SurfaceHandler::dirtyMeasurableNodes(ShadowNode& root) const {
-  for (const auto& child : root.getChildren()) {
-    if (const auto& layoutableNode =
-            std::dynamic_pointer_cast<const YogaLayoutableShadowNode>(child)) {
-      const auto newChild = dirtyMeasurableNodesRecursive(layoutableNode);
-      if (newChild != nullptr) {
-        root.replaceChild(*child, newChild);
-      }
-    }
-  }
-}
-
 void SurfaceHandler::constraintLayout(
     const LayoutConstraints& layoutConstraints,
     const LayoutContext& layoutContext) const {
@@ -315,19 +242,8 @@ void SurfaceHandler::constraintLayout(
         link_.shadowTree && "`link_.shadowTree` must not be null.");
     link_.shadowTree->commit(
         [&](const RootShadowNode& oldRootShadowNode) {
-          auto newRoot = oldRootShadowNode.clone(
+          return oldRootShadowNode.clone(
               propsParserContext, layoutConstraints, layoutContext);
-
-          // Dirty all measurable nodes when the fontSizeMultiplier changes to
-          // trigger re-measurement.
-          if (ReactNativeFeatureFlags::enableFontScaleChangesUpdatingLayout() &&
-              layoutContext.fontSizeMultiplier !=
-                  oldRootShadowNode.getConcreteProps()
-                      .layoutContext.fontSizeMultiplier) {
-            dirtyMeasurableNodes(*newRoot);
-          }
-
-          return newRoot;
         },
         {/* default commit options */});
   }

packages/react-native/ReactCommon/react/renderer/scheduler/SurfaceHandler.h

@@ -151,12 +151,6 @@ class SurfaceHandler {
 
   void applyDisplayMode(DisplayMode displayMode) const;
 
-  /*
-   * An utility for dirtying all measurable shadow nodes present in the tree.
-   */
-  void dirtyMeasurableNodes(ShadowNode &root) const;
-  std::shared_ptr<const ShadowNode> dirtyMeasurableNodesRecursive(std::shared_ptr<const ShadowNode> node) const;
-
 #pragma mark - Link & Parameters
 
   /*

scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api

@@ -7415,6 +7415,7 @@ struct facebook::react::LayoutMetrics {
   public facebook::react::EdgeInsets borderWidth;
   public facebook::react::EdgeInsets contentInsets;
   public facebook::react::EdgeInsets overflowInset;
+  public facebook::react::Float fontSizeMultiplier;
   public facebook::react::Float pointScaleFactor;
   public facebook::react::LayoutDirection layoutDirection;
   public facebook::react::PositionType positionType;

scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api

@@ -7198,6 +7198,7 @@ struct facebook::react::LayoutMetrics {
   public facebook::react::EdgeInsets borderWidth;
   public facebook::react::EdgeInsets contentInsets;
   public facebook::react::EdgeInsets overflowInset;
+  public facebook::react::Float fontSizeMultiplier;
   public facebook::react::Float pointScaleFactor;
   public facebook::react::LayoutDirection layoutDirection;
   public facebook::react::PositionType positionType;

scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api

@@ -7406,6 +7406,7 @@ struct facebook::react::LayoutMetrics {
   public facebook::react::EdgeInsets borderWidth;
   public facebook::react::EdgeInsets contentInsets;
   public facebook::react::EdgeInsets overflowInset;
+  public facebook::react::Float fontSizeMultiplier;
   public facebook::react::Float pointScaleFactor;
   public facebook::react::LayoutDirection layoutDirection;
   public facebook::react::PositionType positionType;

scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api

@@ -9496,6 +9496,7 @@ struct facebook::react::LayoutMetrics {
   public facebook::react::EdgeInsets borderWidth;
   public facebook::react::EdgeInsets contentInsets;
   public facebook::react::EdgeInsets overflowInset;
+  public facebook::react::Float fontSizeMultiplier;
   public facebook::react::Float pointScaleFactor;
   public facebook::react::LayoutDirection layoutDirection;
   public facebook::react::PositionType positionType;

scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api

@@ -9331,6 +9331,7 @@ struct facebook::react::LayoutMetrics {
   public facebook::react::EdgeInsets borderWidth;
   public facebook::react::EdgeInsets contentInsets;
   public facebook::react::EdgeInsets overflowInset;
+  public facebook::react::Float fontSizeMultiplier;
   public facebook::react::Float pointScaleFactor;
   public facebook::react::LayoutDirection layoutDirection;
   public facebook::react::PositionType positionType;