Scrollview w/ pagingEnabled instantly changing page on Android when scrolling fast #20155
Labels
Comments
grabbou
pushed a commit
that referenced
this issue
Aug 31, 2018
Summary: * Added snapToOffsets prop to ScrollView. Allows snapping at arbitrary points. * Fixed pagingEnabled not being overridden by snapToInterval on iOS. * Fixed Android *requiring* pagingEnabled to be defined alongside snapToInterval. * Added support for decelerationRate on Android. * Fixed snapping implementation. It was not calculating end position correctly at all (velocity is not a linear offset). * Resolves #20155 * Added support for new content being added during scroll (mirrors existing functionality in vertical ScrollView). * Added support for snapToInterval. * Resolves #19552 Reviewed By: yungsters Differential Revision: D9405703 fbshipit-source-id: b3c367b8079e6810794b0165dfdbcff4abff2eda
gengjiawen
pushed a commit
to gengjiawen/react-native
that referenced
this issue
Sep 14, 2018
Summary: * Added snapToOffsets prop to ScrollView. Allows snapping at arbitrary points. * Fixed pagingEnabled not being overridden by snapToInterval on iOS. * Fixed Android *requiring* pagingEnabled to be defined alongside snapToInterval. * Added support for decelerationRate on Android. * Fixed snapping implementation. It was not calculating end position correctly at all (velocity is not a linear offset). * Resolves facebook#20155 * Added support for new content being added during scroll (mirrors existing functionality in vertical ScrollView). * Added support for snapToInterval. * Resolves facebook#19552 Reviewed By: yungsters Differential Revision: D9405703 fbshipit-source-id: b3c367b8079e6810794b0165dfdbcff4abff2eda
aleclarson
pushed a commit
to aleclarson/react-native
that referenced
this issue
Sep 16, 2018
Summary: * Added snapToOffsets prop to ScrollView. Allows snapping at arbitrary points. * Fixed pagingEnabled not being overridden by snapToInterval on iOS. * Fixed Android *requiring* pagingEnabled to be defined alongside snapToInterval. * Added support for decelerationRate on Android. * Fixed snapping implementation. It was not calculating end position correctly at all (velocity is not a linear offset). * Resolves facebook#20155 * Added support for new content being added during scroll (mirrors existing functionality in vertical ScrollView). * Added support for snapToInterval. * Resolves facebook#19552 Reviewed By: yungsters Differential Revision: D9405703 fbshipit-source-id: b3c367b8079e6810794b0165dfdbcff4abff2eda
3 tasks
facebook-github-bot
pushed a commit
that referenced
this issue
Sep 24, 2018
Summary: The snapToOffsets changes improved the flinging algorithm for snapToInterval/snapToOffsets but actually broke it for pagingEnabled because it's meant to only scroll one page at a time. First, I just brough back the old algorithm, but noticed that it has a bunch of issues (e.g. #20155). So, I tried to improve the algorithm to make sure it uses the proper target offset prediction using the same physics model that Android uses for it's normal scrolling but still be limited to one page scrolls. This resolves #21116. Reviewed By: shergin Differential Revision: D9945017 fbshipit-source-id: be7d4dfd1140f4c4d32bad93a03812dc80286069
grabbou
pushed a commit
that referenced
this issue
Oct 2, 2018
Summary: The snapToOffsets changes improved the flinging algorithm for snapToInterval/snapToOffsets but actually broke it for pagingEnabled because it's meant to only scroll one page at a time. First, I just brough back the old algorithm, but noticed that it has a bunch of issues (e.g. #20155). So, I tried to improve the algorithm to make sure it uses the proper target offset prediction using the same physics model that Android uses for it's normal scrolling but still be limited to one page scrolls. This resolves #21116. Reviewed By: shergin Differential Revision: D9945017 fbshipit-source-id: be7d4dfd1140f4c4d32bad93a03812dc80286069
sjchmiela
pushed a commit
to expo/react-native
that referenced
this issue
Dec 15, 2018
Summary: The snapToOffsets changes improved the flinging algorithm for snapToInterval/snapToOffsets but actually broke it for pagingEnabled because it's meant to only scroll one page at a time. First, I just brough back the old algorithm, but noticed that it has a bunch of issues (e.g. facebook#20155). So, I tried to improve the algorithm to make sure it uses the proper target offset prediction using the same physics model that Android uses for it's normal scrolling but still be limited to one page scrolls. This resolves facebook#21116. Reviewed By: shergin Differential Revision: D9945017 fbshipit-source-id: be7d4dfd1140f4c4d32bad93a03812dc80286069
t-nanava
pushed a commit
to microsoft/react-native-macos
that referenced
this issue
Jun 17, 2019
Summary: * Added snapToOffsets prop to ScrollView. Allows snapping at arbitrary points. * Fixed pagingEnabled not being overridden by snapToInterval on iOS. * Fixed Android *requiring* pagingEnabled to be defined alongside snapToInterval. * Added support for decelerationRate on Android. * Fixed snapping implementation. It was not calculating end position correctly at all (velocity is not a linear offset). * Resolves facebook#20155 * Added support for new content being added during scroll (mirrors existing functionality in vertical ScrollView). * Added support for snapToInterval. * Resolves facebook#19552 Reviewed By: yungsters Differential Revision: D9405703 fbshipit-source-id: b3c367b8079e6810794b0165dfdbcff4abff2eda
t-nanava
pushed a commit
to microsoft/react-native-macos
that referenced
this issue
Jun 17, 2019
Summary: * Added snapToOffsets prop to ScrollView. Allows snapping at arbitrary points. * Fixed pagingEnabled not being overridden by snapToInterval on iOS. * Fixed Android *requiring* pagingEnabled to be defined alongside snapToInterval. * Added support for decelerationRate on Android. * Fixed snapping implementation. It was not calculating end position correctly at all (velocity is not a linear offset). * Resolves facebook#20155 * Added support for new content being added during scroll (mirrors existing functionality in vertical ScrollView). * Added support for snapToInterval. * Resolves facebook#19552 Reviewed By: yungsters Differential Revision: D9405703 fbshipit-source-id: b3c367b8079e6810794b0165dfdbcff4abff2eda
t-nanava
pushed a commit
to microsoft/react-native-macos
that referenced
this issue
Jun 17, 2019
Summary: The snapToOffsets changes improved the flinging algorithm for snapToInterval/snapToOffsets but actually broke it for pagingEnabled because it's meant to only scroll one page at a time. First, I just brough back the old algorithm, but noticed that it has a bunch of issues (e.g. facebook#20155). So, I tried to improve the algorithm to make sure it uses the proper target offset prediction using the same physics model that Android uses for it's normal scrolling but still be limited to one page scrolls. This resolves facebook#21116. Reviewed By: shergin Differential Revision: D9945017 fbshipit-source-id: be7d4dfd1140f4c4d32bad93a03812dc80286069
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment:
OS: macOS High Sierra 10.13.1
Node: 7.9.0
Yarn: 0.22.0
npm: 4.2.0
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 2.3 AI-162.3934792
Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.55.4 => 0.553
Target Platform: iOS (11.2) & Android (8.0)
Steps to Reproduce
Create a scrollview with pagingEnabled, horizontal and 100% width & height
Populate the scrollview with more than 3 elements with device width and flex: 1 (so it takes up the whole height)
Scroll really quickly between those elements on Android
You'll now see an instant hop from one element to the other, without an animation
Do the same thing on iOS and it will be a smooth scroll animation
Expected Behavior
I expected it to be the same on Android as it is on iOS, a smooth scroll animation instead of instantly changing page.
Actual Behavior
Instantly switching page on Android (without any animation)
Video demonstration
Reproducible Demo
Expo snack
NOTE: This is a reproduction of #17056, which I have confirmed for my react version on RN 55.4. I had to switch to ViewPagerAndroid on Android, but it would be nice to be able to use the ScrollView.
The text was updated successfully, but these errors were encountered: