ScrollView bounce stuck mid-animation when scrolling inertially on Android

Description

When you scroll in a ScrollView and it reaches its end, it will leave a small gap below the ScrollView (note the white space above the Android navigation bar). I think it’s because the bounce animation gets cut off. It only happens when you scroll inertially - if you reach the end with your finger still on the screen, it works as expected.

The size of the gap depends on how much inertia you give it:

When you then interact with screen again (try to overscroll), the gap disappears:

I also tried giving the ScrollView flex: 1, wrapping it in a View with flex: 1, disabling removeClippedSubviews - all the “tricks” I could find in other issues, but still no go.

I expect the ScrollView to have the same bounce effect at its start and its end and to not leave any gaps behind.

What’s actually happening is that the ScrollView bounce effect only works at the top. At the bottom, it gets chopped off and leaves a gap behind.

Reproduction

I couldn’t reproduce it on rnplay, but I see it on all my devices (Android 5 & 6) and also in Genymotion VMs (Android 4 & 6). Here is a sample project:

$ git clone https://github.com/stovmascript/sample-react-native-scrollview-issue.git

Of course, it’s also reproducible on ListViews, where I initially noticed it.

Additional Information

• React Native version: 0.36.0
• Platform: Android
• Operating System: MacOS

[stovmascript]

@brentvatne Looks like there was a change to the ScrollView here:

Fix ScrollView bounce back bug in open source (36ca1a0) - @astreet

There are other commits since then, but some have been reverted, so this might be it?

[astreet]

Thanks for the bug report! This should be fixed now in https://github.com/facebook/react-native/commit/f2d3113c1db894097ef67ab1da84a508e39a3448 (I verified it no longer repros with your sample app – thanks for providing it!)