-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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
TextInput with custom line height always breaks component #33986
Labels
Comments
react-native-bot
added
the
Component: TextInput
Related to the TextInput component.
label
Jun 9, 2022
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
github-actions
bot
added
the
Stale
There has been a lack of activity on this issue and it may be closed soon.
label
Dec 7, 2022
Anybody here :( |
github-actions
bot
removed
the
Stale
There has been a lack of activity on this issue and it may be closed soon.
label
Dec 8, 2022
Aparently it was fixed here #37465. We're just waiting for the merge... |
This was referenced May 25, 2023
Closed
lunaleaps
pushed a commit
that referenced
this issue
Feb 20, 2024
…iOS without changing Text baseline (Paper - old arch) (#38359) Summary: This PR fixes visual regression introduced with #37465 (comment) Adding paragraphStyle.maximumLineHeight to a iOS UITextField displays the text under the UITextField ([ios-screenshot-1][1], [ios-screenshot-2][2], [ios-screenshot-3][3]). The PR implements the logic from RCTTextShadowView [#postprocessAttributedText](https://github.com/facebook/react-native/blob/9ab27e8895d6934e72ebdc601d169578ab9628f1/packages/react-native/Libraries/Text/Text/RCTTextShadowView.m#L165-L167) in RCTBaseTextInpuShadowView [#uiManagerWillPerformMounting](https://github.com/facebook/react-native/blob/4c944540f732c6055d447ecaf37d5c8f3eec1bc4/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m#L130-L192). [1]: https://user-images.githubusercontent.com/24992535/238834159-566f7eef-ea2d-4fd4-a519-099b0a12046c.png "ios-screenshot-1" [2]: https://user-images.githubusercontent.com/24992535/238834184-feb454a9-6504-4832-aec8-989f1d027861.png "ios-screenshot-2" [3]: https://user-images.githubusercontent.com/24992535/238834283-cf572f94-a641-4790-92bf-bbe43afb1443.png "ios-screenshot-3" [4]: https://github.com/Expensify/App/assets/24992535/06726b45-7e35-4003-9fcc-50c8d0dff0f6 [5]: https://github.com/Expensify/App/assets/24992535/d9745d29-8863-4170-bcc3-e78fa7e550d2 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) Pull Request resolved: #38359 Test Plan: Extensive test included in the PR comments #37465 (comment) and Expensify/App#17767 (comment) Reviewed By: cipolleschi Differential Revision: D52325261 Pulled By: dmytrorykun fbshipit-source-id: d072a598bfaafbbffc41005b1fda1795cf3d8ab9
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
When you tries to set lineHeight at TextInput as style, it breaks text alignment in TextInput.
[In iOS]
<Text>
component with{ lineHeight: 64 }
. It aligns center correctly<TextInput>
component with{ lineHeight: 64 }
, and give text via placeholder. It aligns bottom of<TextInput>
. Not center as<Text>
.<TextInput>
component with{ lineHeight: 64 }
, and give text via value. It aligns outside of TextInput. Not center as<Text>
.[in Android]
Version
0.68.0
Output of
npx react-native info
Steps to reproduce
Snack, code example, screenshot, or link to a repository
Link to Snack →
The text was updated successfully, but these errors were encountered: