Skip to content

TextInput with custom line height always breaks component #33986

@taeyoon0137

Description

@taeyoon0137

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 →

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions