Skip to content

Draw text with unbounded height on iOS (#59793) - #59793

Merged
meta-codesync[bot] merged 1 commit into
react:mainfrom
jasozh:export-D127931949
Nov 6, 2026
Merged

meta-codesync[bot] merged 1 commit into
react:mainfrom
jasozh:export-D127931949

Conversation

@jasozh

@jasozh jasozh commented Nov 4, 2026 •

Copy link
Copy Markdown
Contributor

Summary:

Fixes an issue where text wrapping behavior on iOS differs from Android and web when the text does not fit in its parent container.

Root Cause

On iOS, React Native lays out text during measurement and drawing. RCTTextLayoutManager::measureNSAttributedString() uses an unbounded height during measurement to position where text and inline views should be. However, during drawing, the actual frame size is used. When TextKit reaches a point where the next line of text doesn't fit inside the container's height, it stops wrapping and puts everything on the current line. This leads to different wrapping behavior compared to Android and web, especially when inline views are included in text.

This PR

Modify RCTTextLayoutManager so that drawing also uses unbounded height, matching the existing measurement code. This means TextKit never tries to alter wrapping behavior.

Changelog: [iOS][Fixed] - Text taller than a fixed-height <Text> now wraps normally and is clipped at the bottom edge, matching Android and web

Reviewed By: vzaidman

Differential Revision: D127931949

@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 Nov 4, 2026
@meta-codesync

meta-codesync Bot commented Nov 4, 2026

Copy link
Copy Markdown

@jasozh has exported this pull request. If you are a Meta employee, you can view the originating Diff in D127931949.

Summary:

Fixes an issue where text wrapping behavior on iOS differs from Android and web when the text does not fit in its parent container.

### Root Cause

On iOS, React Native lays out text during measurement and drawing. `RCTTextLayoutManager::measureNSAttributedString()` uses an unbounded height during measurement to position where text and inline views should be. However, during drawing, the actual frame size is used. When TextKit reaches a point where the next line of text doesn't fit inside the container's height, it stops wrapping and puts everything on the current line. This leads to different wrapping behavior compared to Android and web, especially when inline views are included in text.

### This PR

Modify RCTTextLayoutManager so that drawing also uses unbounded height, matching the existing measurement code. This means TextKit never tries to alter wrapping behavior.

Changelog: [iOS][Fixed] - Text taller than a fixed-height `<Text>` now wraps normally and is clipped at the bottom edge, matching Android and web

Reviewed By: vzaidman

Differential Revision: D127931949
@meta-codesync meta-codesync Bot changed the title Draw text with unbounded height on iOS Draw text with unbounded height on iOS (#59793) Nov 6, 2026
@jasozh
jasozh force-pushed the export-D127931949 branch from a828ad9 to b69e281 Compare November 6, 2026 00:16
@meta-codesync
meta-codesync Bot merged commit cd45f30 into react:main Nov 6, 2026
78 checks passed
@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @jasozh in cd45f30

When will my fix make it into a release? | How to file a pick request?

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. Merged This PR has been merged. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants