React-native: KeyboardAvoidingView with ScrollView inside -> no animation on keyboard show/hide

[grundmanise]

Description

Consider this structure:

<KeyboardAvoidingView ...>
   <FlatList ...> // or any other element that has `ScrollView` (ie `ListView`/`ScrollView` itself)
   <TextInput ...>
</KeyboardAvoidingView>

When TextInput is focused and keyboard animation happens TextInput animates as expected, but ScrollView changes its height without any animation.

Reproduction

https://sketch.expo.io/B1JIYaynx

Additional Information

• React Native version: 0.43
• Platform: iOS

[hramos]

We're cutting down on the number of outstanding issues, in order to allow us to focus. I'm closing this issue because it has been open for over 60 days with no activity. If you think it should still be opened let us know why. PRs are always welcome.

[grundmanise]

@hramos May you consider reopening it? Because it's definitely an issue.

[rcorrie]

Yeah this is for sure still an issue, and definitely not an edge case.

For the meantime (For our particular use case), we applied a 180deg rotation on the scrollView and the issue is manageable. You have to account for inverted scrolling among other things but at least those can be remedied.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[shergin]

@grundmanise KeyboardAvoidingView uses LayoutAnimation module inside. So, could you please create a demo only with pure ScrollView and LayoutAnimation to confirm that it is not related to TextInput and KeyboardAvoidingView. This would really help to understand this issue and hopefully fix this.

[Doskulov]

does somebody fixed that?

[legarland]

I thought I would share my workaround for this issue.

<ScrollView 
  style={{ flex: 1 }} 
  ref={ref => this.scrollView = ref}
>
 // Scrollview Content
</ScrollView>

componentDidMount() {
  this.keyboardSub = Keyboard.addListener('keyboardWillShow', ()=> {
    this.scrollView.scrollToEnd({ animated: true })
  })
}

componentWillUnmount() {
  this.keyboardSub.remove()
}

[qwlong]

@legarland
how to import Keyboard?

[iSachdeva]

Try this for flat list and scroll view

behavior='position'

You can play with property keyboardVerticalOffset={xyz} if you need.

[markowork]

To add up on @legarland solution (thanks for it!), 'keyboardWillShow' is not available on android so you guys can use 'keyboardDidShow'. Additionally, android views are a bit more slower so you'd have to wrap your scrollToEnd inside a small timeout so scrollview can get a proper height on android.