add feature flag for line height gating (#46408)

Summary:
Pull Request resolved: #46408

## Context
Adding feature flag for line height calculation centering.

There is a recurring issue in React Native where text containing accented characters, non-latin scripts, and special glyphs experiences truncation when line height is set too small, even when the line height equals or exceeds the font size. This causes issues in rendering complex text in multiple languages or special character sets.

See: https://docs.google.com/document/d/1W-A80gKAyhVbz_WKktSwwJP5qm6h6ZBjFNcsVbknXhI/edit?usp=sharing for more context

## Investigation
Previously, when font metrics (ascent, descent, top, bottom) exceeded the line height, the logic arbitrarily prioritized descent over ascent and bottom top. This led to vertical misalignment and text clipping at the top of the text.

## Implementation:

1. Descent Exceeds Line Height:
Descent is capped to fit within the line height, setting ascent and top to 0, similar to the current behavior.
2. Shrink ascent and descent equally:
When the combined ascent and descent exceed the line height, the vertical deficit is split proportionally between them, ensuring even distribution of the space.
3. Proportionally shrink top and bottom:
If the top and bottom together exceed the line height, reductions are now applied proportionally based on the delta between top and ascent and bottom and descent.

Reviewed By: NickGerleman

Differential Revision: D62421775

Author: mellyeliu

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<<6cc52570dd571ddc792a0fd842c05dd9>>
+ * @generated SignedSource<<312da6e350ea6b96180156a341810654>>
  */
 
 /**
@@ -64,6 +64,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableAlignItemsBaselineOnFabricIOS(): Boolean = accessor.enableAlignItemsBaselineOnFabricIOS()
 
+  /**
+   * When enabled, custom line height calculation will be centered from top to bottom.
+   */
+  @JvmStatic
+  public fun enableAndroidLineHeightCentering(): Boolean = accessor.enableAndroidLineHeightCentering()
+
   /**
    * Enables mix-blend-mode prop on Android.
    */

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<<eca842a1b1c823b72136c625b3bfd16e>>
+ * @generated SignedSource<<a397b9b648fab0e8b1f9d8a9dba04ab4>>
  */
 
 /**
@@ -26,6 +26,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var completeReactInstanceCreationOnBgThreadOnAndroidCache: Boolean? = null
   private var destroyFabricSurfacesInReactInstanceManagerCache: Boolean? = null
   private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
+  private var enableAndroidLineHeightCenteringCache: Boolean? = null
   private var enableAndroidMixBlendModePropCache: Boolean? = null
   private var enableBackgroundStyleApplicatorCache: Boolean? = null
   private var enableCleanTextInputYogaNodeCache: Boolean? = null
@@ -123,6 +124,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
     return cached
   }
 
+  override fun enableAndroidLineHeightCentering(): Boolean {
+    var cached = enableAndroidLineHeightCenteringCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableAndroidLineHeightCentering()
+      enableAndroidLineHeightCenteringCache = cached
+    }
+    return cached
+  }
+
   override fun enableAndroidMixBlendModeProp(): Boolean {
     var cached = enableAndroidMixBlendModePropCache
     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<<ad54375c4ae3be2f377260887ae5aaf9>>
+ * @generated SignedSource<<ba7f0d3c03fef86fb12e4d9842dcb241>>
  */
 
 /**
@@ -40,6 +40,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableAlignItemsBaselineOnFabricIOS(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableAndroidLineHeightCentering(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableAndroidMixBlendModeProp(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableBackgroundStyleApplicator(): 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<<2a0cd5a4875a54bb724e5765ffe7753e>>
+ * @generated SignedSource<<fa8245a05ab1f508318e1d18938f9dab>>
  */
 
 /**
@@ -35,6 +35,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableAlignItemsBaselineOnFabricIOS(): Boolean = true
 
+  override fun enableAndroidLineHeightCentering(): Boolean = false
+
   override fun enableAndroidMixBlendModeProp(): Boolean = false
 
   override fun enableBackgroundStyleApplicator(): Boolean = true

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<<d02af2a8ef015c57d45aba8280539606>>
+ * @generated SignedSource<<069787b84036b763c47d128e66ddd1ab>>
  */
 
 /**
@@ -30,6 +30,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var completeReactInstanceCreationOnBgThreadOnAndroidCache: Boolean? = null
   private var destroyFabricSurfacesInReactInstanceManagerCache: Boolean? = null
   private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
+  private var enableAndroidLineHeightCenteringCache: Boolean? = null
   private var enableAndroidMixBlendModePropCache: Boolean? = null
   private var enableBackgroundStyleApplicatorCache: Boolean? = null
   private var enableCleanTextInputYogaNodeCache: Boolean? = null
@@ -133,6 +134,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableAndroidLineHeightCentering(): Boolean {
+    var cached = enableAndroidLineHeightCenteringCache
+    if (cached == null) {
+      cached = currentProvider.enableAndroidLineHeightCentering()
+      accessedFeatureFlags.add("enableAndroidLineHeightCentering")
+      enableAndroidLineHeightCenteringCache = cached
+    }
+    return cached
+  }
+
   override fun enableAndroidMixBlendModeProp(): Boolean {
     var cached = enableAndroidMixBlendModePropCache
     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<<92b1214e3a526d7c67dcc7b0c2a131de>>
+ * @generated SignedSource<<978d9e8d1129951f3c5750f95e2ff5d2>>
  */
 
 /**
@@ -35,6 +35,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableAlignItemsBaselineOnFabricIOS(): Boolean
 
+  @DoNotStrip public fun enableAndroidLineHeightCentering(): Boolean
+
   @DoNotStrip public fun enableAndroidMixBlendModeProp(): Boolean
 
   @DoNotStrip public fun enableBackgroundStyleApplicator(): Boolean

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<<c23b21fca18699470580e54b99de1126>>
+ * @generated SignedSource<<63ef974f6ed666553bc0be593730a08e>>
  */
 
 /**
@@ -75,6 +75,12 @@ class ReactNativeFeatureFlagsProviderHolder
     return method(javaProvider_);
   }
 
+  bool enableAndroidLineHeightCentering() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableAndroidLineHeightCentering");
+    return method(javaProvider_);
+  }
+
   bool enableAndroidMixBlendModeProp() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableAndroidMixBlendModeProp");
@@ -361,6 +367,11 @@ bool JReactNativeFeatureFlagsCxxInterop::enableAlignItemsBaselineOnFabricIOS(
   return ReactNativeFeatureFlags::enableAlignItemsBaselineOnFabricIOS();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::enableAndroidLineHeightCentering(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::enableAndroidLineHeightCentering();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::enableAndroidMixBlendModeProp(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::enableAndroidMixBlendModeProp();
@@ -606,6 +617,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "enableAlignItemsBaselineOnFabricIOS",
         JReactNativeFeatureFlagsCxxInterop::enableAlignItemsBaselineOnFabricIOS),
+      makeNativeMethod(
+        "enableAndroidLineHeightCentering",
+        JReactNativeFeatureFlagsCxxInterop::enableAndroidLineHeightCentering),
       makeNativeMethod(
         "enableAndroidMixBlendModeProp",
         JReactNativeFeatureFlagsCxxInterop::enableAndroidMixBlendModeProp),

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<<89d0da3b2bb56a4ee3c887e6c57491b2>>
+ * @generated SignedSource<<d39aa0038255aedc5613fc2e44b9ad88>>
  */
 
 /**
@@ -48,6 +48,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool enableAlignItemsBaselineOnFabricIOS(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool enableAndroidLineHeightCentering(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool enableAndroidMixBlendModeProp(
     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<<6139aa47aac3e5682a453a416bc10236>>
+ * @generated SignedSource<<7c97c370b2f453691c153fb370bea149>>
  */
 
 /**
@@ -45,6 +45,10 @@ bool ReactNativeFeatureFlags::enableAlignItemsBaselineOnFabricIOS() {
   return getAccessor().enableAlignItemsBaselineOnFabricIOS();
 }
 
+bool ReactNativeFeatureFlags::enableAndroidLineHeightCentering() {
+  return getAccessor().enableAndroidLineHeightCentering();
+}
+
 bool ReactNativeFeatureFlags::enableAndroidMixBlendModeProp() {
   return getAccessor().enableAndroidMixBlendModeProp();
 }

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.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<<c8266eb27ec23aaa856fa95275503a81>>
+ * @generated SignedSource<<c3f43e92b0710e4a68bb76d874b3058d>>
  */
 
 /**
@@ -67,6 +67,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool enableAlignItemsBaselineOnFabricIOS();
 
+  /**
+   * When enabled, custom line height calculation will be centered from top to bottom.
+   */
+  RN_EXPORT static bool enableAndroidLineHeightCentering();
+
   /**
    * Enables mix-blend-mode prop on Android.
    */