Lines getting cut-off on Android devices with small font sizes

[LA-Johan]

Description

When device font size is set to small words in certain configuration of parent views get cut-off (see reproducer). Our users just started reporting in the last month it so I believe it was introduced in 0.79.

Steps to reproduce

UI bug, see attached screenshots.

React Native Version

0.79.1

Affected Platforms

Runtime - Android, Build - MacOS

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

$npx @react-native-community/cli info
info Fetching system and libraries information...
System:
  OS: macOS 15.3.2
  CPU: (12) arm64 Apple M3 Pro
  Memory: 112.06 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.7.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.2.0
    path: ~/node_modules/.bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/johanlndll/.gem/ruby/3.1.4/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "30"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-30 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.21829.142.2421.12409432
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.1.4
    path: /Users/johanlndll/.rubies/ruby-3.1.4/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

UI bug.

MANDATORY Reproducer

#50915

Screenshots and Videos

Emulator is Pixel_9_API_35

With the issue:

Without the issue:

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[LA-Johan]

Linked it in original, but in case it helps the bot this is pull request: #50915

[devanshsaini11]

@LA-Johan Thanks for opening the issue! While reviewing the output of npx @react-native-community/cli info, we couldn’t determine if the new architecture is enabled, could you let us know whether the problem occurs on both the old architecture and the new architecture? This will help us narrow things down.
Thanks!

[LA-Johan]

@devanshsaini11 this is only on new architecture!

[LA-Johan]

If anyone has found a workaround that would be great too. This breaks some of our core flows for users with different font sizes making some text completely unreadable.

[LA-Johan]

@devanshsaini11 do you know which classes I might investigate on the Android side to potentially fix this? If I find the time I'd be willing to try and fix this but would appreciate some pointers.

[devanshsaini11]

According to my understanding looking into TextLayoutManager or CustomLineHeightSpan might help you.

[LA-Johan]

Haven't had time to try and fix yet but can report issue persists on 0.79.2. Would appreciate any help from the team, accessibility is broken for some of our users who use larger font sizes.

[LA-Johan]

@devanshsaini11 I spent some time debugging this and I've narrowed it down to this code here

When we have a small font size, the width will be smaller than the boring.width on a second measure, causing a StaticLayout to be used, with normal font size the width will be a 1 pixel larger, and a BoringLayout is used instead.

-- SMALL FONT SIZE --
05-13 23:18:02.285 16069 16102 D TextLayoutManager: Row cutoff boring.width: 155, unconstrainedWidth: false, width: 1027.5
05-13 23:18:02.286 16069 16102 D TextLayoutManager: Row cutoff boring.width: 155, unconstrainedWidth: false, width: 132.0
05-13 23:18:02.287 16069 16102 D TextLayoutManager: Row cutoff boring.width: 155, unconstrainedWidth: false, width: 133.0

-- NORMAL FONT SIZE --
05-13 23:18:15.135 16166 16204 D TextLayoutManager: Row cutoff boring.width: 179, unconstrainedWidth: false, width: 1027.5
05-13 23:18:15.136 16166 16204 D TextLayoutManager: Row cutoff boring.width: 179, unconstrainedWidth: false, width: 180.0
05-13 23:18:15.137 16166 16204 D TextLayoutManager: Row cutoff boring.width: 179, unconstrainedWidth: false, width: 180.0

I've tried to find the source of the width but I'm getting lost in the bridging code between js and android, any pointers on where to look next?

05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.views.text.TextLayoutManager.logIfRelevant(TextLayoutManager.java:1041)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.views.text.TextLayoutManager.createLayout(TextLayoutManager.java:462)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.views.text.TextLayoutManager.createLayout(TextLayoutManager.java:609)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.views.text.TextLayoutManager.measureText(TextLayoutManager.java:725)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.views.text.ReactTextViewManager.measure(ReactTextViewManager.java:214)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.fabric.mounting.MountingManager.measureMapBuffer(MountingManager.java:415)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.fabric.FabricUIManager.measureMapBuffer(FabricUIManager.java:642)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.jni.NativeRunnable.run(Native Method)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at android.os.Handler.handleCallback(Handler.java:959)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at android.os.Handler.dispatchMessage(Handler.java:100)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.kt:21)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at android.os.Looper.loopOnce(Looper.java:232)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at android.os.Looper.loop(Looper.java:317)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion.startNewBackgroundThread$lambda$1(MessageQueueThreadImpl.kt:175)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion.$r8$lambda$ldnZnqelhYFctGaUKkOKYj5rxo4(Unknown Source:0)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion$$ExternalSyntheticLambda0.run(D8$$SyntheticClass:0)
05-14 08:55:53.810 20205 20241 D TextLayoutManager: 	at java.lang.Thread.run(Thread.java:1012)

Also, I haven't had any luck attaching a debugger to the Android code, any guides I find seem to be for generic react-native project, is there something different I need to do to debug here?