`TextInput` inside `ScrollView` can cause input to look invisible

[bobjflong]

When a non-scrolling multiline TextInput is inside a ScrollView, certain new lines are invisible. This is possibly limited to iPhone X. I have not been able to reproduce on iPhone 7, for example.

In this gif, I added a bunch of As, until I found an invisible line, where I typed hello. I can move this hello in or out of view by pushing it to the next or previous line:

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 781.27 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
  IDEs:
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.4 => 0.60.4 
  npmGlobalPackages:
    eslint-plugin-react-native: 3.7.0

Steps To Reproduce

1. On an iPhone X, device or simulator..
2. Add the example code below
3. Type a bunch of lines into the TextInput

Expected: every new line that is added is visible.

Actual: some of the lines are invisible, and can only be viewed by pushing them onto the previous or next line.

Minimal code to reproduce:

<ScrollView scrollEnabled style={{ marginTop: 100 }}>
  <TextInput multiline placeholder="type here" scrollEnabled={false} />
</ScrollView>

Workarounds:

• Enabling scrollEnabled on the TextInput
• Explicitly setting a height on the TextInput (eg. by dynamically measuring the contents)

[bethea28]

Hi! I am new here and I would like to take this issue if it is still open so I will be working on it!

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.60 and verify if the issue still exists.

Details

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[bobjflong]

Confirmed that this still happens on v60

[bethea28]

I am letting the issue go back into the wild. Sorry for holding it up. I found myself doing a lot more work on the upgrade-helper project. Thanks!

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

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.