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

[alexandrius]

OK this issue is much bigger than I thought. I think it's something related to javascript engine of AOSP roms. I'll try to dig deeper for this issue

[alexandrius]

0.59.0 rc2 has same issue.
I will try https://github.com/react-native-community/jsc-android-buildscripts on the weekend

[xgAnd]

What is the solution to this problem? @cpojer I can dot find your RP can you support in this ,thanks a lot.

[christianbach]

We had a problem with bad scrolling performance on Android 9.

In our case we hade a Swiper component that rendered a couple of screens ~6-7 each screen rendered a ActivityIndicator. Removing the extra ActivityIndicator solved the problem for us.

[alexandrius]

@cpojer @patrickkempff Can you please give me a tip why might this happening? I just need some information where should I be digging at.

Besides swapping ScrollView to NestedScrollView. I tried to comment out some ReactActivity lifecycle methods but the issue is still there. I have only one idea why this might be happening: When the view is overlapped by another view or window the fling behavior stops working.

[alexandrius]

OK just after writing the comment above I managed to finally fix this issue. It's far from creating PR but here's some insight:
It seems the OverScroller instance is different. Before and after loosing the main focus. I still need to dig more to get why is this even happening.
I added this code to fling()

      OverScroller scroller = getOverScrollerFromParent();
      Log.d("OVERSCROLLER_ALEXANDRIUS = NEW", scroller.toString());
      Log.d("OVERSCROLLER_ALEXANDRIUS = OLD", mScroller.toString());

Here are logs before loosing focus (using the same App.js code I posted when I originally opened the issue). Hash codes are the same

OVERSCROLLER_ALEXANDRIUS = NEW: android.widget.OverScroller@f9abd9d
OVERSCROLLER_ALEXANDRIUS = OLD: android.widget.OverScroller@f9abd9d

And after loosing code

OVERSCROLLER_ALEXANDRIUS = NEW: android.widget.OverScroller@5b3023c
OVERSCROLLER_ALEXANDRIUS = OLD: android.widget.OverScroller@f9abd9d

As you can see the hash codes are different. (@5b3023c vs @f9abd9d)

After I add this code the issue is resolved.

      OverScroller scroller = getOverScrollerFromParent();
      if (mScroller != scroller) {
        mScroller = scroller;
      }

I will try to test native Android app with custom OverScroller fling if the issue is there too. This is probably Android issue not React Native

[alexandrius]

For anyone experiencing the issue I suggest applying this patch. I understand this is a hacky way of fix so I'm not going to create a PR.

diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
index d39159a..7d0ea33 100644
--- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
+++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java
@@ -49,7 +49,7 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou
   private static boolean sTriedToGetScrollerField = false;
 
   private final OnScrollDispatchHelper mOnScrollDispatchHelper = new OnScrollDispatchHelper();
-  private final @Nullable OverScroller mScroller;
+  private @Nullable OverScroller mScroller;
   private final VelocityHelper mVelocityHelper = new VelocityHelper();
   private final Rect mRect = new Rect(); // for reuse to avoid allocation
 
@@ -330,6 +330,12 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou
       // 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.
 
+      OverScroller scroller = getOverScrollerFromParent();
+      
+      if (mScroller != scroller) {
+        mScroller = scroller;
+      }
+
       int scrollWindowHeight = getHeight() - getPaddingBottom() - getPaddingTop();
 
       mScroller.fling(

[charpeni]

I can't reproduce that bug on Android 9, even on Expo with https://snack.expo.io/@alexandrius/c3VwcG.

Could anyone provide more information on how to replicate this?

[ReneMarquez]

I can't reproduce that bug on Android 9, even on Expo with https://snack.expo.io/@alexandrius/c3VwcG.

Could anyone provide more information on how to replicate this?

I'm encountering this bug, I upgraded to the latest react native (0.64) hoping it was fixed but nope, I can't replicate it on emulator but on a real device (nexus on android 9 aosp) its easy to replicate, just navigate from a screen that has a flatlist to another and go back or trigger an alert on that same screen, scrolling its like if you set the decelerationRate to 0

[alexandrius]

@charpeni It's only happening on AOSP android roms.