-
Notifications
You must be signed in to change notification settings - Fork 24.9k
Open
Labels
Description
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:
