[Android] ScrollView momentum not stopping when calling scrollTo programmatically

[chr-sk]

Description

When scrolling down a long ScrollView or FlatList on Android and calling scrollTo programmatically while the ScrollView's momentum is still going, the momentum does not stop and the resulting scrolling is stuttering and simply wrong.

React Native version / Platform

0.65.1 / Android

With 0.63.4, this bug was not yet present.

Steps To Reproduce

1. Render a ScrollView (or FlatList) with long content and a button with onPress={() => scrollViewRef.scrollTo({ y: 0, animated: true })}.
2. Scroll quickly down with your finger so that a momentum occurs.
3. Press the button while the momentum is still going.

Expected Results

The momentum should stop and the ScrollView should scroll to its beginning.

Possible reason

It seems that the reason for this bug lies in the following commit: https://github.com/facebook/react-native/commit/10314fe621e1649654e83df197adf657e0ca8363

[reepush]

10314fe made scrolling worse on Android :(

[yiuyiu]

Running into the same issue.

[RosCoder]

React Native 0.70.6. The same issue..

[bolan9999]

Any update? fk rn

[moremorefun]

scrollViewRef.scrollTo({ y: xxx, animated: false})

Nor did it move to the specified location, the new target location did not overwrite the old target location

[anatoleblanc]

Would love to have an update on this :)

[stitesExpensify]

I would also appreciate an update if anyone has found a solution

[halftheopposite]

This is also something we are facing on Android only (RN 0.70.1), and for a little bit more context:

1. Scroll down fast
2. onScroll reports normal scrolling values (ex: 1200, 1220, 1240, etc.)
3. Trigger a scrollTo to y: 0 with an outside action
4. onScroll correctly reports a scroll of y: 0 once, but then continues with its momentum (ex: 1240, 0, 1260, 1280, etc.)

[moremorefun]

This is also something we are facing, and for a little bit more context:

1. Scroll down fast

2. onScroll reports normal scrolling values (ex: 1200, 1220, 1240, etc.)

3. Trigger a scrollTo to y: 0 with an outside action

4. onScroll correctly reports a scroll of y: 0 once, but then continues with its momentum (ex: 1240, 0, 1260, 1280, etc.)

same issue

[tomekzaw]

The issue still persists on 0.71.2, both on Android emulator as well as physical device.

I've made a repro: https://github.com/tomekzaw/Issue32235

Here's a video recording:

https://user-images.githubusercontent.com/20516055/217268275-7ec9a228-bbd6-4294-aa1f-a43c4268984c.mov

I will investigate this issue further.

Edit: As a workaround, you can use scrollTo function from react-native-reanimated: https://github.com/tomekzaw/Issue32235/commit/81f34c4a204ad6c6f3d3d3893d85d4e3883d0a2c Note that it only works for animated: true (smooth scroll), for animated: false (immediate scroll) the issue still persists.

https://user-images.githubusercontent.com/20516055/217280454-aa58e8a6-69c2-4382-ae4a-bd8603caad7c.mov

Edit: After many hours of debugging, I came up with the following change that seems to resolve the issue. I will submit a pull request with this change soon.

   public void scrollTo(int x, int y) {
+    mScroller.abortAnimation();
     super.scrollTo(x, y);
     ReactScrollViewHelper.updateFabricScrollState(this);
     setPendingContentOffsets(x, y);
   }

https://user-images.githubusercontent.com/20516055/217784590-e5c56c71-608e-4ba2-b6de-3eb248fb8c45.mov