Fix scrollview momentum not stopping on scrollTo/scrollToEnd for horizontal scrollviews #39529
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
Base commit: 3b5bea0 |
|
This makes sense to me! Is there something we can add to RNTester to showcase the behavior? |
|
@ryancat has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
@lunaleaps I'm realizing there was already an example for this inside the RN Tester, I hadn't thought to check 😅
|
ShevO27
pushed a commit
to ShevO27/react-native
that referenced
this pull request
Sep 26, 2023
…zontal scrollviews (facebook#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 facebook#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 facebook#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: facebook#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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Motivation
My main motivation for this is using nested horizontal
Flashlistsinside a verticalFlashlist.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
scrollToeverytime a new row appears to reset the scroll offset, however I've realized this doesn't stop the scroll momentumThe bug
When scrolling and calling
scrollTo, scroll momentum should be stopped and we should scroll to wherescrollToasked for.All credit goes to @tomekzaw for #36104 who fixed it for vertical scrollviews
I realized we had the same issue for
scrollToEndBased on #38728 I kept all those calls to
abortAnimationon the View ManagerChangelog:
[ANDROID] [FIXED] - Fixed horizontal ScrollView momentum not stopping when calling scrollTo programmatically
[ANDROID] [FIXED] - Fixed ScrollView momentum not stopping when calling scrollToEnd programmatically
Test Plan:
My test code is this
Basically:
scrollToTo reproduce the bug, I scroll then click one of the buttons triggering a
scrollToI added
react-native@nightlyto my project, and copy pastedpackages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scrollfolder from this branch to try out my fixesThen tested the following scenarios on Android: