Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add line offset for baseline alignment of text attachments (#46172)

Browse Source 
Summary:
In https://github.com/facebook/react-native/pull/45102 I've implemented a baseline alignment function for the new architecture. I've noticed one thing I've missed previously - `locationForGlyphAtIndex` is [relative to the line fragment](https://developer.apple.com/documentation/appkit/nslayoutmanager/1403239-locationforglyphatindex), not the container. This means that the attachments would be put in the wrong place in multiline text.

This PR fixes that by adding the position of the entire line to the attachment position.

## Changelog:

[IOS] [FIXED] - Fixed baseline attachment position in multiline text

Pull Request resolved: https://github.com/facebook/react-native/pull/46172

Test Plan:
Checked on relevant example of RNTester.

|Before|After|
|-|-|
|<img width="546" alt="Screenshot 2024-08-22 at 15 53 14" src="https://github.com/user-attachments/assets/c1861655-9253-44fd-9f2f-796aff83df1e">|<img width="546" alt="Screenshot 2024-08-22 at 15 52 37" src="https://github.com/user-attachments/assets/27f07bc7-a8f6-4696-a414-815e7ece642c">|

Reviewed By: andrewdacenko

Differential Revision: D61662006

Pulled By: cipolleschi

fbshipit-source-id: 5eafdae1800c06d9fc61bfac99584e6e25a05c24
This commit is contained in:
Jakub Piasecki
2024-08-22 10:41:01 -07:00
committed by Facebook GitHub Bot
parent 42dcfdd2cd
commit 9bfbf948df
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm
+1 -1
View File
@@ -369,7 +369,7 @@ static NSLineBreakMode RCTNSLineBreakModeFromEllipsizeMode(EllipsizeMode ellipsi
if (ReactNativeFeatureFlags::enableAlignItemsBaselineOnFabricIOS()) {
CGFloat baseline = [layoutManager locationForGlyphAtIndex:range.location].y;
frame = {{glyphRect.origin.x, baseline - attachmentSize.height}, attachmentSize};
frame = {{glyphRect.origin.x, glyphRect.origin.y + baseline - attachmentSize.height}, attachmentSize};
} else {
UIFont *font = [textStorage attribute:NSFontAttributeName atIndex:range.location effectiveRange:nil];