Fix font scale change wrong layout

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,17 @@ 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 +519,7 @@ void YogaLayoutableShadowNode::configureYogaTree(
 
     if (child.yogaTreeHasBeenConfigured_ &&
         childLayoutMetrics.pointScaleFactor == pointScaleFactor &&
+        childLayoutMetrics.fontSizeMultiplier == fontSizeMultiplier &&
         childLayoutMetrics.wasLeftAndRightSwapped == swapLeftAndRight &&
         childErrata == child.resolveErrata(errata)) {
       continue;
@@ -515,10 +528,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 +643,7 @@ void YogaLayoutableShadowNode::layoutTree(
     TraceSection s2("YogaLayoutableShadowNode::configureYogaTree");
     configureYogaTree(
         layoutContext.pointScaleFactor,
+        layoutContext.fontSizeMultiplier,
         YGErrataAll /*defaultErrata*/,
         swapLeftAndRight);
   }
@@ -692,6 +709,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);
@@ -746,6 +764,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,11 @@ 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
 
   /*