[android][text] Fix text layout width calculation on Android 15 plus
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+
- Missing handling for
YogaMeasureMode.EXACTLYWhen thecreateLayoutspecifies an exact width constraint (EXACTLYmode), the current code falls through to the else and returnsceil(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 - The second bug, I couldn’t reproduce this in
rn‑tester. In the Expensify App, when text has a specificlineHeightthen the computed width is incorrect, which causes labels toclipor betruncated(see screenshot 2). While debugging I found theline-widthcalculation was wrong, then i replacing thegetLineRight/getLineLeftapproach withgetLineMaxfor computing line width resolves the issue. https://github.com/facebook/react-native/pull/54871#discussion_r2616262990
| Screenshot 1 | Screenshot 2 |
|---|---|
Changelog:
[ANDROID] [FIXED] - Fix text layout calculation on Android 15+
Test Plan:
- Precondition: Set the font size to minimum on the test device/emulator.
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
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
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 :)
Thanks a lot! I’ve added two sections to the PR description. Please ask me for more details if anything is unclear.
the best