react-native icon indicating copy to clipboard operation
react-native copied to clipboard

[android][text] Fix text layout width calculation on Android 15 plus

Open linhvovan29546 opened this issue 1 month ago • 3 comments

Summary:

After testing the patch from #54721, I noticed text-rendering issues in rn-tester on Android: some text is truncated and some lines do not wrap to the next line because the measured layout width calculation is inconsistent with how Android actually renders the text. This PR fixes two issues affecting text rendering on Android 15+

  1. Missing handling for YogaMeasureMode.EXACTLY When the createLayout specifies an exact width constraint (EXACTLY mode), the current code falls through to the else and returns ceil(desiredVisualWidth) instead of respecting the exact width constraint. This causes the measured width to not match the container width, breaking layout calculation https://github.com/facebook/react-native/pull/54871#discussion_r2616256604
  2. The second bug, I couldn’t reproduce this in rn‑tester. In the Expensify App, when text has a specific lineHeight then the computed width is incorrect, which causes labels to clip or be truncated (see screenshot 2). While debugging I found the line-width calculation was wrong, then i replacing the getLineRight/getLineLeft approach with getLineMax for computing line width resolves the issue. https://github.com/facebook/react-native/pull/54871#discussion_r2616262990
Screenshot 1 Screenshot 2
Screenshot 2025-12-12 at 21 25 03 Image

Changelog:

[ANDROID] [FIXED] - Fix text layout calculation on Android 15+

Test Plan:

  • Precondition: Set the font size to minimum on the test device/emulator. Screenshot_1765548594

Tests

  • Run the tests from https://github.com/facebook/react-native/issues/53286 to verify the original issue.
  • Run rn-tester and navigate to the Text component examples then verify that the text is not truncated and lines wrap

Results:

https://github.com/user-attachments/assets/c0c7b31c-ddaa-4031-a6b9-238beeacf288

linhvovan29546 avatar Dec 12 '25 14:12 linhvovan29546

Hi @chrfalch I'm tagging you because you authored https://github.com/facebook/react-native/pull/54721 and will likely have useful context that can help with this PR. This is my first PR, any feedback would be greatly appreciated

linhvovan29546 avatar Dec 12 '25 14:12 linhvovan29546

Thanks for mentioning me, @linhvovan29546 - appreciate it! Could you try to explain the fix in more detail, like what was wrong with the previous solution and why your solution fixes it? Then it is much more easy for us to review it!

Thanks :)

chrfalch avatar Dec 12 '25 19:12 chrfalch

Thanks a lot! I’ve added two sections to the PR description. Please ask me for more details if anything is unclear.

linhvovan29546 avatar Dec 15 '25 04:12 linhvovan29546

the best

yelisei-krupin avatar Dec 29 '25 19:12 yelisei-krupin