React-native: [iOS] TextInput does not scroll to reveal what's being typed

[fjcaetano]

If a user inputs a large text into a TextInput it's stopping the caret at the last visible position without showing what's being typed by the user.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 534.96 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 24.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
      System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
  IDEs:
    Android Studio: 3.0 AI-171.4443003
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5

Steps To Reproduce

1. Create a TextInput and set either prop: value or defaultValue
2. Add fontSize and lineHeight to the field's style.

<TextInput
  defaultValue='some default value'
  style={{ fontSize: 28, lineHeight: 32 }}
/>

Our investigations have discovered this is an iOS only issue. It appears to happen only for devices without the notch. These were the ones we were able to observe the issue happening:

• iPhone 8 (12.4)
• iPhone 8+ (12.1.2)
• iPhone 7+ (11.4.1)
• iPhone 6S+ (11.4.1)
• iPhone SE (9.3.2)

The issue does not occur for Android. We were also able to notice the correct behavior happening on iPhone X and XS Max.

Describe what you expected to happen

The TextInput should scroll to the side revealing what the user is typing.

Example

Run this on iOS: https://snack.expo.io/Sk3hmoHBB

[Balintataw]

This, for one reason or another, is caused by the existence of the lineHeight style property.

[Mayzie]

This, for one reason or another, is caused by the existence of the lineHeight style property.

Not for me. It occurs when setting a custom font (fontFamily) and size (fontSize).

[stale[bot]]

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.

[fjcaetano]

The issue persists.

[ethanneff]

The issue still exists on react-native 0.61.5. The current workaround on our team is to remove lineHeight from TextInput.

[anszau]

In the environment I'm working on this doesn't seem to have anything to do with line height, and instead depends on the fontSize and borderWidth style props.
As far as I can tell, the issue appears when the font size plus two times the border width is above a certain value, which depends on the font family. For example, the default iOS font seems to break at values above 16 (e.g. fontSize: 14, borderWidth: 1), and the font my team is using (Google's Poppins) breaks above 14.

[chrisdrackett]

it seems to me this can be related to both lineHeight and fontSize. For example in my app if the size is 14 it scrolls correctly with a line height set. If I set the size to 16 it will not scroll until I remove the lineHeight.

[stale[bot]]

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.

[chrisdrackett]

still exists as far as I can tell

[stale[bot]]

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.

[chrisdrackett]

still a bug in my testing