Keyboard popup view auto-scroll not working for TextInput with multiline

[SupriyaKalghatgi]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
      Memory: 28.78 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.3 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 22.0.1, 23.0.1, 25.0.3, 26.0.1, 26.0.3
        API Levels: 23, 25, 26
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

Keyboard popup view does not scroll to the focussed TextInput with multiline prop

Reproducible Demo

<TextInput placeholder="1" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="2" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="3" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="4" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="5" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="6" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="7" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="8" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="9" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }}
multiline={true} />
<TextInput placeholder="10" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="11" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="12" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />

Output

[ggtmtmgg]

Try to use react-native-keyboard-aware-scroll-view.

https://snack.expo.io/@ggtmtmgg/keyboardawarescrollview-demo

[SupriyaKalghatgi]

Tried with this one too https://github.com/APSL/react-native-keyboard-aware-scroll-view

[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 "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[dozoisch]

not stale!

[alloy]

Thanks for the reproduction! I was able to confirm that this issue is no longer present in the current expo (which runs RN 0.57.x) 🎉

[Manigandan-Azure]

This issue still exist in React native 0.60

[schwamic]

I have that problem, too. If I add multiline={true} the auto-scroll doesn't work anymore. When I remove multiline={true}, the TextInput automatically scrolls into the view.

RN61+

[ShavaShav]

Confirm that I too still get this issue.

[zigcccc]

The issue still persist... any solutions besides third party libraries?