Only keep a cloned node's layout when its children's layout results match

Summary:
When a host node is cloned with its children passed in (`passChildrenWhenCloningPersistedNodes`), `YogaLayoutableShadowNode::updateYogaChildren` keeps the clone's layout clean if every new child is clean and styled like the child it replaces. That misses children that are clean and styled the same but carry a different layout. Yoga then reuses the parent's cached layout, never visits those children, and they keep their stale layout.

Runtime shadow node reference updates produce exactly such children when `<Activity>` hides a subtree:

1. The renderer commits a `display: none` clone H of the hidden subtree's host root V. H gets its own runtime reference; the renderer keeps V, which still holds the layout and layout cache from when it was visible.
2. Laying out H zeroes out clones of V's children. Those clones inherit the children's runtime references, so the renderer now holds the zeroed revisions of V's children while it still holds the non-zeroed V.
3. Any re-render inside the subtree clones those zeroed children and then V with the new children. Every check passes, so V's clone keeps V's cached layout.
4. When the subtree is revealed, Yoga reuses that cache and the content stays at 0x0.

With the children appended one by one instead, the append always dirties the parent, so this only shows up with the flag on.

Also require each new child's layout results (`yoga::LayoutResults`: computed layout and layout cache) to match those of the child it replaces before keeping the clone clean. A parent's cached layout is only valid for the layouts its children had when it was computed. A child cloned without layout changes copies its layout results, so the common case keeps the clone clean.

`configVersion` is left out of the comparison: every clone gets its own Yoga config, and `Node::setConfig()` re-aligns the layout's `configVersion` with it. Comparing it would, for example, dirty a `display: none` parent's ancestors on every commit that clones it, which `YogaDirtyFlagTest.dirtyChildOfHiddenNodeMustNotDirtyIt` guards against.

Changelog: [General][Fixed] - Fix content laid out at zero size after revealing an `<Activity>` subtree when children are passed into clones

Reviewed By: javache

Differential Revision: D131502045

Pull Request resolved: #59984

Author: lenaic

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

@@ -347,6 +347,17 @@ void YogaLayoutableShadowNode::updateYogaChildrenOwnersIfNeeded() {
   }
 }
 
+// Every clone gets its own Yoga config, and `setConfig()` re-aligns the
+// layout's `configVersion` with it, so that field says nothing about whether
+// two nodes carry the same layout. Everything else has to match.
+static bool hasSameLayoutResults(
+    const yoga::Node& yogaNode,
+    const yoga::Node& otherYogaNode) {
+  auto layout = yogaNode.getLayout();
+  layout.configVersion = otherYogaNode.getLayout().configVersion;
+  return layout == otherYogaNode.getLayout();
+}
+
 void YogaLayoutableShadowNode::updateYogaChildren() {
   if (getTraits().check(ShadowNodeTraits::Trait::LeafYogaNode)) {
     return;
@@ -386,8 +397,11 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
         auto& newYogaChildNode =
             yogaLayoutableChildren_.at(yogaChildIndex)->yogaNode_;
 
+        // A clean child styled the same can still carry another layout, e.g. a
+        // revision zeroed out under a `display: none` clone of this node.
         isClean = isClean && !newYogaChildNode.isDirty() &&
-            (newYogaChildNode.style() == oldYogaChildNode.style());
+            (newYogaChildNode.style() == oldYogaChildNode.style()) &&
+            hasSameLayoutResults(newYogaChildNode, oldYogaChildNode);
       }
     }
   }

packages/react-native/ReactCommon/react/renderer/components/view/tests/ViewTest.cpp

@@ -559,6 +559,59 @@ TEST_F(YogaCloneTest, newChildrenCloneReflectsNewList) {
       100);
 }
 
+// A clone that is handed its children must not keep its layout when a child,
+// although clean and styled the same, carries a different computed layout.
+// That is the case for a child revision zeroed out under a `display: none`
+// clone of the parent, which React can hold through runtime shadow node
+// reference updates while it keeps cloning from the visible parent.
+TEST_F(YogaCloneTest, newChildrenWithDifferentLayoutDirtyTheClone) {
+  auto hiddenRoot = rootShadowNode_->cloneTree(
+      parentShadowNode_->getFamily(), [](const ShadowNode& oldShadowNode) {
+        auto hiddenProps = std::make_shared<ViewProps>();
+        auto& yogaStyle = hiddenProps->yogaStyle;
+        yogaStyle.setFlexDirection(yoga::FlexDirection::Row);
+        yogaStyle.setDimension(
+            yoga::Dimension::Width, yoga::StyleSizeLength::points(300));
+        yogaStyle.setDimension(
+            yoga::Dimension::Height, yoga::StyleSizeLength::points(100));
+        yogaStyle.setDisplay(yoga::Display::None);
+        return oldShadowNode.clone({.props = hiddenProps});
+      });
+  static_cast<RootShadowNode&>(*hiddenRoot).layoutIfNeeded();
+
+  auto zeroedChildA = hiddenRoot->getChildren()[0]->getChildren()[0];
+  ASSERT_EQ(
+      yogaNodeOf(*zeroedChildA).getLayout().dimension(yoga::Dimension::Width),
+      0);
+  ASSERT_FALSE(yogaNodeOf(*zeroedChildA).isDirty());
+
+  auto newChildren =
+      std::make_shared<const std::vector<std::shared_ptr<const ShadowNode>>>(
+          std::vector<std::shared_ptr<const ShadowNode>>{
+              zeroedChildA->clone({}),
+              parentShadowNode_->getChildren()[1],
+              parentShadowNode_->getChildren()[2]});
+
+  auto clonedParent = parentShadowNode_->clone(
+      {.props = ShadowNodeFragment::propsPlaceholder(),
+       .children = newChildren});
+
+  EXPECT_FALSE(
+      static_cast<const YogaLayoutableShadowNode&>(*clonedParent)
+          .getIsLayoutClean());
+
+  auto newRootShadowNode = rootShadowNode_->cloneTree(
+      parentShadowNode_->getFamily(),
+      [&](const ShadowNode& /*oldShadowNode*/) { return clonedParent; });
+  static_cast<RootShadowNode&>(*newRootShadowNode).layoutIfNeeded();
+
+  const auto& laidOutChildA =
+      yogaNodeOf(*newRootShadowNode->getChildren()[0]->getChildren()[0])
+          .getLayout();
+  EXPECT_EQ(laidOutChildA.dimension(yoga::Dimension::Width), 100);
+  EXPECT_EQ(laidOutChildA.dimension(yoga::Dimension::Height), 100);
+}
+
 // Successive prop-only clones (the animation commit pattern) must each
 // produce a self-consistent layout. Validates that the fast path's vector
 // copy yields a vector the next clone can again copy from.

packages/react-native/ReactCommon/react/renderer/core/__docs__/passChildrenWhenCloning.md

@@ -48,5 +48,17 @@ of mutation.
 
 The clone implementation of the YogaLayoutableShadowNode will compare the
 previous set of children with the new set. If both sets have the same size and
-each node has equivalent styling, the cloned node is not being dirtied for
-layout. This allows for improving the layout data re-use on subsequent renders.
+each new child is clean, has equivalent styling and carries the same layout
+results (computed layout and layout cache) as the child it replaces, the cloned
+node is not being dirtied for layout. This allows for improving the layout data
+re-use on subsequent renders.
+
+The layout results have to be compared as well: a child can be clean and styled
+the same while carrying a layout that the parent's cached layout was not
+computed with. Runtime shadow node reference updates can point the renderer at
+such a revision. For example, when `<Activity>` hides a subtree the renderer
+commits a `display: none` clone of the subtree's host root. Laying out that
+clone zeroes out clones of its children, and those clones inherit the children's
+runtime references, while the renderer keeps cloning from the visible host root.
+Without the layout check, the next clone of that host root would keep its cached
+layout and Yoga would never revisit the zeroed children.