Add fixYogaFlexBasisFitContentInMainAxis flag to avoid unnecessary re-measurement (#55897)

Summary:
X-link: react/yoga#1909

Pull Request resolved: #55897

changelog: [internal]

this change is gated.

## Problem

When Yoga computes flex basis for container children, the legacy behavior
applies a `FitContent` constraint in the **main axis**, bounding the child's
measurement by the parent's available space. This creates a dependency between
the child's flex basis and the parent's content-determined size, causing
**unnecessary re-measurement and cascading ownership clones** when siblings
change size.

### The re-measurement cascade (before fix)

```
  ScrollView (overflow: scroll)
  +-------------------------------+
  | Content Container (auto h)    |
  | +---------------------------+ |
  | | Item A  h=200             | |  <-- Item A height changes
  | +---------------------------+ |
  | | Item B  h=300             | |
  | +---------------------------+ |
  | | Item C  h=150             | |
  | +---------------------------+ |
  +-------------------------------+
         |
         v  Content container height changes (200+300+150 = 650)
         |
         v  FitContent(650) re-measures ALL items  <-- PROBLEM
         |     because their flex basis was FitContent(old_height)
         v
     Cascading clones of the entire subtree
```

With the legacy `FitContent` in the main axis, each item's flex basis is
`min(content, parent_height)`. When Item A changes height, the content
container's height changes, which invalidates the FitContent constraint
for ALL items, triggering a full re-measurement cascade.

### After fix (MaxContent in main axis)

```
  ScrollView (overflow: scroll)
  +-------------------------------+
  | Content Container (auto h)    |
  | +---------------------------+ |
  | | Item A  h=200 -> 250      | |  <-- Item A height changes
  | +---------------------------+ |
  | | Item B  h=300             | |  <-- NOT re-measured (basis unchanged)
  | +---------------------------+ |
  | | Item C  h=150             | |  <-- NOT re-measured (basis unchanged)
  | +---------------------------+ |
  +-------------------------------+
         |
         v  Content container height changes (250+300+150 = 700)
         |
         v  Only Item A is re-measured. B and C keep their
            MaxContent flex basis (independent of parent height).
```

With `MaxContent`, each item's flex basis is its intrinsic content size,
independent of the parent. Changing one item doesn't invalidate siblings.

## Solution

This diff adds a `FlexBasisFitContentInMainAxis` errata bit gated by the
`fixYogaFlexBasisFitContentInMainAxis` feature flag. When the fix is active,
flex basis measurement uses `MaxContent` (unbounded) instead of `FitContent`
for container children in the main axis.

### Three check points in `computeFlexBasisForChild`

```
  computeFlexBasisForChild(parent, child)
  |
  |-- Check 1: Accept positive flex basis when mainAxisSize is NaN
  |   (fixes flexBasis:200 items in ScrollView getting height 0)
  |
  |-- Check 2: FitContent vs MaxContent constraint
  |   +--------------------------------------------------+
  |   | Parent type        | Legacy (errata) | Fix       |
  |   |--------------------+-----------------+-----------|
  |   | Auto height        | FitContent      | MaxContent|  <-- key change
  |   | Definite height    | FitContent      | FitContent|  <-- preserved
  |   | Scroll container   | MaxContent      | MaxContent|  <-- unchanged
  |   | Text child (any)   | FitContent      | FitContent|  <-- preserved
  |   +--------------------------------------------------+
  |
  |-- Check 3: ownerHeightForChildren fallback
      (preserves percentage resolution when availableInnerHeight is NaN)
```

### Why definite-height parents keep FitContent

Yoga's default `flexShrink` is 0 (unlike CSS's default of 1). Without
FitContent, a child measured at MaxContent would get a flex basis equal
to its full content height and never shrink to fit:

```
  View (height: 760)                 View (height: 760)
  +-------------------+              +-------------------+
  | Wrapper (auto h)  |              | Wrapper (auto h)  |
  | +-----------+     |              | +-----------+-----|----+
  | | ScrollView|     |              | | ScrollView|     |    |
  | | content:  |     |              | | content:  |     |    |
  | | 1800px    |     |              | | 1800px    |     |    |
  | +-----------+     |              | |           |     |    |
  | h=760 (bounded)   |              | +-----------+     |    |
  +-------------------+              +---|---------+-----|----+
   FitContent: wrapper=760                | h=1800 (overflows!)
   ScrollView can scroll                  MaxContent: wrapper=1800
                                          flexShrink=0, no shrinking
                                          ScrollView frame=1800=content
                                          scrollable range = 0!
```

For **definite-height** parents, FitContent is safe (the parent's size is
fixed, so no re-measurement cascade). For **auto-height** parents, MaxContent
is used to avoid the cascade.

### Percentage resolution preservation (Check 3)

When MaxContent is used, `availableInnerHeight` becomes NaN. This would
break percentage-height grandchildren. Check 3 derives a definite
`ownerHeightForChildren` from the parent-provided `ownerHeight`:

```
  View (height: 844)
  +---------------------------+
  | Wrapper (auto h)          |  availableInnerHeight = NaN (MaxContent)
  | ownerHeight = 844         |  ownerHeightForChildren = 844 (from Check 3)
  | +-----+  +-----------+   |
  | |h:500|  |h:'50%'    |   |  50% resolves against 844, not NaN
  | |     |  |= 422      |   |
  | +-----+  +-----------+   |
  +---------------------------+
```

Children of scroll containers skip this fallback (scroll content is
intentionally unbounded).

Reviewed By: javache

Differential Revision: D94658492

fbshipit-source-id: 1587151670803ace0eae2ee91883fe4be72bfa27

Author: sammy-SC

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<38f50776ad2b88fa69b710dbd67315e2>>
+ * @generated SignedSource<<66d3b8ed600077a287d6d7d8f6230b7b>>
  */
 
 /**
@@ -384,6 +384,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun fixTextClippingAndroid15useBoundsForWidth(): Boolean = accessor.fixTextClippingAndroid15useBoundsForWidth()
 
+  /**
+   * When enabled, Yoga will not apply a FitContent constraint in the main axis during flex basis computation for non-measure container nodes. This prevents unnecessary re-measurement and cascading clones when a sibling changes size in a ScrollView.
+   */
+  @JvmStatic
+  public fun fixYogaFlexBasisFitContentInMainAxis(): Boolean = accessor.fixYogaFlexBasisFitContentInMainAxis()
+
   /**
    * Enable system assertion validating that Fusebox is configured with a single host. When set, the CDP backend will dynamically disable features (Perf and Network) in the event that multiple hosts are registered (undefined behaviour), and broadcast this over `ReactNativeApplication.systemStateChanged`.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<e831db22fd6d79e3caff459a6058e297>>
+ * @generated SignedSource<<98c5f6184864381e579a9df82741928b>>
  */
 
 /**
@@ -79,6 +79,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var fixFindShadowNodeByTagRaceConditionCache: Boolean? = null
   private var fixMappingOfEventPrioritiesBetweenFabricAndReactCache: Boolean? = null
   private var fixTextClippingAndroid15useBoundsForWidthCache: Boolean? = null
+  private var fixYogaFlexBasisFitContentInMainAxisCache: Boolean? = null
   private var fuseboxAssertSingleHostStateCache: Boolean? = null
   private var fuseboxEnabledReleaseCache: Boolean? = null
   private var fuseboxNetworkInspectionEnabledCache: Boolean? = null
@@ -639,6 +640,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun fixYogaFlexBasisFitContentInMainAxis(): Boolean {
+    var cached = fixYogaFlexBasisFitContentInMainAxisCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.fixYogaFlexBasisFitContentInMainAxis()
+      fixYogaFlexBasisFitContentInMainAxisCache = cached
+    }
+    return cached
+  }
+
   override fun fuseboxAssertSingleHostState(): Boolean {
     var cached = fuseboxAssertSingleHostStateCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<85d23b5f33a6a09c1e42b976a3a99f2f>>
+ * @generated SignedSource<<2bf2a1dec031145181f6bc28c50cf32a>>
  */
 
 /**
@@ -146,6 +146,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun fixTextClippingAndroid15useBoundsForWidth(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun fixYogaFlexBasisFitContentInMainAxis(): Boolean
+
   @DoNotStrip @JvmStatic public external fun fuseboxAssertSingleHostState(): Boolean
 
   @DoNotStrip @JvmStatic public external fun fuseboxEnabledRelease(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<4adf4e6f40b726bf9d3680301fb92e1f>>
+ * @generated SignedSource<<89cd07b543fc079341bb3a5d90e50d13>>
  */
 
 /**
@@ -141,6 +141,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun fixTextClippingAndroid15useBoundsForWidth(): Boolean = false
 
+  override fun fixYogaFlexBasisFitContentInMainAxis(): Boolean = false
+
   override fun fuseboxAssertSingleHostState(): Boolean = true
 
   override fun fuseboxEnabledRelease(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<2115ff3be1f3944d499090d3089d185b>>
+ * @generated SignedSource<<e82235d73386509fc2378a5b8e4b2cfa>>
  */
 
 /**
@@ -83,6 +83,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var fixFindShadowNodeByTagRaceConditionCache: Boolean? = null
   private var fixMappingOfEventPrioritiesBetweenFabricAndReactCache: Boolean? = null
   private var fixTextClippingAndroid15useBoundsForWidthCache: Boolean? = null
+  private var fixYogaFlexBasisFitContentInMainAxisCache: Boolean? = null
   private var fuseboxAssertSingleHostStateCache: Boolean? = null
   private var fuseboxEnabledReleaseCache: Boolean? = null
   private var fuseboxNetworkInspectionEnabledCache: Boolean? = null
@@ -702,6 +703,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun fixYogaFlexBasisFitContentInMainAxis(): Boolean {
+    var cached = fixYogaFlexBasisFitContentInMainAxisCache
+    if (cached == null) {
+      cached = currentProvider.fixYogaFlexBasisFitContentInMainAxis()
+      accessedFeatureFlags.add("fixYogaFlexBasisFitContentInMainAxis")
+      fixYogaFlexBasisFitContentInMainAxisCache = cached
+    }
+    return cached
+  }
+
   override fun fuseboxAssertSingleHostState(): Boolean {
     var cached = fuseboxAssertSingleHostStateCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<1bbbe280815927e0f977f1d1e7787937>>
+ * @generated SignedSource<<e3051a7aec6e7da31a65eb2d58fcd64b>>
  */
 
 /**
@@ -141,6 +141,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun fixTextClippingAndroid15useBoundsForWidth(): Boolean
 
+  @DoNotStrip public fun fixYogaFlexBasisFitContentInMainAxis(): Boolean
+
   @DoNotStrip public fun fuseboxAssertSingleHostState(): Boolean
 
   @DoNotStrip public fun fuseboxEnabledRelease(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaErrata.java

@@ -14,6 +14,7 @@ public enum YogaErrata {
   STRETCH_FLEX_BASIS(1),
   ABSOLUTE_POSITION_WITHOUT_INSETS_EXCLUDES_PADDING(2),
   ABSOLUTE_PERCENT_AGAINST_INNER_SIZE(4),
+  FLEX_BASIS_FIT_CONTENT_IN_MAIN_AXIS(8),
   ALL(2147483647),
   CLASSIC(2147483646);
 
@@ -33,6 +34,7 @@ public static YogaErrata fromInt(int value) {
       case 1: return STRETCH_FLEX_BASIS;
       case 2: return ABSOLUTE_POSITION_WITHOUT_INSETS_EXCLUDES_PADDING;
       case 4: return ABSOLUTE_PERCENT_AGAINST_INNER_SIZE;
+      case 8: return FLEX_BASIS_FIT_CONTENT_IN_MAIN_AXIS;
       case 2147483647: return ALL;
       case 2147483646: return CLASSIC;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b2033680b5b3f22a679022e3fd7edbc0>>
+ * @generated SignedSource<<95380ca380ce7c5d3d2293b105d42247>>
  */
 
 /**
@@ -393,6 +393,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool fixYogaFlexBasisFitContentInMainAxis() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("fixYogaFlexBasisFitContentInMainAxis");
+    return method(javaProvider_);
+  }
+
   bool fuseboxAssertSingleHostState() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("fuseboxAssertSingleHostState");
@@ -860,6 +866,11 @@ bool JReactNativeFeatureFlagsCxxInterop::fixTextClippingAndroid15useBoundsForWid
   return ReactNativeFeatureFlags::fixTextClippingAndroid15useBoundsForWidth();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::fixYogaFlexBasisFitContentInMainAxis(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::fixYogaFlexBasisFitContentInMainAxis();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::fuseboxAssertSingleHostState(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::fuseboxAssertSingleHostState();
@@ -1208,6 +1219,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "fixTextClippingAndroid15useBoundsForWidth",
         JReactNativeFeatureFlagsCxxInterop::fixTextClippingAndroid15useBoundsForWidth),
+      makeNativeMethod(
+        "fixYogaFlexBasisFitContentInMainAxis",
+        JReactNativeFeatureFlagsCxxInterop::fixYogaFlexBasisFitContentInMainAxis),
       makeNativeMethod(
         "fuseboxAssertSingleHostState",
         JReactNativeFeatureFlagsCxxInterop::fuseboxAssertSingleHostState),

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<78e35f9316b9568e7a44153d542b6ebd>>
+ * @generated SignedSource<<72294df9c57d40232a21ab83bcbd12cc>>
  */
 
 /**
@@ -207,6 +207,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool fixTextClippingAndroid15useBoundsForWidth(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool fixYogaFlexBasisFitContentInMainAxis(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool fuseboxAssertSingleHostState(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<8643070722a65532f6c928ed82ca2aa5>>
+ * @generated SignedSource<<faa098824843d977ad6207d243284603>>
  */
 
 /**
@@ -262,6 +262,10 @@ bool ReactNativeFeatureFlags::fixTextClippingAndroid15useBoundsForWidth() {
   return getAccessor().fixTextClippingAndroid15useBoundsForWidth();
 }
 
+bool ReactNativeFeatureFlags::fixYogaFlexBasisFitContentInMainAxis() {
+  return getAccessor().fixYogaFlexBasisFitContentInMainAxis();
+}
+
 bool ReactNativeFeatureFlags::fuseboxAssertSingleHostState() {
   return getAccessor().fuseboxAssertSingleHostState();
 }