Skip to content

Conversation

@tomekzaw
Copy link
Contributor

@tomekzaw tomekzaw commented May 15, 2025

Summary:

This PR removes extraneous blank space at the bottom of multiline TextInput when using nested Text with different font sizes on iOS with the New Architecture enabled.

Before After
Screenshot 2025-05-15 at 12 16 05 Screenshot 2025-05-15 at 12 01 32

The proposed solution is to call RCTApplyBaselineOffset separately for each line of text.

Ideally, we would call it separately for each part of text with different font size.

Changelog:

[IOS] [FIXED] - Fixed extraneous blank space at the bottom of multiline TextInput with different line heights on iOS

Test Plan:

<TextInput
  multiline
  style={{borderWidth: 1, width: 300, fontSize: 20}}
  ref={ref}
  placeholder="Type here...">
  First line{'\n'}
  <Text style={{fontSize: 30, lineHeight: 60}}>Second line</Text>
  {'\n'}Third line{'\n'}Fourth line
  {'\n'}
  Fifth line
</TextInput>

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Software Mansion Partner: Software Mansion Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels May 15, 2025
@facebook-github-bot
Copy link
Contributor

@j-piasecki has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@tomekzaw tomekzaw changed the title Apply baseline offset separately for each line of text on iOS Fix extraneous blank space at the bottom of multiline TextInput with different font sizes May 15, 2025
@tomekzaw tomekzaw changed the title Fix extraneous blank space at the bottom of multiline TextInput with different font sizes Fix extraneous blank space at the bottom of multiline TextInput with different line heights May 15, 2025
@tomekzaw tomekzaw changed the title Fix extraneous blank space at the bottom of multiline TextInput with different line heights Fix extraneous blank space at the bottom of multiline TextInput with different line heights on iOS May 15, 2025
[attributedText.string enumerateSubstringsInRange:NSMakeRange(0, attributedText.length)
options:NSStringEnumerationByLines | NSStringEnumerationSubstringNotRequired
usingBlock:^(NSString * _Nullable substring, NSRange substringRange, NSRange enclosingRange, BOOL * _Nonnull stop) {
RCTApplyBaselineOffsetForRange(attributedText, enclosingRange);
Copy link
Contributor Author

@tomekzaw tomekzaw May 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if we should use substringRange or enclosingRange here. For the context, enclosingRange includes the newline character and substringRange doesn't. Both work fine and both fix the issue.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label May 23, 2025
@facebook-github-bot
Copy link
Contributor

@j-piasecki merged this pull request in 2da4a60.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @tomekzaw in 2da4a60

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. p: Software Mansion Partner: Software Mansion Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants