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