[HOLD facebook/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) #57

fabOnReact · 2023-05-23T02:45:53Z

Upstream PR Link

Upstream PR facebook#37465
fixes Expensify/App#17767

Summary:

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:

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

fixes facebook#28012

Changelog:

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

Test Plan:

Extensive tests included in the PR comments facebook#37465 (comment) and below

…iOS (Paper - old arch)

fabOnReact · 2023-05-23T02:50:21Z

After the fix - Testing RNTester in Expensify/react-native

2023-05-23.09-25-28.mp4

fabOnReact · 2023-05-23T08:08:31Z

1st Test - Verify that TextInput vertical alignment is fixed and text is not cut

Before	After

2nd Test - No regression detected

Before	After
Before.Applying.the.fix.mp4	After.applying.the.fix.mp4

cead22

Code looks good, but I'd love to get a review from someone that's more familiar with this code and how it works

cead22 · 2023-05-24T15:51:48Z

packages/react-native/Libraries/Text/RCTTextAttributes.m

-    paragraphStyle.minimumLineHeight = lineHeight;
-    paragraphStyle.maximumLineHeight = lineHeight;
-    isParagraphStyleUsed = YES;
+    // text with lineHeight lower then font.lineHeight does not correctly vertically align


Can you capitalize all comments and add a line break before them (except for the one after the if which is in a new level of indentation)?

Suggested change

// text with lineHeight lower then font.lineHeight does not correctly vertically align

// Text with lineHeight lower then font.lineHeight does not correctly vertically align

Thanks @cead22. I made the changes with commit 12b51dd. I remain available for further improvements.

https://github.com/Expensify/react-native/pull/57/files#r1204428114

fedirjh · 2023-05-29T17:39:36Z

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.m

+  if (self.fragmentViewContainerBounds.size.height > 0) {
+    // Apply custom bounds to fix iOS UITextField issue with lineHeight.
+    // Sets the correct y coordinates for _UITextLayoutFragmentView.
+    return UIEdgeInsetsInsetRect([super textRectForBounds:self.fragmentViewContainerBounds], borderAndPaddingInsets);
+  } else {
+    return UIEdgeInsetsInsetRect([super textRectForBounds:bounds], borderAndPaddingInsets);
+  }


Suggested change

if (self.fragmentViewContainerBounds.size.height > 0) {

// Apply custom bounds to fix iOS UITextField issue with lineHeight.

// Sets the correct y coordinates for _UITextLayoutFragmentView.

return UIEdgeInsetsInsetRect([super textRectForBounds:self.fragmentViewContainerBounds], borderAndPaddingInsets);

} else {

return UIEdgeInsetsInsetRect([super textRectForBounds:bounds], borderAndPaddingInsets);

}

// Apply custom bounds to fix iOS UITextField issue with lineHeight.

// Sets the correct y coordinates for _UITextLayoutFragmentView.

return UIEdgeInsetsInsetRect([super textRectForBounds:self.fragmentViewContainerBounds.size.height > 0 ? self.fragmentViewContainerBounds : bounds], borderAndPaddingInsets);

Can’t be simplified ?

Thanks a lot, @fedirjh. I applied the changes with commits 613bf0a, a5ac3c3 and tested the functionality again

CLICK TO OPEN TESTS RESULTS

CLICK TO OPEN TESTS RESULTS

Expensify#57 (comment)

j-piasecki

LGTM

cead22

Looks good to me. @fedirjh can you re-review when you get a chance please?

cead22 · 2023-05-31T20:10:41Z

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.m

+  UIEdgeInsets borderAndPaddingInsets = UIEdgeInsetsMake(_textContainerInset.top, leftPadding, _textContainerInset.bottom, rightPadding);
+  // The fragmentViewContainerBounds set the correct y coordinates for


Minor, so not a blocker

Suggested change

UIEdgeInsets borderAndPaddingInsets = UIEdgeInsetsMake(_textContainerInset.top, leftPadding, _textContainerInset.bottom, rightPadding);

// The fragmentViewContainerBounds set the correct y coordinates for

UIEdgeInsets borderAndPaddingInsets = UIEdgeInsetsMake(_textContainerInset.top, leftPadding, _textContainerInset.bottom, rightPadding);

// The fragmentViewContainerBounds set the correct y coordinates for

Thanks @cead22.

Adding a line-break before the comment

I believe you refer to

Can you capitalize all comments and add a line break before them (except for the one after the if which is in a new level of indentation)?

I added a line break before the comment with commit 3d12d11.

Github Website Issue

There was an issue with the GitHub (website), which would not update the PR Diff and commits. My remote branch fabriziobertoglio1987/text-input-vertical-alignment-expensify-2 included changes not available on Github Website PR.

CLICK TO OPEN VIDEO

2023-06-01.14-27-51.mp4

For this reason, I had to temporarily change the base branch.

Related Discussions: https://github.com/orgs/community/discussions/16351 isaacs/github#750 (comment)

I tested and reviewed the branch diff locally (git checkout text-input-vertical-alignment-expensify-2 && g diff ExpensifyRC1-0.72.0-alpha.0..), and the branch has no issues.

CLICK TO OPEN TESTS RESULTS

Sorry. I remain available. Thanks

fedirjh

LGTM and tests well

@cead22 which branch should we target ?

The base branch was changed.

github-actions · 2023-06-01T06:10:07Z

	Fails
🚫	❗ Base Branch - The base branch for this PR is something other than `main` or a `-stable` branch. Are you sure you want to target something other than the `main` branch?

Generated by 🚫 dangerJS against 3d12d11

cead22 · 2023-06-01T21:49:38Z

Out of curiosity, why not merge into main?

fedirjh · 2023-06-01T21:58:41Z

It looks like ExpensifyRC1-0.72.0-alpha.0 will be released. We have other PRs are targeting the same branch, check this comment #58 (comment)

fabOnReact · 2023-06-02T02:49:37Z

The main branch facebook/react-native changes every day. The facebook/react-native main branch sometimes has issues, for this reason, it is easier to use the release branch.
The release branches are tested from the community (for example see reactwg/react-native-releases#54 for 0.72).
The Expensify team is working to upgrade react-native to RC1-0.72.0-alpha.0 see discussion Expensify/App#18507

cead22 · 2023-06-05T18:07:08Z

Holding until the FB PR is approved and merged

cead22 · 2023-06-20T00:29:44Z

@fabriziobertoglio1987 any idea if/when the upstream PR will be merged?

fabOnReact · 2023-06-20T04:31:10Z

Thanks @cead22. The PR will be merged. I reached out via Discord to receive feedback on the PR.
I will work until the PR is merged. I will keep you updated about the progress.

fabOnReact · 2023-06-21T11:34:08Z

Thanks @cead22

This is the last update from Samuel Susla facebook#37465 (comment)

Sorry for the slow reply, I was away for +2 weeks on vacation. I will just fix the linter issues, they are only related to code formatting.

The was an issue with the internal facebook code linter (not open source). The PR will be merged soon. I remain available.

cead22 · 2023-06-21T21:10:27Z

Awesome, thanks for the update!

fedirjh · 2023-07-05T13:50:02Z

cc @cead22 @fabriziobertoglio1987 The upstream PR was merged today 🎉 🎉

Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) facebook/react-native#37465 (comment)

cead22 · 2023-07-07T00:05:15Z

@fedirjh @j-piasecki can you re-review this please? I think we're ready to remove the hold, but to confirm, is this PR still targeting the right branch?

fabOnReact · 2023-07-07T03:45:27Z

This are the information I found:

Expensify/react-native: Expensify is updating react-native to 0.72 Update App to React Native 0.72 version App#18507 (comment)
Expensify/react-native: Expensify is merging a list of selected PRs in their Expensify/react-native fork to be included in the 0.72 expensify/react-native release (see this discussion). We may ask to cherry pick this PR in that discussion.
facebook/react-native: Cherry pick request for this commit could be done in the next release 0.73 Road to 0.73.0 reactwg/react-native-releases#64. Cherry picks in 0.72.2 are for regressions introduced with 0.72.
Expensify/react-native: React Native and Expensify did not yet prepare 0.73 branch. We can not target main, as Expensify/react-native is a fork of facebook/react-native.

j-piasecki · 2023-07-07T08:15:40Z

@cead22 It looks like all commits since the last review are cosmetic or done simply to trigger CI, so should be good 🚀

fabOnReact · 2023-07-07T14:37:05Z

Update 07/07

Investigating regression reported in comment Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) facebook/react-native#37465 (comment)

fabOnReact · 2023-07-08T14:07:26Z

Update 08/07

Published DRAFT PR #38258 to fix regression reported by Samuel Susla.

fabOnReact · 2023-07-11T12:47:07Z

Update 11/07

Further reviewed the solutions from PRs #38258 and 37465
Testing different edge cases
Investigating the root cause of the regression and evaluating an alternative implementation.

fabOnReact · 2023-07-12T07:14:00Z

Update 12/07

There is a difference in the baseline computation between RCTTextShadowView postprocessAttributedText and RCTTextAttributes effectiveParagraphStyle.

Given the following example:

<Text style={{lineHeight: 500, fontSize: 15, backgroundColor: 'red'}}>
  font size 15
  <Text style={{fontSize: 50, lineHeight: 500}}>font size 50</Text>
</Text>

The RCTTextShadowView implementation calculates the same baseline for the entire Text based on the highest lineHeight/fontSize
The RCTTextAttributes implementation calculates different baseline for each Text span, based on the Text span lineHeight and fontSize

fabOnReact · 2023-07-22T05:28:34Z

Update 22/07

Moved Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch) facebook/react-native#38359 to ready to review

cead22 · 2024-06-03T17:55:38Z

@fabOnReact any update on this one?

fedirjh · 2024-06-03T21:30:17Z

@cead22 I think we should close this PR. This fork is not used anymore in newDot.

fabOnReact · 2024-06-04T03:11:09Z

The upstream PR was merged. I'm closing this PR. Thanks.

fabOnReact added 3 commits May 22, 2023 16:49

Fix TextInput vertical alignment issue when using lineHeight prop on …

17be5ef

…iOS (Paper - old arch)

fix indentation

dfc2b20

revert fix from PR facebook#54

7dbfde4

fabOnReact marked this pull request as ready for review May 23, 2023 14:13

fabOnReact mentioned this pull request May 23, 2023

[HOLD for payment 2024-06-06] [HOLD #37374][$1000] Text in some languages gets cut off at the bottom in composer on ios Expensify/App#17767

Open

6 tasks

cead22 reviewed May 24, 2023

View reviewed changes

update code comments

12b51dd

https://github.com/Expensify/react-native/pull/57/files#r1204428114

fedirjh reviewed May 29, 2023

View reviewed changes

fabOnReact added 2 commits May 30, 2023 10:48

changes requested in code review

613bf0a

Expensify#57 (comment)

minor improvement

a5ac3c3

flodnv mentioned this pull request May 30, 2023

Adapt iOS16+ dictation #53

Merged

j-piasecki previously approved these changes May 31, 2023

View reviewed changes

cead22 previously approved these changes May 31, 2023

View reviewed changes

fedirjh previously approved these changes Jun 1, 2023

View reviewed changes

adding a line break before comment

3d12d11

fabOnReact marked this pull request as draft June 1, 2023 06:09

fabOnReact changed the base branch from ExpensifyRC1-0.72.0-alpha.0 to main June 1, 2023 06:09

fabOnReact changed the base branch from main to ExpensifyRC1-0.72.0-alpha.0 June 1, 2023 06:09

rerun ci

0dae434

fabOnReact marked this pull request as ready for review June 1, 2023 06:19

fabOnReact marked this pull request as draft June 1, 2023 06:19

remove comment rerun ci

a1433f3

fabOnReact marked this pull request as ready for review June 1, 2023 07:01

cead22 approved these changes Jun 5, 2023

View reviewed changes

cead22 changed the title ~~Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch)~~ [HOLD facebok/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) Jun 5, 2023

fabOnReact mentioned this pull request Jul 7, 2023

[HOLD for payment 2023-09-29] [$1000] Android - Login - Linkified email from external app is pasted as linkified email in email field Expensify/App#21411

Closed

6 tasks

cead22 changed the title ~~[HOLD facebok/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch)~~ [HOLD facebook/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) May 3, 2024

fabOnReact closed this Jun 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD facebook/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) #57

[HOLD facebook/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) #57

fabOnReact commented May 23, 2023 •

edited

fabOnReact commented May 23, 2023 •

edited

fabOnReact commented May 23, 2023 •

edited

cead22 left a comment

cead22 May 24, 2023

fabOnReact May 25, 2023

fedirjh May 29, 2023

fabOnReact May 30, 2023

j-piasecki left a comment

cead22 left a comment

cead22 May 31, 2023

fabOnReact Jun 1, 2023 •

edited

fedirjh left a comment

github-actions bot commented Jun 1, 2023

cead22 commented Jun 1, 2023

fedirjh commented Jun 1, 2023

fabOnReact commented Jun 2, 2023 •

edited

cead22 commented Jun 5, 2023

cead22 commented Jun 20, 2023

fabOnReact commented Jun 20, 2023 •

edited

fabOnReact commented Jun 21, 2023

cead22 commented Jun 21, 2023

fedirjh commented Jul 5, 2023

cead22 commented Jul 7, 2023

fabOnReact commented Jul 7, 2023 •

edited

j-piasecki commented Jul 7, 2023

fabOnReact commented Jul 7, 2023

fabOnReact commented Jul 8, 2023

fabOnReact commented Jul 11, 2023 •

edited

fabOnReact commented Jul 12, 2023 •

edited

fabOnReact commented Jul 22, 2023

cead22 commented Jun 3, 2024

fedirjh commented Jun 3, 2024

fabOnReact commented Jun 4, 2024

	// text with lineHeight lower then font.lineHeight does not correctly vertically align
	// Text with lineHeight lower then font.lineHeight does not correctly vertically align

		UIEdgeInsets borderAndPaddingInsets = UIEdgeInsetsMake(_textContainerInset.top, leftPadding, _textContainerInset.bottom, rightPadding);
		// The fragmentViewContainerBounds set the correct y coordinates for

[HOLD facebook/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) #57

[HOLD facebook/react-native#37465] Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) #57

Conversation

fabOnReact commented May 23, 2023 • edited

Upstream PR Link

Summary:

Changelog:

Test Plan:

fabOnReact commented May 23, 2023 • edited

fabOnReact commented May 23, 2023 • edited

cead22 left a comment

Choose a reason for hiding this comment

cead22 May 24, 2023

Choose a reason for hiding this comment

fabOnReact May 25, 2023

Choose a reason for hiding this comment

fedirjh May 29, 2023

Choose a reason for hiding this comment

fabOnReact May 30, 2023

Choose a reason for hiding this comment

j-piasecki left a comment

Choose a reason for hiding this comment

cead22 left a comment

Choose a reason for hiding this comment

cead22 May 31, 2023

Choose a reason for hiding this comment

fabOnReact Jun 1, 2023 • edited

Choose a reason for hiding this comment

Adding a line-break before the comment

Github Website Issue

fedirjh left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 1, 2023

cead22 commented Jun 1, 2023

fedirjh commented Jun 1, 2023

fabOnReact commented Jun 2, 2023 • edited

cead22 commented Jun 5, 2023

cead22 commented Jun 20, 2023

fabOnReact commented Jun 20, 2023 • edited

fabOnReact commented Jun 21, 2023

cead22 commented Jun 21, 2023

fedirjh commented Jul 5, 2023

cead22 commented Jul 7, 2023

fabOnReact commented Jul 7, 2023 • edited

j-piasecki commented Jul 7, 2023

fabOnReact commented Jul 7, 2023

Update 07/07

fabOnReact commented Jul 8, 2023

Update 08/07

fabOnReact commented Jul 11, 2023 • edited

Update 11/07

fabOnReact commented Jul 12, 2023 • edited

Update 12/07

fabOnReact commented Jul 22, 2023

Update 22/07

cead22 commented Jun 3, 2024

fedirjh commented Jun 3, 2024

fabOnReact commented Jun 4, 2024

fabOnReact commented May 23, 2023 •

edited

fabOnReact commented May 23, 2023 •

edited

fabOnReact commented May 23, 2023 •

edited

fabOnReact Jun 1, 2023 •

edited

fabOnReact commented Jun 2, 2023 •

edited

fabOnReact commented Jun 20, 2023 •

edited

fabOnReact commented Jul 7, 2023 •

edited

fabOnReact commented Jul 11, 2023 •

edited

fabOnReact commented Jul 12, 2023 •

edited