Repository navigation
Commit 2f86aaf
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 #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 #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: #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: 358c9b0eed7dabcbc9b87a15d1a757b414ef514b1 parent 196b3f9 commit 2f86aaf
3 files changed
Lines changed: 9 additions & 0 deletions
File tree
- packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
231 | 231 | | |
232 | 232 | | |
233 | 233 | | |
| 234 | + | |
| 235 | + | |
| 236 | + | |
| 237 | + | |
| 238 | + | |
| 239 | + | |
234 | 240 | | |
235 | 241 | | |
236 | 242 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
199 | 199 | | |
200 | 200 | | |
201 | 201 | | |
| 202 | + | |
202 | 203 | | |
203 | 204 | | |
204 | 205 | | |
| |||
219 | 220 | | |
220 | 221 | | |
221 | 222 | | |
| 223 | + | |
222 | 224 | | |
223 | 225 | | |
224 | 226 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
296 | 296 | | |
297 | 297 | | |
298 | 298 | | |
| 299 | + | |
299 | 300 | | |
300 | 301 | | |
301 | 302 | | |
| |||
0 commit comments