Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Fabric - new arch)

[fabOnReact]

Details

Sets the NSBaselineOffsetAttributeName of the attributedText based on the following formula:

CGFloat baseLineOffset = (maximumLineHeight - maximumFontLineHeight) / 2.0;

The text is vertically centered in the lineHeight of the TextInput (which corresponds to the height of the cursor).
The solution was already added in facebook/react-native:

• PR facebook/react-native#38359 fixed the issue on the Old architecture (Paper) in release 0.73.5.
• commit facebook/react-native@70cc27c fixed the issue in the New architecture (Fabric).

Related Issues

fixes Expensify/App#17767 fixes Expensify/App#14445 fixes Expensify/App#15640
Related facebook/react-native#35741 facebook/react-native#31112 facebook/react-native#28012 facebook/react-native#33986

Manual Tests

• Expensify Composer: https://gist.github.com/fabOnReact/dfb141ef083f99acea4b7152294aaca9?permalink_comment_id=5061893#gistcomment-5061893
• Expensify Composer (When moving to another line, the word and emoji are close to each other): pull/350#issuecomment-2119690594 and pull/350#issuecomment-2119701442
• Markdown: https://gist.github.com/fabOnReact/dfb141ef083f99acea4b7152294aaca9?permalink_comment_id=5061895#gistcomment-5061895
• Markdown - Arabic text getting cut: https://gist.github.com/fabOnReact/dfb141ef083f99acea4b7152294aaca9?permalink_comment_id=5061901#gistcomment-5061901
• Previous tests: PR comments https://githuh.com/facebook/react-native/pull/37465#issuecomment-1551459879 and [HOLD for payment 2024-06-20] [HOLD for payment 2024-06-18] [HOLD for payment 2024-06-06] [HOLD #37374][$1000] Text in some languages gets cut off at the bottom in composer on ios App#17767 (comment)

Linked PRs

• PR Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch)  facebook/react-native#38359 landed. Fixed the issue on the Old Architecture (Paper).
• PR Fix TextInput vertical alignment issue when using lineHeight prop on iOS (Paper - old arch) facebook/react-native#37465 was reverted.

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[fabOnReact]

I have read the CLA Document and I hereby sign the CLA

[fabOnReact]

Expensify Composer (When moving to another line, the word and emoji are close to each other):

The difference of baseline is 1.15 (barely noticeable), maximumLineHeight 20, maximumFontLineHeight 17.69

Before	After

Before	After

[fabOnReact]

Expensify Composer (increasing lineHeight to display more clearly differences in the screenshots):

The result is achieved after setting textInputCompose.lineHeight: 40.

• baseLineOffset is 11.15
• maximumLineHeight is 40
• maximumFontLineHeight is 17.69

Before	After

Before	After

Before	After

[fabOnReact]

iOS - Chat - Cursor in the second and following lines touches the symbols of the previous line #15640

Fixes issue Expensify/App#15640

Before	After

[tomekzaw]

Thanks @fabOnReact for this amazing PR!

[tomekzaw]

@fabOnReact We've reviewed the changes and we'd like to merge this PR but it's still marked as draft

[fabOnReact]

@tomekzaw Thanks a lot. I moved the PR to ready for review.

[hungvu193]

@hungvu193 did you test it?

• Remove that line of code from Expensify
• You need to build Expensify and run it on Android
• Does the bug disappear?

Because the bug is Android only, while this PR introduces changes only to iOS. Thanks a lot!

My apologize for this confusion. I think I mentioned wrong PR here :(