No fling/momentum on scroll (Android Pie 9.0)

[alexandrius]

Environment

React Native Environment Info:
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 990.90 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.3.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.57.8 => 0.57.8
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

I installed custom rom PixelExperience on my Xiaomi Redmi 5 Plus.
Since then I'm experiencing scroll issue. If you make the page lose focus - scroll lacks the fling or momentum behaviour.
This only happens in React Native apps.
Live demo.
https://www.youtube.com/watch?v=vG2fTEb_ICg
Emulator works just fine.

I don't think is the custom rom issue since another user (@vforvasile) has reported the same.
Android has some changes for scrolling element https://developer.android.com/about/versions/pie/android-9.0-changes-28#scrolling-element
I tried using SDK 26 and 27 but it didn't solve the issue

Reproducible Demo

The issue described above is present in expo too.
https://snack.expo.io/@alexandrius/c3VwcG

[esmat-nawahda]

+1
I also have the same issue on Android 9 devices,

using: react-native 0.54.0

[alexandrius]

I tried different ROM Resurrection Remix today. It has the same issue with fling.

[alexandrius]

I tried react-native 0.58.4 today still same issue. I will try to dig into react native code this Saturday to get the idea

[patrickkempff]

@alexandrius thank you for digging into this

[alexandrius]

I have some updates regarding this issue.
I built React Native from source code and these are my observations:
I logged every value in ReactScrollView.java particularly in methods fling() and onOverScrolled() values didn't change before and after loosing focus.
Then I went ahead and removed code below from fling()

else if (mScroller != null) {
// FB SCROLLVIEW CHANGE

// We provide our own version of fling that uses a different call to the standard OverScroller
// which takes into account the possibility of adding new content while the ScrollView is
// animating. Because we give essentially no max Y for the fling, the fling will continue as long
// as there is content. See #onOverScrolled() to see the second part of this change which properly
// aborts the scroller animation when we get to the bottom of the ScrollView content.

int scrollWindowHeight = getHeight() - getPaddingBottom() - getPaddingTop();
mScroller.fling(
  getScrollX(), // startX
  getScrollY(), // startY
  0, // velocityX
  correctedVelocityY, // velocityY
  0, // minX
  0, // maxX
  Integer.MIN_VALUE, // minY
  Integer.MAX_VALUE, // maxY
  0, // overX
  scrollWindowHeight / 2 // overY
);

ViewCompat.postInvalidateOnAnimation(this);

// END FB SCROLLVIEW CHANGE
}

Everything seemed to start working after this change except https://github.com/wix/react-native-calendars. I couldn't expend calendar of Agenda component.
Also I understand this is useful logic so it was not an option.

Since the behaviour resembles the behaviour of ScrollView inside ScrollView on native Android. I went ahead and extended ReactScrollView with NestedScrollView

public class ReactScrollView extends NestedScrollView implements ReactClippingViewGroup, ViewGroup.OnHierarchyChangeListener, View.OnLayoutChangeListener

Everything started to work just fine after this.
Here's comparison
https://www.diffchecker.com/EQhp2UJY

[alexandrius]

@patrickkempff Do you suggest creating my own react-native aar package or do you think #23490 can be implemented in short time?

[cpojer]

See my reply on the PR.

[alexandrius]

OK thanks. But please I see no reason to close this issue. I will try to fix the code without switching to NestedScrollView