Problem with TextInput lineHeight on iOS

Hi, guys! Did someone facing the same issue with lineHeight on iOS ? any solution ?

React Native version: “0.61.5”

Android:

iOS:

Code:

import React from 'react'
import { View, TextInput, StyleSheet } from 'react-native'

export default function Example () {
  return (
    <View style={styles.wrapper}>
      <TextInput style={styles.input} placeholder='Hello World!' />
    </View>
  )
}

const styles = StyleSheet.create({
  wrapper: {
    height: '100%',
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgray'
  },
  input: {
    height: 32,
    minWidth: 120,
    lineHeight: 32,
    borderWidth: 1,
    backgroundColor: 'white',
    padding: 0,
    fontSize: 14
  }
})

same on 0.62.2 version

rn info: 

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 404.19 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.2.0 - ~/.nvm/versions/node/v14.2.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.2.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 13.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.13.1
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

[saskaak]

@askel4dd That doesn’t seem to fix the issue.

It seems that the problem only happens on iOS with large fontSize-lineHeight differences. (In the original example fontSize: 14 and lineHeight: 32.) The workaround for me right now is to set lineHeight: null and use a wrapper View to achieve correct positioning.

[filiptdz]

For the past few years I’ve just avoided using lineHeight on React Native, as it’s more trouble than it’s worth. However, while you can add padding to a single line there’s no decent hack for multiline text. Hopefully there’s a solution soon.