Repository navigation
Commit 7bee8ab
Compute the paragraph drawing frame at mount time, not in layoutSubviews (#58632)
Summary:
`RCTParagraphComponentView` derives the text view's frame and drawing frame in `layoutSubviews`, requested with `setNeedsLayout` from `updateState` and `updateLayoutMetrics`. The layout pass itself dates from #46081, but until #57408 `drawRect:` read the content frame straight from `_layoutMetrics`, which is always current; #57408 moved drawing onto a `drawingFrame` computed in `layoutSubviews`, so drawing now assumes a layout pass will run before the view is displayed. It does not when the mount itself happens inside Core Animation's display phase — which is where `AppleEventBeat` processes a synchronous event requested during layout (#58530). This transaction's layout pass is already over, so the text view displays the new attributed string in the previous drawing frame and the text is cut off at the old width. The queued `layoutSubviews` updates the frame in the next transaction, but `drawingFrame` is a plain property that does not invalidate the display, so the clipped drawing stays until something else redraws the view.
Nothing on `main` emits a synchronous event from layout yet, so this is latent today; #58109 is the first thing that does (`layoutSubviews` reporting safe area insets on rotation) and it hits this on every rotation.
The frames are now computed in `finalizeUpdates:`, which the mounting manager calls [once per view after all of a mutation's `update*` calls](https://github.com/react/react-native/blob/f03f6c2b856e7d923f8af13d7ef452eb4bb21cd4/packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm#L108-L134). That coalesces state and layout-metrics changes the same way the layout pass did — one computation per mount, as before — without depending on a layout pass that may already have happened, and it removes the extra layout pass altogether. The `layoutSubviews` override goes away; `updateState` and `updateLayoutMetrics` keep their `setNeedsDisplay`.
## Changelog:
[IOS] [FIXED] - Text no longer renders clipped when mounted from a synchronous event during layout
Pull Request resolved: #58632
Test Plan:
Reproduced with #58109 on top of this branch, RNTester "Safe area insets" example, iPhone 17 Pro simulator: present the padded modal, apply insets, rotate. The readout text is re-rendered synchronously from the rotation's layout pass.
| Before | After |
|:---:|:---:|
| <img src="https://github.com/user-attachments/assets/092b162b-1b28-4b02-b584-4c28d66a96b5" width="440" /> | <img src="https://github.com/user-attachments/assets/52ae2ce8-75c7-4b2c-9e90-006e68b2588e" width="440" /> |
Before: `top: 0, right: 62, bottom: 19.99996` — the accessibility label carries the full `…9482421875, left: 62`, and the layout box is the right size; only the drawing is cut at the previous width. The paragraph under it overflows on one line for the same reason. After: both render at their new width. Rotating back to portrait renders correctly too, and ordinary text throughout RNTester (normal asynchronous mounts) is unchanged.
---
Found while testing #58109, which hits this on every rotation; standalone, that stack does not include this change.
Reviewed By: andrewdacenko, javache
Differential Revision: D121209981
Pulled By: Abbondanzo
fbshipit-source-id: 6fda49771b08d489623e2bb35c5b59ec46ac03da1 parent c65fc63 commit 7bee8ab
1 file changed
Lines changed: 9 additions & 6 deletions
File tree
- packages/react-native/React/Fabric/Mounting/ComponentViews/Text
Lines changed: 9 additions & 6 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
137 | 137 | | |
138 | 138 | | |
139 | 139 | | |
140 | | - | |
141 | 140 | | |
142 | 141 | | |
143 | 142 | | |
| |||
158 | 157 | | |
159 | 158 | | |
160 | 159 | | |
161 | | - | |
162 | 160 | | |
163 | | - | |
| 161 | + | |
| 162 | + | |
| 163 | + | |
| 164 | + | |
| 165 | + | |
| 166 | + | |
| 167 | + | |
| 168 | + | |
164 | 169 | | |
165 | 170 | | |
166 | 171 | | |
| |||
170 | 175 | | |
171 | 176 | | |
172 | 177 | | |
173 | | - | |
| 178 | + | |
174 | 179 | | |
175 | | - | |
176 | | - | |
177 | 180 | | |
178 | 181 | | |
179 | 182 | | |
| |||
0 commit comments