Skip to content

Commit

Permalink
Fix text baseline being moved up on iOS (#44932)
Browse files Browse the repository at this point in the history
Summary:
Fixes #44929

Moves calling `RCTApplyBaselineOffset` so it's called in similar way as on the old architecture: https://github.com/facebook/react-native/blob/726a4a1e5ef3bc8034a068145da2bb94ae3acfaa/packages/react-native/Libraries/Text/Text/RCTTextShadowView.mm#L229

https://github.com/facebook/react-native/blob/726a4a1e5ef3bc8034a068145da2bb94ae3acfaa/packages/react-native/Libraries/Text/Text/RCTTextShadowView.mm#L165-L167

I'm not exactly sure why (and Apple's docs aren't helping) but it looks like calling `NSTextStorage initWithAttributedString` results in an attributed string where emojis are separate fragments with Apple's emoji font set, which results in the correct baseline calculations. This is the way it happens on the old arch.

The way it's currently implemented on the new architecture, `RCTApplyBaselineOffset` is called on ` newly created attributed string where emojis are in the same fragment as other parts of the text which alters the result of baseline calculations compared to what's later drawn on the screen.

## Changelog:

[IOS] [FIXED] - Fixed text baseline being moved upwards in certain cases

Pull Request resolved: #44932

Test Plan:
<details>
<summary>Check the following snipped</summary>

```jsx
import React from 'react';
import {
  Text,
  View,
} from 'react-native';

const App = () => {
  return (
    <View style={{
      paddingTop: 100,
    }}>
        <Text style={{fontSize: 15, lineHeight: 20, fontFamily: 'Arial', backgroundColor: 'gray'}}>A 😞😞😞 B</Text>
    </View>
  );
};

export default App;

```

</details>

|Before|After|
|-|-|
|<img width="546" alt="new-broken" src="https://github.com/facebook/react-native/assets/21055725/cc0a3841-beb5-4afc-8abf-1124312fa6e0">|<img width="546" alt="new-fixed" src="https://github.com/facebook/react-native/assets/21055725/0ec2f6f1-3c62-4537-9a75-6abb840633f7">|

Reviewed By: cipolleschi

Differential Revision: D58589249

Pulled By: sammy-SC

fbshipit-source-id: 1e0a730519a5c79ff8a35b0dfb16b68966a8dd9f
  • Loading branch information
j-piasecki authored and facebook-github-bot committed Jun 18, 2024
1 parent 37d7ec6 commit 01f7ab8
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ facebook::react::AttributedStringBox RCTAttributedStringBoxFromNSAttributedStrin

NSString *RCTNSStringFromStringApplyingTextTransform(NSString *string, facebook::react::TextTransform textTransform);

void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText);

@interface RCTWeakEventEmitterWrapper : NSObject
@property (nonatomic, assign) facebook::react::SharedEventEmitter eventEmitter;
@end
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const Tex
return [attributes copy];
}

static void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
{
__block CGFloat maximumLineHeight = 0;

Expand Down Expand Up @@ -411,7 +411,6 @@ static void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)

[nsAttributedString appendAttributedString:nsAttributedStringFragment];
}
RCTApplyBaselineOffset(nsAttributedString);
[nsAttributedString endEditing];

return nsAttributedString;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,8 @@ - (NSTextStorage *)_textStorageAndLayoutManagerWithAttributesString:(NSAttribute

NSTextStorage *textStorage = [[NSTextStorage alloc] initWithAttributedString:attributedString];

RCTApplyBaselineOffset(textStorage);

[textStorage addLayoutManager:layoutManager];

if (paragraphAttributes.adjustsFontSizeToFit) {
Expand Down

0 comments on commit 01f7ab8

Please sign in to comment.