A framework for building native applications using React
119.56k
stars
24.37k
forks
source link
Extra line wrap on some Android devices on some combinations of lineHeight, letterSpacing and other related properties #46436
Open
matejkriz opened 2 months ago
Description
On some Android devices (for example Redmi 10C or Pixel 6 Pro) text is a measuring bug when setting both lineHeight and letterSpacing.
Some specific combinations of fontScale, lineHeight, maxFontSizeMultiplier, letterSpacing, fontFamily and also on the text causes extra line wrap.
In our case, it was possible to "fix" it by removing maxFontSizeMultiplier or letterSpacing or lineHeight.
But as a workaround we set allowFontScaling={false} and do the font scaling manually (setting fontSize and lineHeight by the fontScale).
Already reported https://github.com/facebook/react-native/issues/35039 but closed
Steps to reproduce
React Native Version
0.75.2
Affected Platforms
Runtime - Android
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://snack.expo.dev/@matejkriztrezor/line-break-bug-demo?platform=android
Screenshots and Videos