Skip to content

Conversation

@linhvovan29546
Copy link

@linhvovan29546 linhvovan29546 commented Dec 12, 2025

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 [android][text] Fix text layout width calculation on Android 15 plus #54871 (comment)
  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. [android][text] Fix text layout width calculation on Android 15 plus #54871 (comment)
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

Results:

Screen.Recording.2025-12-12.at.21.34.50.mov

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 12, 2025
@linhvovan29546 linhvovan29546 marked this pull request as ready for review December 12, 2025 14:45
@linhvovan29546
Copy link
Author

Hi @chrfalch I'm tagging you because you authored #54721 and will likely have useful context that can help with this PR. This is my first PR, any feedback would be greatly appreciated

@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Dec 12, 2025
@chrfalch
Copy link
Collaborator

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 :)

Copy link
Author

@linhvovan29546 linhvovan29546 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrfalch I've added more details to the change rather than the PR description so we can discuss them in that thread. Could you take a look?


val layoutWidth =
when (widthYogaMeasureMode) {
YogaMeasureMode.EXACTLY -> floor(width).toInt()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In https://github.com/facebook/react-native/pull/54721/changes#diff-8cc9a4af360b3eac066d7f9cd50d91da9cb6fc2fbf044b25d495666bcc95e2ebR662-R663 we changed Android 15+ to force layoutWidth to use AT_MOST. Since widthYogaMeasureMode may be EXACTLY, we need to handle that case otherwise the text will render incorrect as shown in the description. You can look the pre‑Android 15 logic.

var desiredVisualWidth = 0f
for (i in 0 until unconstrainedLayout.lineCount) {
val lineWidth = unconstrainedLayout.getLineRight(i) - unconstrainedLayout.getLineLeft(i)
val lineWidth = unconstrainedLayout.getLineMax(i)
Copy link
Author

@linhvovan29546 linhvovan29546 Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change comes from the Expensify App( I tried to reproduce it in rn‑tester but couldn’t). When text has a lineHeight, the text rendered with width is too small, see the screenshot below where bottom‑navigation labels wrap and some text are truncated.

While debugging I found a suspicious calculation: the computed line width was too small, so I replaced the getLineRight/getLineLeft approach with getLineMax to compute the line width, which fixes the problem

Image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes a lot of sense - I guess it wold be great adding two sections in the PR description for the meta reviewer telling what's wrong in the current version - and one on how to fix it - I won't be reviewing it internally - so this might be a great addition before we move on.

Thanks again, @linhvovan29546, for your contribution!

@linhvovan29546
Copy link
Author

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

@yelisei-krupin
Copy link

the best

@linhvovan29546
Copy link
Author

Hi @cortinico any update on this?

@chrfalch
Copy link
Collaborator

chrfalch commented Jan 8, 2026

Hi @cortinico any update on this?

I'll bring this up in my discussions with Riccardo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants