lineHeight not distributed evenly in TextInput

[tibbe]

Description

When you have a TextInput with lineHeight > fontSize the remaining space isn't distributed evenly around the text. For example:

<View style={styles.container}>
  <Text style={styles.text}>Text</Text>
  <TextInput style={styles.text} value="TextInput" />
</View>

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 10,
  },
  text: {
    fontFamily: 'Inter-Regular',
    fontSize: 16,
    lineHeight: 26,
    letterSpacing: -0.01,
    color: '#111827',
    textAlignVertical: 'top',
    padding: 0,
    backgroundColor: 'pink',
  },
});

Result:
All the extra space in the TextInput case is on top of the text, making it hard to vertically align TextInputs (e.g. with a Text label preceding it on the same line).

React Native Version

0.71.7

Output of npx react-native info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 63.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: Not Found
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    Watchman: 2023.07.03.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /Users/tibbe/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.10121639
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.19 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.7 => 0.71.7 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Use the above snippet in the iOS simulator.

Snack, screenshot, or link to a repository

https://snack.expo.dev/UEBid9Vxh

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.13. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[tibbe]

This also applies to multiline, making it hard to add a Text label that stays aligned with the first line of text of the TextInput.

[tibbe]

The best workaround I have so far is to not set lineHeight at all for single line TextInputs and use e.g. a surrounding View to try to align the Text and TextInput. That doesn't work with multiline however because there you want some amount of lineHeight. It's also a bit annoying in general because it means you have to define different styles for Text and TextInputs that only differ in lineHeight, which makes it harder to develop a consistent theme.

[tibbe]

After some more testing it seems the issue is limited to iOS. Both web and Android look correct.

[tibbe]

Any other information I can provide to clarify the issue?

[showtan001]

So far unresolved! @shergin @mdvacca @sammy-SC @cortinico @RSNara @cortinico @yungsters @NickGerleman

[github-actions]

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.

[tibbe]

This is still an issue.

[TheAdamBorek]

I can also reproduce it. Problem affects only iOS and only <TextInput />. lineHeight is rendered fine for <Text />

https://snack.expo.dev/@adamfromattio/ios-problem-with-lineheight?platform=ios

[itsramiel]

Just came across this. Thought maybe #46362 fixes it, but issue is still there.

Tested on 0.77.0-nightly-20241001-223e98cc4

Can be reproduced with:

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

function App() {
  return (
    <View style={{justifyContent: 'center', flex: 1}}>
      <View style={styles.container}>
        <TextInput value="Type something" style={styles.text} />
      </View>
      <View style={styles.container}>
        <Text style={styles.text}>Type something</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'gray',
    padding: 16,
  },
  text: {
    backgroundColor: 'white',
    fontSize: 16,
    lineHeight: 1.52 * 16,
    color: 'black',
    padding: 0,
  },
});

export default App;

[jpope19]

any update here? is this being worked on?

[mellyeliu]

#46362 is gated right now for testing, we will open it up soon