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.

Sign up for GitHub

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

Jump to bottom

TextInput with custom line height always breaks component #33986

Closed
taeyoon0137 opened this issue Jun 9, 2022 · 3 comments
Closed

TextInput with custom line height always breaks component #33986

taeyoon0137 opened this issue Jun 9, 2022 · 3 comments
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍

Comments

@taeyoon0137
Copy link

taeyoon0137 commented Jun 9, 2022 •
edited
Loading

Description

When you tries to set lineHeight at TextInput as style, it breaks text alignment in TextInput.

[In iOS]

  • First red container is <Text> component with { lineHeight: 64 }. It aligns center correctly
  • Second gray container is <TextInput> component with { lineHeight: 64 }, and give text via placeholder. It aligns bottom of <TextInput>. Not center as <Text>.
  • Third blue container is <TextInput> component with { lineHeight: 64 }, and give text via value. It aligns outside of TextInput. Not center as <Text>.

스크린샷 2022-06-10 오전 1 30 37

[in Android]

  • lineHeight in placeholder does not effect height of TextInput

Version

0.68.0

Output of npx react-native info

OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 649.90 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /usr/local/bin/node
    Yarn: 3.2.0 - /usr/local/bin/yarn
    npm: 7.23.0 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. Set TextInput component and give lineHeight more than current auto applied value.
  2. Produced.

Snack, code example, screenshot, or link to a repository

Link to Snack →
@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Jun 9, 2022
@github-actions
Copy link

github-actions bot commented Dec 7, 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 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
@taeyoon0137
Copy link
Author

Anybody here :(

@github-actions 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
@NandoMB
Copy link

NandoMB commented May 25, 2023

Aparently it was fixed here #37465. We're just waiting for the merge...

This was referenced May 25, 2023
Closed
Closed
@fabOnReact fabOnReact mentioned this issue Jul 8, 2023
Closed
@fabOnReact fabOnReact mentioned this issue Jul 15, 2023
Closed
lunaleaps pushed a commit that referenced this issue Feb 20, 2024
@fabOnReact @lunaleaps
Fix TextInput vertical alignment issue when using lineHeight prop on …
5ca5e3b 
…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
@fabOnReact fabOnReact mentioned this issue May 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍
Projects
None yet
Milestone
No milestone
3 participants
@NandoMB @react-native-bot @taeyoon0137