fix: Improve text line height calculation to properly align text on iOS

packages/react-native/Libraries/Text/React-RCTText.podspec

@@ -34,4 +34,5 @@ Pod::Spec.new do |s|
 
   s.dependency "Yoga"
   s.dependency "React-Core/RCTTextHeaders", version
+  add_dependency(s, "React-featureflags")
 end

packages/react-native/Libraries/Text/Text/RCTTextView.mm

@@ -11,6 +11,7 @@
 
 #import <React/RCTUtils.h>
 #import <React/UIView+React.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 
 #import <React/RCTTextShadowView.h>
 
@@ -98,6 +99,42 @@ - (void)setTextStorage:(NSTextStorage *)textStorage
   [self setNeedsDisplay];
 }
 
+- (CGPoint)calculateDrawingPointWithTextStorage:(NSTextStorage *)textStorage
+                                   contentFrame:(CGRect)contentFrame {
+  if ([textStorage length] == 0) {
+    return contentFrame.origin;
+  }
+
+  UIFont *font = [textStorage attribute:NSFontAttributeName atIndex:0 effectiveRange:NULL];
+  if (!font) {
+      font = [UIFont systemFontOfSize:14];
+  }
+
+  NSParagraphStyle *paragraphStyle = [textStorage attribute:NSParagraphStyleAttributeName atIndex:0 effectiveRange:NULL];
+
+  CGFloat lineHeight = font.lineHeight;
+  if (paragraphStyle && paragraphStyle.minimumLineHeight > 0) {
+      lineHeight = paragraphStyle.minimumLineHeight;
+  }
+
+  CGFloat ascent = font.ascender;
+  CGFloat descent = fabs(font.descender);
+  CGFloat textHeight = ascent + descent;
+
+  CGFloat verticalOffset = 0;
+  // Adjust vertical offset to ensure text is vertically centered relative to the line height.
+  // Positive offset when text height exceeds line height, negative when line height exceeds text height.
+  if (textHeight > lineHeight) {
+      CGFloat difference = textHeight - lineHeight;
+      verticalOffset = difference / 2.0;
+  } else if (textHeight < lineHeight) {
+      CGFloat difference = lineHeight - textHeight;
+      verticalOffset = -(difference / 2.0);
+  }
+
+  return CGPointMake(contentFrame.origin.x, contentFrame.origin.y + verticalOffset);
+}
+
 - (void)drawRect:(CGRect)rect
 {
   [super drawRect:rect];
@@ -118,8 +155,15 @@ - (void)drawRect:(CGRect)rect
 #endif
 
   NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
-  [layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:_contentFrame.origin];
-  [layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:_contentFrame.origin];
+
+  if (facebook::react::ReactNativeFeatureFlags::enableLineHeightCenteringOnIOS()) {
+    CGPoint drawingPoint = [self calculateDrawingPointWithTextStorage:_textStorage contentFrame:_contentFrame];
+    [layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:drawingPoint];
+    [layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:drawingPoint];
+  } else {
+    [layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:_contentFrame.origin];
+    [layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:_contentFrame.origin];
+  }
 
   __block UIBezierPath *highlightPath = nil;
   NSRange characterRange = [layoutManager characterRangeForGlyphRange:glyphRange actualGlyphRange:NULL];

packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm

@@ -9,6 +9,7 @@
 #import "RCTParagraphComponentAccessibilityProvider.h"
 
 #import <MobileCoreServices/UTCoreTypes.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #import <react/renderer/components/text/ParagraphProps.h>
 #import <react/renderer/components/text/ParagraphState.h>
@@ -326,6 +327,40 @@ @implementation RCTParagraphTextView {
   CAShapeLayer *_highlightLayer;
 }
 
+- (CGRect)calculateCenteredFrameWithAttributedText:(NSAttributedString *)attributedText
+                                             frame:(CGRect)frame {
+  UIFont *font = [attributedText attribute:NSFontAttributeName atIndex:0 effectiveRange:NULL];
+  if (!font) {
+      font = [UIFont systemFontOfSize:14];
+  }
+
+  NSParagraphStyle *paragraphStyle = [attributedText attribute:NSParagraphStyleAttributeName atIndex:0 effectiveRange:NULL];
+  CGFloat lineHeight = font.lineHeight;
+
+  if (paragraphStyle && paragraphStyle.minimumLineHeight > 0) {
+      lineHeight = paragraphStyle.minimumLineHeight;
+  }
+
+  CGFloat ascent = font.ascender;
+  CGFloat descent = fabs(font.descender);
+  CGFloat textHeight = ascent + descent;
+
+  CGFloat verticalOffset = 0;
+  // Adjust vertical offset to ensure text is vertically centered relative to the line height.
+  // Positive offset when text height exceeds line height, negative when line height exceeds text height.
+  if (textHeight > lineHeight) {
+      CGFloat difference = textHeight - lineHeight;
+      verticalOffset = difference / 2.0;
+  } else if (textHeight < lineHeight) {
+      CGFloat difference = lineHeight - textHeight;
+      verticalOffset = -(difference / 2.0);
+  }
+
+  frame.origin.y += verticalOffset;
+
+  return frame;
+}
+
 - (void)drawRect:(CGRect)rect
 {
   if (!_state) {
@@ -343,6 +378,11 @@ - (void)drawRect:(CGRect)rect
 
   CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
 
+  if (ReactNativeFeatureFlags::enableLineHeightCenteringOnIOS()) {
+    NSAttributedString *attributedText = RCTNSAttributedStringFromAttributedString(_state->getData().attributedString);
+    frame = [self calculateCenteredFrameWithAttributedText:attributedText frame:frame];
+  }
+
   [nativeTextLayoutManager drawAttributedString:_state->getData().attributedString
                             paragraphAttributes:_paragraphAttributes
                                           frame:frame

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<<69be45d967e3883a960c49d760fc2ca1>>
+ * @generated SignedSource<<4712d7a31ed7d6a5804bb381ffa77191>>
  */
 
 /**
@@ -124,6 +124,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableLayoutAnimationsOnIOS(): Boolean = accessor.enableLayoutAnimationsOnIOS()
 
+  /**
+   * When enabled, custom line height calculation will be centered from top to bottom.
+   */
+  @JvmStatic
+  public fun enableLineHeightCenteringOnIOS(): Boolean = accessor.enableLineHeightCenteringOnIOS()
+
   /**
    * Enables the reporting of long tasks through `PerformanceObserver`. Only works if the event loop is enabled.
    */

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<<e6816ffbe4d790d219c6aced5b3c695c>>
+ * @generated SignedSource<<6739b41fc0c103d2b3470e9cccaad638>>
  */
 
 /**
@@ -36,6 +36,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var enableJSRuntimeGCOnMemoryPressureOnIOSCache: Boolean? = null
   private var enableLayoutAnimationsOnAndroidCache: Boolean? = null
   private var enableLayoutAnimationsOnIOSCache: Boolean? = null
+  private var enableLineHeightCenteringOnIOSCache: Boolean? = null
   private var enableLongTaskAPICache: Boolean? = null
   private var enableNewBackgroundAndBorderDrawablesCache: Boolean? = null
   private var enablePreciseSchedulingForPremountItemsOnAndroidCache: Boolean? = null
@@ -206,6 +207,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableLineHeightCenteringOnIOS(): Boolean {
+    var cached = enableLineHeightCenteringOnIOSCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableLineHeightCenteringOnIOS()
+      enableLineHeightCenteringOnIOSCache = cached
+    }
+    return cached
+  }
+
   override fun enableLongTaskAPI(): Boolean {
     var cached = enableLongTaskAPICache
     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<<fa884f44a3f1e00a3853393bb3e8dff7>>
+ * @generated SignedSource<<e90f0b6dbc9ad01286a84e78788f21ea>>
  */
 
 /**
@@ -60,6 +60,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableLayoutAnimationsOnIOS(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableLineHeightCenteringOnIOS(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableLongTaskAPI(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableNewBackgroundAndBorderDrawables(): 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<<71ea4cd62cc16ed718fdc764ec97d0e8>>
+ * @generated SignedSource<<537142a8aa58b713583e74b056725240>>
  */
 
 /**
@@ -55,6 +55,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableLayoutAnimationsOnIOS(): Boolean = true
 
+  override fun enableLineHeightCenteringOnIOS(): Boolean = false
+
   override fun enableLongTaskAPI(): Boolean = false
 
   override fun enableNewBackgroundAndBorderDrawables(): 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<<2896efd81aed8e0100d61e739cb2ba04>>
+ * @generated SignedSource<<5977cd6aab8dcebeeab91d741574b63c>>
  */
 
 /**
@@ -40,6 +40,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var enableJSRuntimeGCOnMemoryPressureOnIOSCache: Boolean? = null
   private var enableLayoutAnimationsOnAndroidCache: Boolean? = null
   private var enableLayoutAnimationsOnIOSCache: Boolean? = null
+  private var enableLineHeightCenteringOnIOSCache: Boolean? = null
   private var enableLongTaskAPICache: Boolean? = null
   private var enableNewBackgroundAndBorderDrawablesCache: Boolean? = null
   private var enablePreciseSchedulingForPremountItemsOnAndroidCache: Boolean? = null
@@ -226,6 +227,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun enableLineHeightCenteringOnIOS(): Boolean {
+    var cached = enableLineHeightCenteringOnIOSCache
+    if (cached == null) {
+      cached = currentProvider.enableLineHeightCenteringOnIOS()
+      accessedFeatureFlags.add("enableLineHeightCenteringOnIOS")
+      enableLineHeightCenteringOnIOSCache = cached
+    }
+    return cached
+  }
+
   override fun enableLongTaskAPI(): Boolean {
     var cached = enableLongTaskAPICache
     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<<8f051d9cd1918cdf584de4d469f40ae9>>
+ * @generated SignedSource<<aed3b9a65d4d714a677ca9390e5a2277>>
  */
 
 /**
@@ -55,6 +55,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableLayoutAnimationsOnIOS(): Boolean
 
+  @DoNotStrip public fun enableLineHeightCenteringOnIOS(): Boolean
+
   @DoNotStrip public fun enableLongTaskAPI(): Boolean
 
   @DoNotStrip public fun enableNewBackgroundAndBorderDrawables(): 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<<f09ad92744f524ede76f699f3188288f>>
+ * @generated SignedSource<<b33942d5af97bd1f17ba37b4ebf8cf9f>>
  */
 
 /**
@@ -135,6 +135,12 @@ class ReactNativeFeatureFlagsProviderHolder
     return method(javaProvider_);
   }
 
+  bool enableLineHeightCenteringOnIOS() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableLineHeightCenteringOnIOS");
+    return method(javaProvider_);
+  }
+
   bool enableLongTaskAPI() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableLongTaskAPI");
@@ -369,6 +375,11 @@ bool JReactNativeFeatureFlagsCxxInterop::enableLayoutAnimationsOnIOS(
   return ReactNativeFeatureFlags::enableLayoutAnimationsOnIOS();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::enableLineHeightCenteringOnIOS(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::enableLineHeightCenteringOnIOS();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::enableLongTaskAPI(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::enableLongTaskAPI();
@@ -573,6 +584,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "enableLayoutAnimationsOnIOS",
         JReactNativeFeatureFlagsCxxInterop::enableLayoutAnimationsOnIOS),
+      makeNativeMethod(
+        "enableLineHeightCenteringOnIOS",
+        JReactNativeFeatureFlagsCxxInterop::enableLineHeightCenteringOnIOS),
       makeNativeMethod(
         "enableLongTaskAPI",
         JReactNativeFeatureFlagsCxxInterop::enableLongTaskAPI),

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<<94c5db58f8b59d4ccc16e4983d3c6f2e>>
+ * @generated SignedSource<<17c531c4941b33eef569914f7bc32b2b>>
  */
 
 /**
@@ -78,6 +78,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool enableLayoutAnimationsOnIOS(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool enableLineHeightCenteringOnIOS(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool enableLongTaskAPI(
     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<<1eb35511f4c5fd393c234c026709eb11>>
+ * @generated SignedSource<<ac78c7c42ee6ff99d72f0dc77ae4d8a6>>
  */
 
 /**
@@ -90,6 +90,10 @@ bool ReactNativeFeatureFlags::enableLayoutAnimationsOnIOS() {
   return getAccessor().enableLayoutAnimationsOnIOS();
 }
 
+bool ReactNativeFeatureFlags::enableLineHeightCenteringOnIOS() {
+  return getAccessor().enableLineHeightCenteringOnIOS();
+}
+
 bool ReactNativeFeatureFlags::enableLongTaskAPI() {
   return getAccessor().enableLongTaskAPI();
 }

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<<88118789d97156c16a7ab691ca181d00>>
+ * @generated SignedSource<<a01cac77b59efaca8c67d314cea41862>>
  */
 
 /**
@@ -119,6 +119,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool enableLayoutAnimationsOnIOS();
 
+  /**
+   * When enabled, custom line height calculation will be centered from top to bottom.
+   */
+  RN_EXPORT static bool enableLineHeightCenteringOnIOS();
+
   /**
    * Enables the reporting of long tasks through `PerformanceObserver`. Only works if the event loop is enabled.
    */