[iOS] rendering Arial, underline and bold text produce bad underlining in specific case fontSize configuration

[freeboub]

Description

Underlined Bold text not correctly rendered under some specifc configuration on ios
The underline is cut at some place where it should not.

Steps to reproduce

• create an application from scrach
• put a multiline The text shall be bold, underline and Arial.
• Ensure text is long enough to render on multiple lines
• in this first add another text with higher fontSize
• In both text, configure the lineHeight is 1.9 * fontSize

Workaround & notes

• not reproduced on android
• changing 1.9 factor / font size workaround the issue.
• It happens only with "Arial" fontFamilly. ( tested in the sample with "Cochin") I didn't reproduce with our full integrated app (10 other font supported)
• ⚠️ Removing bold is fix the issue.
  -> conclusion this is a very specific ios issue with this exact configuration.

Note, I also reproduce a similar issue If I change const baseFontSize = 17; and const lineHeightFactor = 2.2; I did find other problematic configuration

Here is sample app content to reproduce the issue

const fontFamily = "Arial";

const baseFontSize = 16;
const lineHeightFactor = 1.9;

const containerStyle = {height: '50%', width: '50%', top: 100} as const;

const baseStyle = {
  fontWeight: 'bold',
  textDecorationLine: 'underline',
  fontFamily,
  fontSize: baseFontSize,
  lineHeight: baseFontSize * lineHeightFactor,
} as const;

const biggerFactor = 3;
const biggerStyle = {
  ...baseStyle,
  fontSize: baseFontSize + biggerFactor,
  lineHeight: (baseFontSize + biggerFactor) * lineHeightFactor,
} as const;

function App(): React.JSX.Element {
  return (
    <View style={containerStyle}>
        <Text style={baseStyle}>
            Here we display bold underline text in Arial font
          <Text style={biggerStyle}>
             Now let's increase the font size
          </Text>
        </Text>
    </View>
  );
}

React Native Version

0.81.4 (also reproduced on 0.79)

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.0
  CPU: (11) arm64 Apple M3 Pro
  Memory: 92.05 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.1
    path: ~/.nvm/versions/node/v20.18.1/bin/node
  Yarn:
    version: 4.5.3
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.1/bin/npm
  Watchman:
    version: 2025.06.30.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "28"
      - "31"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 26.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-30 | Google APIs ARM 64 v8a
      - android-30 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google APIs ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: 26.1.10909125
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13665796
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

N/A

MANDATORY Reproducer

https://github.com/freeboub/bug-react-native-ios-Text-rendering

Screenshots and Videos

In this image you can see rendering on ios:

Here is android version:

[hemanthbee]

Reproduced the issue, platform-ios, component-app.

[BlackCat1397]

I'm also facing this issue.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.