Problem with TextInput lineHeight on iOS

[tohellandback]

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

[label-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[mikelros]

Same here. Hope it's fixed soon 👍

[konstantin-shkel]

same on 0.62.2

rn info

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 102.72 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.15.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK: Not Found
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.2.1/11B53 - /usr/bin/xcodebuild
Languages:
Java: 10.0.2 - /usr/bin/javac
Python: 2.7.15 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

[Esxiel]

Here to confirm that the problem persists in 0.63.0 as well

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[askel4dd]

Applied changes from #29262 using patch-package to fix this, like so:

diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m
index 6603554..e87e0d0 100644
--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m
@@ -96,6 +96,11 @@ - (void)invalidateContentSize
     maximumSize.height = CGFLOAT_MAX;
   }

+  maximumSize.width -= self.paddingLeft.value + self.paddingRight.value;
+  maximumSize.width -= self.borderWidth;
+  maximumSize.height -= self.paddingTop.value + self.paddingBottom.value;
+  maximumSize.height -= self.borderWidth;
+
   CGSize contentSize = [self sizeThatFitsMinimumSize:(CGSize)CGSizeZero maximumSize:maximumSize];

   if (CGSizeEqualToSize(_previousContentSize, contentSize)) {

React Native 0.63.3

[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.

[dann1609]

the issue is still present.

[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.

[Akronae]

Same boat here

[github-actions]

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the amount of issues we receive, we're currently accepting only new issues against one of the supported version. Please open your issue on StackOverflow to get further community support.

[Akronae]

same on 0.62.2

rn info

System: OS: macOS 10.15.4 CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Memory: 102.72 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.15.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.8.4 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: Not Found IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.2.1/11B53 - /usr/bin/xcodebuild Languages: Java: 10.0.2 - /usr/bin/javac Python: 2.7.15 - /usr/local/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 npmGlobalPackages: react-native: Not Found

The author seems not to be active anymore, however plenty have provided some versions, and I would say that this happens on any version..

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[fabOnReact]

I corrected the formatting. The issue environment infos were hidden in comments. I just had to add the closing tags ``` for the code example.

[fabOnReact]

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

The issue is caused by adding lineHeight to TextInput (Issue #28012).

What changes do you think we should make in order to solve the problem?

Fix react-native TextInput (iOS) font metrics (descent) to avoid cutting text when setting the lineHeight ( https://stackoverflow.com/a/27631737/7295772).

1. react-native TextInput is just a wrapper around the iOS API UITextField
2. the TextInput text is styled with NSAttributedString

The issue only reproduces with TextInput, but not with Text, while both manage text style using the same API RCTAttributedTextUtils.

The text is cut when setting the lineHeight prop. The TextInput component sets the lineHeight without adjusting the baseline of the text with RCTBaselineOffset (RCTAttributedTextUtils#RCTNSTextAttributesFromTextAttributes). Text and TextInput component use shared API AttributedText to style the Text in the TextInput, but TextInput currently misses this logic (RCTApplyBaselineOffset). It was tested with this video (Expensify/App#17767 (comment)) in the Expensify App. Changing RCTApplyBaselineOffset does not change the baseline of the AttributedText in the TextInput, but changes the baseline of the appended Text.

As we can see the Text is cut if lineHeight is lower then Text height (image)

Commenting the code and the Text is not cut (image)

It is caused by the missing implementation in the TextInput of RCTBaselineOffset, which correctly sets the Text baseline and avoids cutting the text

RCTTextInputComponentView generates the text with RCTNSTextAttributesFromTextAttributes instead of RCTNSAttributedStringFromAttributedString

RCTBaselineOffset changes the text baseline (see the above screenshots and Expensify/App#17767 (comment)) and avoids this regression with Text component, but it is not implemented for TextInput component.

Summary:

• The string is not cut while using Text component.
• Text and TextInput components use the same API to style the text (AttributedString).
• The Text component applies custom logic when applying setting the lineHeight (RCTBaselineOffset). The logic modifies the text fontMetrics and avoids cutting the text.
• There is a missing implementation of RCTBaselineOffset in TextInput, which causes the regression (the text has the wrong baseline and it is cut).

[fabOnReact]

1. Text is not correctly aligned in TextInput

https://user-images.githubusercontent.com/24992535/235340821-10b2ad06-6010-46e9-bb21-17afc688147c.png

2. Result after fixing the text baseline with hardcoded value (for testing purposes) without modifying the placeholder baseline

https://user-images.githubusercontent.com/24992535/235340852-27a1b709-dc51-4996-9409-993544194a61.png
https://user-images.githubusercontent.com/24992535/235340930-ab521ff3-a222-4fd2-a647-a7fe7996d115.png

[fabOnReact]

Example from Issue #28012

Text is not correctly aligned when using lineHeight and height in a TextInput.

Before applying the fix

main.branch.mp4

After applying the fix

correct.caret.position.mp4

correct.caret.position.2.mp4

[bryanltobing]

Is there a workaround for this? still happening in RN v0.72.3

[kimjson]

@bryanltobing you can try applying this fix using patch-package