Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch) #38258

Closed

Conversation

fabOnReact
Copy link
Contributor

@fabOnReact fabOnReact commented Jul 8, 2023

Summary:

This PR fixes visual regression introduced with #37465 (comment). The baseline is set with RCTBaseTextInputView#enforceTextAttributesIfNeeded instead of RCTTextAttributes#effectiveParagraphStyle.
RCTTextAttributes#effectiveParagraphStyle is shared between Text and TextInput. The regression was caused by changing the baseline of the Text with effectiveParagraphStyle, which does not need adjustment as it correctly aligns with lineHeight.

Summary from PR #37465

Adding paragraphStyle.maximumLineHeight to a iOS UITextField displays the text under the UITextField (ios-screenshot-1, ios-screenshot-2, ios-screenshot-3). The issue reproduces on Storyboard App (iOS) using UITextField and paragraphStyle.maximumLineHeight. It is not caused by react-native.

The issue is caused by a private class _UITextLayoutFragmentView (a CALayer children of UITextField), which assumes the wrong position when setting the lineHeight. _UITextLayoutFragmentView frame's y coordinates are set to 30, instead of 0 (react-native-screenshot-1, react-native-screenshot-2)

  • The _UITextLayoutFragmentView layer does not correctly position
  • The issue is caused by adding paragraphStyle.maximumLineHeight to UITextField.attributedText
  • The parent UITextField bounds do not correctly position child _UITextLayoutFragmentView.
    The issue causes the below text Sdfsd to display under the TextInput.

I was able to fix the issue and correctly align the private layout view _UITextLayoutFragmentView using the public API RCTUITextField textRectForBound, which allows modifying the UITextField frame and inset.
The solution consists in the following steps, applied only to UITextField with lineHeight prop:

  1. set _UITextLayoutFragmentView to vertically align to the top. Required to correctly align _UITextLayoutFragmentView.
  2. apply custom bounds with RCTUITextField textRectForBound to align _UITextLayoutFragmentView with the correct y coordinates and height
  3. Adjust text baseline to be center aligned

fixes #28012 fixes #33986
Related #35741 #31112

Changelog:

[IOS] [FIXED] - Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch)

Test Plan:

Extensive test included in the PR comments #37465 (comment)

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 8, 2023
@analysis-bot
Copy link

analysis-bot commented Jul 8, 2023

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 9,001,853 -62
android hermes armeabi-v7a 8,255,908 -72
android hermes x86 9,510,993 -63
android hermes x86_64 9,356,875 -66
android jsc arm64-v8a 9,614,916 -33
android jsc armeabi-v7a 8,741,553 -31
android jsc x86 9,701,866 -38
android jsc x86_64 9,948,428 -32

Base commit: 50f620a
Branch: main

The diff would trigger linter error internal in Facebook. I compared
the commit and the original diff and I was able to identify the linter
issue. I fixed the linter issue to avoid again failures when importing
it.

Comment
facebook#37465 (comment)

Imported in Facebook
facebook@35a1648#diff-08824b4f7ca9c31bd2a7aeb8b1180bd55b2b834d99667861e14e59082d06c137R179-R190

Original Diff
facebook@c4996fc#diff-08824b4f7ca9c31bd2a7aeb8b1180bd55b2b834d99667861e14e59082d06c137R170-R177
@fabOnReact fabOnReact closed this Jul 15, 2023
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.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TextInput with custom line height always breaks component Problem with TextInput lineHeight on iOS
3 participants