fix: yoga crash with display:none (#57197)

Summary:
X-link: react/yoga#1976

It fixes this issue: #52349
Basically, in some rare cases, having an element with `display:none` style caused the app to crash.

It was caused by a stale `hasNewLayout` flag on the hidden view
That flag was always set in `computeFlexBasisForChildren` for elements with `display:none` style, but could be never consumed/reset, because of a cache hit or something.
Since such elements contribute nothing to the layout sizes, I made the change to actually touch them only during actual layout passes

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[GENERAL] [FIXED] - Crash: YogaLayoutableShadowNode.cpp: function layout: assertion failed (YGNodeGetOwner(childYogaNode) == &yogaNode_) #52349

Pull Request resolved: #57197

Test Plan:
I created a reproduction repo: https://github.com/5ZYSZ3K/native-tabs-crash-repro, to see the issue
And to see, that my change fixes it, you can switch to `patch-yoga` branch there, and install it again (don't forget to install pods with `RCT_USE_PREBUILT_RNCORE=0 RCT_USE_RN_DEP=0` variables)

Reviewed By: christophpurrer

Differential Revision: D108796888

Pulled By: javache

fbshipit-source-id: 455e3ddbec760dbee875c02f0ed6266b9a417e9a

Author: 5ZYSZ3K

packages/react-native/Libraries/Components/View/__tests__/View-yogaNodeOwnerAssertion-itest.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {useState} from 'react';
+import {TextInput, View} from 'react-native';
+
+const VIEWPORT_WIDTH = 390;
+const VIEWPORT_HEIGHT = 844;
+
+// State setters captured during render so the test can drive the two-step repro
+// from outside the component. In RNTesterPlayground these are wired to two
+// buttons ("Step 1: resize container" / "Step 2: restyle input"); here we call
+// them directly, each inside its own `runTask` so every step is a full commit
+// plus Yoga layout pass.
+let triggerResize: () => void = () => {};
+let triggerRestyle: () => void = () => {};
+
+function Repro(): React.MixedElement {
+  const [tall, setTall] = useState(false);
+  const [highlighted, setHighlighted] = useState(false);
+
+  triggerResize = () => setTall(v => !v);
+  triggerRestyle = () => setHighlighted(v => !v);
+
+  return (
+    <View style={{flex: 1}}>
+      {/* Step 1 changes the height of this wrapper. The row's own size is
+          content-determined and does not change. */}
+      <View style={{height: tall ? 400 : 300, justifyContent: 'center'}}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+          {/* The centered wrapper + its `display: none` child are the nodes
+              whose Yoga ownership leaks across generations. */}
+          <View style={{justifyContent: 'center'}}>
+            <View style={{display: 'none'}} />
+          </View>
+          <TextInput
+            style={[
+              {borderWidth: 1, minWidth: 120},
+              highlighted && {borderColor: 'red'},
+            ]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// Repro for (New Architecture, debug build):
+//
+//   Assertion failed: (YGNodeGetOwner(childYogaNode) == &yogaNode_),
+//   function layout, file YogaLayoutableShadowNode.cpp, line 709
+//
+// Mechanism:
+//
+// 1. Step 1 resizes the container wrapping the row. The row's content-determined
+//    size does not change, so Yoga re-MEASURES the row subtree with new
+//    constraints (a measure-only pass: `zeroOutLayoutRecursively` wipes the
+//    `display: none` child and sets `hasNewLayout` on it) but restores the row's
+//    final layout from cache. RN's metrics traversal never visits the centered
+//    wrapper, so the `hasNewLayout` flag on the hidden child is never consumed --
+//    it leaks across the commit.
+//
+// 2. Step 2 changes only the TextInput's props. Fabric clones the row with a new
+//    children list; `adoptYogaChild` clones the untouched centered wrapper via
+//    `clone({})`, which SHARES the hidden child's yoga node (stale
+//    `hasNewLayout`, owner = previous generation's wrapper). During layout the
+//    wrapper is a clean cache hit, so `cloneChildrenIfNeeded()` never repairs
+//    ownership -- yet `calculateLayoutInternal` still flags the wrapper with
+//    `hasNewLayout`. RN's traversal then descends into the wrapper, finds the
+//    shared hidden child flagged but owned by the old generation, and trips the
+//    assert.
+//
+// The KeyboardAvoidingView + focus/typing path reproduces the same sequence
+// organically (keyboard resize = step 1, restyle-on-change = step 2). If Yoga
+// aborts, `runTask` re-throws the native error synchronously and this test fails.
+test('does not trip the Yoga node owner assertion after resize then restyle', () => {
+  const root = Fantom.createRoot({
+    viewportWidth: VIEWPORT_WIDTH,
+    viewportHeight: VIEWPORT_HEIGHT,
+  });
+
+  // Initial commit + layout.
+  Fantom.runTask(() => {
+    root.render(<Repro />);
+  });
+
+  // Step 1: resize container -> measure-only pass leaks `hasNewLayout` on the
+  // hidden child.
+  Fantom.runTask(() => {
+    triggerResize();
+  });
+
+  // Step 2: restyle input -> clones the row, shares the hidden child's yoga node
+  // with stale ownership, and (when the bug is present) trips the assert during
+  // the layout pass.
+  Fantom.runTask(() => {
+    triggerRestyle();
+  });
+
+  // Reaching this point means Yoga did not abort during the second layout pass.
+  expect(root.getRenderedOutput().toJSX()).not.toBe(null);
+
+  root.destroy();
+});

packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp

@@ -615,9 +615,18 @@ static float computeFlexBasisForChildren(
   for (auto child : children) {
     child->processDimensions();
     if (child->style().display() == Display::None) {
-      zeroOutLayoutRecursively(child);
-      child->setHasNewLayout(true);
-      child->setDirty(false);
+      // Only mutate display: none children during layout passes. Zeroing them
+      // out during measure-only passes contributes nothing to the measurement,
+      // but sets `hasNewLayout` on nodes the parent's layout pass may never
+      // visit (e.g. when its layout is restored from cache, skipping
+      // `cloneChildrenIfNeeded()`). Such a leaked flag survives the commit and
+      // is copied into lazily-shared clones, later tripping the ownership
+      // assertion in `YogaLayoutableShadowNode::layout`.
+      if (performLayout) {
+        zeroOutLayoutRecursively(child);
+        child->setHasNewLayout(true);
+        child->setDirty(false);
+      }
       continue;
     }
     if (performLayout) {