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

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

Create a TextInput and set either prop: value or defaultValue
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

simulator

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 17

Most upvoted comments

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.

chrisdrackett on Mar 6, 2020

The issue persists.

fjcaetano on Jan 21, 2020

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.

anszau on Feb 4, 2020

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

kjossendal on Sep 10, 2019