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

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 @@
   [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 @@
 #endif
 
   NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
-  [layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:_contentFrame.origin];
-  [layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:_contentFrame.origin];
+
+  if (ReactNativeFeatureFlags::enableLineHeightCentering()) {
+    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];
@@ -282,10 +326,10 @@
                                         error:nil];
 
   if (rtf) {
     [item setObject:rtf forKey:(id)kUTTypeFlatRTFD];
   }
 
   [item setObject:attributedText.string forKey:(id)kUTTypeUTF8PlainText];
 
   UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
   pasteboard.items = @[ item ];

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::enableLineHeightCentering()) {
+    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<<405d53cd6aba78616b8690c26a0accad>>
+ * @generated SignedSource<<8c1e36bc5a0baac0def70ea35dcb9e59>>
  */
 
 /**
@@ -58,12 +58,6 @@ 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()
-
   /**
    * Feature flag to enable the new bridgeless architecture. Note: Enabling this will force enable the following flags: `useTurboModules` & `enableFabricRenderer.
    */
@@ -136,6 +130,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 enableLineHeightCentering(): Boolean = accessor.enableLineHeightCentering()
+
   /**
    * 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<<84ee754f916b48a7c55ea94e166510c7>>
+ * @generated SignedSource<<a958631ee6706d85d8cd7e0222873b44>>
  */
 
 /**
@@ -25,7 +25,6 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var batchRenderingUpdatesInEventLoopCache: Boolean? = null
   private var completeReactInstanceCreationOnBgThreadOnAndroidCache: Boolean? = null
   private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
-  private var enableAndroidLineHeightCenteringCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
   private var enableCleanTextInputYogaNodeCache: Boolean? = null
   private var enableDeletionOfUnmountedViewsCache: Boolean? = null
@@ -38,6 +37,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var enableIOSViewClipToPaddingBoxCache: Boolean? = null
   private var enableLayoutAnimationsOnAndroidCache: Boolean? = null
   private var enableLayoutAnimationsOnIOSCache: Boolean? = null
+  private var enableLineHeightCenteringCache: Boolean? = null
   private var enableLongTaskAPICache: Boolean? = null
   private var enableMicrotasksCache: Boolean? = null
   private var enablePreciseSchedulingForPremountItemsOnAndroidCache: Boolean? = null
@@ -115,15 +115,6 @@ 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 enableBridgelessArchitecture(): Boolean {
     var cached = enableBridgelessArchitectureCache
     if (cached == null) {
@@ -232,6 +223,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
     return cached
   }
 
+  override fun enableLineHeightCentering(): Boolean {
+    var cached = enableLineHeightCenteringCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableLineHeightCentering()
+      enableLineHeightCenteringCache = 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<<eebeaa749dafac5d49d9d6b356f88817>>
+ * @generated SignedSource<<fef3e1f705f22d87e84eb406cf9b7805>>
  */
 
 /**
@@ -38,8 +38,6 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableAlignItemsBaselineOnFabricIOS(): Boolean
 
-  @DoNotStrip @JvmStatic public external fun enableAndroidLineHeightCentering(): Boolean
-
   @DoNotStrip @JvmStatic public external fun enableBridgelessArchitecture(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableCleanTextInputYogaNode(): Boolean
@@ -64,6 +62,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableLayoutAnimationsOnIOS(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableLineHeightCentering(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableLongTaskAPI(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableMicrotasks(): 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<<d44c7d51caea5eaa3074217361959b3a>>
+ * @generated SignedSource<<624e9e1c096417a3441a091dd74b0641>>
  */
 
 /**
@@ -33,8 +33,6 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableAlignItemsBaselineOnFabricIOS(): Boolean = true
 
-  override fun enableAndroidLineHeightCentering(): Boolean = false
-
   override fun enableBridgelessArchitecture(): Boolean = false
 
   override fun enableCleanTextInputYogaNode(): Boolean = false
@@ -59,6 +57,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableLayoutAnimationsOnIOS(): Boolean = true
 
+  override fun enableLineHeightCentering(): Boolean = false
+
   override fun enableLongTaskAPI(): Boolean = false
 
   override fun enableMicrotasks(): 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<<4dc2364f5bcd765d7b61dbcab0d9533d>>
+ * @generated SignedSource<<c6be21a8b82bb3c14f2c83ff0c95d275>>
  */
 
 /**
@@ -29,7 +29,6 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var batchRenderingUpdatesInEventLoopCache: Boolean? = null
   private var completeReactInstanceCreationOnBgThreadOnAndroidCache: Boolean? = null
   private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
-  private var enableAndroidLineHeightCenteringCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
   private var enableCleanTextInputYogaNodeCache: Boolean? = null
   private var enableDeletionOfUnmountedViewsCache: Boolean? = null
@@ -42,6 +41,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var enableIOSViewClipToPaddingBoxCache: Boolean? = null
   private var enableLayoutAnimationsOnAndroidCache: Boolean? = null
   private var enableLayoutAnimationsOnIOSCache: Boolean? = null
+  private var enableLineHeightCenteringCache: Boolean? = null
   private var enableLongTaskAPICache: Boolean? = null
   private var enableMicrotasksCache: Boolean? = null
   private var enablePreciseSchedulingForPremountItemsOnAndroidCache: Boolean? = null
@@ -124,16 +124,6 @@ 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 enableBridgelessArchitecture(): Boolean {
     var cached = enableBridgelessArchitectureCache
     if (cached == null) {
@@ -254,6 +244,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableLineHeightCentering(): Boolean {
+    var cached = enableLineHeightCenteringCache
+    if (cached == null) {
+      cached = currentProvider.enableLineHeightCentering()
+      accessedFeatureFlags.add("enableLineHeightCentering")
+      enableLineHeightCenteringCache = 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<<193bb7803261004003d9009b44810c2c>>
+ * @generated SignedSource<<efde0d209c0d923a625dffdc496beace>>
  */
 
 /**
@@ -33,8 +33,6 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableAlignItemsBaselineOnFabricIOS(): Boolean
 
-  @DoNotStrip public fun enableAndroidLineHeightCentering(): Boolean
-
   @DoNotStrip public fun enableBridgelessArchitecture(): Boolean
 
   @DoNotStrip public fun enableCleanTextInputYogaNode(): Boolean
@@ -59,6 +57,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableLayoutAnimationsOnIOS(): Boolean
 
+  @DoNotStrip public fun enableLineHeightCentering(): Boolean
+
   @DoNotStrip public fun enableLongTaskAPI(): Boolean
 
   @DoNotStrip public fun enableMicrotasks(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/CustomLineHeightSpan.kt

@@ -107,7 +107,7 @@ public class CustomLineHeightSpan(height: Float) : LineHeightSpan, ReactSpan {
       v: Int,
       fm: FontMetricsInt,
   ) {
-    if (ReactNativeFeatureFlags.enableAndroidLineHeightCentering()) chooseCenteredHeight(fm)
+    if (ReactNativeFeatureFlags.enableLineHeightCentering()) chooseCenteredHeight(fm)
     else chooseOriginalHeight(fm)
   }
 }