Skip to content

Commit 6da351a

Browse files
fix(iOS)(Fabric) inline view alignment inside of a Text with line height (facebook#53341)
Summary: Addresses - facebook#53092 Fixes inline `View` frame calculation that is nested inside of a `Text` with a `lineHeight`. The calculation for inline view frame is correct on [Paper](https://github.com/facebook/react-native/blob/25104de5c47845c0edbdfb38df30f8c406da832e/packages/react-native/Libraries/Text/Text/RCTTextShadowView.mm#L338). This PR uses the same calculation as Paper (use glyph height instead of baseline from layout manager). jest_e2e[run_all_tests] ## Changelog: [IOS] [FIXED] - Inline `View` alignment with `lineHeight` in Text <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#53341 Test Plan: Make sure Text render is consistent on iOS and android and the View aligns with Text baseline with the provided [repro](facebook#53092) <img width="400" height="766" alt="Screenshot 2025-08-19 at 4 55 01 AM" src="https://github.com/user-attachments/assets/bc4e7473-8fe9-4596-a9ea-fd1204e4b3a3" /> Rollback Plan: Reviewed By: christophpurrer Differential Revision: D80525760 Pulled By: cipolleschi fbshipit-source-id: 0152c35c56d8631942c0186f5dbe33c4a20a48c4
1 parent 2ad845c commit 6da351a

1 file changed

Lines changed: 7 additions & 3 deletions

File tree

  • packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -412,9 +412,13 @@ - (TextMeasurement)_measureTextStorage:(NSTextStorage *)textStorage
412412
CGRect glyphRect = [layoutManager boundingRectForGlyphRange:range inTextContainer:textContainer];
413413

414414
CGRect frame;
415-
CGFloat baseline = [layoutManager locationForGlyphAtIndex:range.location].y;
416-
417-
frame = {{glyphRect.origin.x, glyphRect.origin.y + baseline - attachmentSize.height}, attachmentSize};
415+
UIFont *font = [[textStorage attributedSubstringFromRange:range] attribute:NSFontAttributeName
416+
atIndex:0
417+
effectiveRange:nil];
418+
frame = {
419+
{glyphRect.origin.x,
420+
glyphRect.origin.y + glyphRect.size.height - attachmentSize.height + font.descender},
421+
attachmentSize};
418422

419423
auto rect = facebook::react::Rect{
420424
facebook::react::Point{frame.origin.x, frame.origin.y},

0 commit comments

Comments
 (0)