mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Fix scrollview momentum not stopping on scrollTo/scrollToEnd for horizontal scrollviews (#39529)
Summary: ### Motivation My main motivation for this is using nested horizontal `Flashlists` inside a vertical `Flashlist`. Like a `RecyclerView`, since my horizontal lists get recycled, if I scroll say the first horizontal list and scroll down, then when this list gets recycled it continues scrolling even if the content is new:  To handle this, I want to call `scrollTo` everytime a new row appears to reset the scroll offset, however I've realized this doesn't stop the scroll momentum ### The bug When scrolling and calling `scrollTo`, scroll momentum should be stopped and we should scroll to where `scrollTo` asked for. All credit goes to tomekzaw for https://github.com/facebook/react-native/pull/36104 who fixed it for vertical scrollviews I realized we had the same issue for - horizontal scroll views - when calling `scrollToEnd` | Vertical scrollview (working ✅) | Horizontal scrollview (before fix, not stopping ❌) | Horizontal scrollview (after fix ✅)| |--------|--------|--| | ||| Based on https://github.com/facebook/react-native/pull/38728 I kept all those calls to `abortAnimation` on the View Manager ## Changelog: [ANDROID] [FIXED] - Fixed horizontal ScrollView momentum not stopping when calling scrollTo programmatically [ANDROID] [FIXED] - Fixed ScrollView momentum not stopping when calling scrollToEnd programmatically Pull Request resolved: https://github.com/facebook/react-native/pull/39529 Test Plan: My test code is [this](https://gist.github.com/Almouro/3ffcfbda8e2239e64bee93985e243000) Basically: - a scrollview with a few elements - some buttons to trigger a `scrollTo` To reproduce the bug, I scroll then click one of the buttons triggering a `scrollTo` I added `react-native@nightly` to my project, and copy pasted `packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll` folder from this branch to try out my fixes Then tested the following scenarios on Android: | List layout | Method | Not animated | Animated| |--------|--------|--|--| | horizontal | scrollTo | |  | | horizontal | scrollToEnd | | | | vertical | scrollTo | | | | vertical | scrollToEnd |  | | Reviewed By: javache Differential Revision: D49437886 Pulled By: ryancat fbshipit-source-id: 358c9b0eed7dabcbc9b87a15d1a757b414ef514b
This commit is contained in:
committed by
Facebook GitHub Bot
parent
196b3f9ef9
commit
2f86aafdfd
+6
@@ -231,6 +231,12 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
|
||||
}
|
||||
}
|
||||
|
||||
public void abortAnimation() {
|
||||
if (mScroller != null && !mScroller.isFinished()) {
|
||||
mScroller.abortAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
public void setSnapInterval(int snapInterval) {
|
||||
mSnapInterval = snapInterval;
|
||||
}
|
||||
|
||||
+2
@@ -199,6 +199,7 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
|
||||
@Override
|
||||
public void scrollTo(
|
||||
ReactHorizontalScrollView scrollView, ReactScrollViewCommandHelper.ScrollToCommandData data) {
|
||||
scrollView.abortAnimation();
|
||||
if (data.mAnimated) {
|
||||
scrollView.reactSmoothScrollTo(data.mDestX, data.mDestY);
|
||||
} else {
|
||||
@@ -219,6 +220,7 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
|
||||
"scrollToEnd called on HorizontalScrollView without child");
|
||||
}
|
||||
int right = child.getWidth() + scrollView.getPaddingRight();
|
||||
scrollView.abortAnimation();
|
||||
if (data.mAnimated) {
|
||||
scrollView.reactSmoothScrollTo(right, scrollView.getScrollY());
|
||||
} else {
|
||||
|
||||
+1
@@ -296,6 +296,7 @@ public class ReactScrollViewManager extends ViewGroupManager<ReactScrollView>
|
||||
|
||||
// ScrollView always has one child - the scrollable area
|
||||
int bottom = child.getHeight() + scrollView.getPaddingBottom();
|
||||
scrollView.abortAnimation();
|
||||
if (data.mAnimated) {
|
||||
scrollView.reactSmoothScrollTo(scrollView.getScrollX(), bottom);
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user