TextInput lineHeight handling is incorrect #45268
Description
Description
Due to inconsistencies of NSLayoutManager configuration across RN, <Text /> and <TextInput /> components do handle line height in a slightly different way. More specifically, the resulting line heights of a <Text /> component seem to be correct, while <TextInput />s one is off by some fraction.
The offending places seem to be https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm#L52 and
https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm#L274 – notice both are missing setting usesFontLeading to NO (contrary, it gets set in other places, e.g. https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Text/Text/RCTTextShadowView.mm#L223).
The reproduction is really trivial – please see the snack attached. Notice how the two columns of texts are perfectly aligned on the web and is not really aligned on iOS, although both elements share the same style attribute.
The same issue happens on Android, but it is probably caused by something different, as the amount by which the texts are off is smaller.
Steps to reproduce
- Set custom line height to a
<TextInput />component - Measure the actual line height (using a screenshot)
- Notice the difference
React Native Version
0.73.6
Affected Platforms
Runtime - iOS
Output of npx react-native info
System:
OS: macOS 14.3
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 47.86 MB / 32.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 20.11.1
path: ~/.nvm/versions/node/v20.11.1/bin/node
Yarn:
version: 4.1.1
path: /usr/local/bin/yarn
npm:
version: 10.2.4
path: ~/.nvm/versions/node/v20.11.1/bin/npm
Watchman:
version: 2024.05.06.00
path: /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK: Not Found
IDEs:
Android Studio: 2023.2 AI-232.10300.40.2321.11567975
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 13.0.1
path: /usr/bin/javac
Ruby:
version: 3.3.0
path: /Users/anton/.rvm/rubies/ruby-3.3.0/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.6
wanted: 0.73.6
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
N/A
Reproducer
https://snack.expo.dev/YI-C2DqB4yUmxW9Eb0cWW
Screenshots and Videos
