[0.57.2] Horizontal scroll view + pagingEnabled / snapToInterval / snapToOffsets bad UX and last item scroll bug

[chrusart]

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 1.08 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.10.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3
        API Levels: 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.1 => 16.5.1 
      react-native: 0.57.2 => 0.57.2 

Description

This is a continuation of discussion started in #21116

Android horizontal scroll view with snapInterval/snapOffsets set have constant speed of fling animation which looks bad from UX point of view and is not consistent with iOS.

With snapToInterval set cannot scroll to last item.

Videos about scrolling speed/decelaration:

0.56.1
https://www.dropbox.com/s/kwg3cx0bgbs4k5k/Android_RN_0.56.1_big_screen_width.mov?dl=0
https://www.dropbox.com/s/fjlcjtv0jznbsqx/iOS_RN_0.56.1_big_screen_width.mov?dl=0

0.57.2
https://www.dropbox.com/s/0buhliw0uge52rk/Android_RN_0.57.2_big_screen_width.mov?dl=0
https://www.dropbox.com/s/hnufpzwce5ejfa6/Android_RN_0.57.2_small_screen_width.mov?dl=0

Reproducible Demo

https://snack.expo.io/SkQP6su5Q

[olegbl]

6eeff75

[qchen-ms]

We are having the same issue on Android and I was able to work around it by simulating the behavior with implementing onScroll() to track the x offset and scroll direction and calculate the snap location and call scrollTo with the new x with animated = true in onScrollEndDrag().

[chrusart]

thanks @qchen-ms , before Android horizontal snapToInterval we had as well full component implemented this way, I just reported it as it looks as a bug for us.

[pribeh]

@chrusart The same happens for us with a vertical scroll view so this doesn't simply happen with horizontal scrolling. Swiping (or scrolling) up and down produces the same effect as long as snaptToInterval has been enabled.

We're attempting to create a vertical swipe feed by using sapto. Most of the time, regardless of finger drag velocity (swipe or fling), the scrollview moves very slowly - its basically unusable . I think the title of the issue should read something like: "including snapToInterval causes slow scrolling".

@olegbl are the pushes you've referenced here and in 21116 helpful in resolving this issue? I've read the pagingenabled thread and it appears as if there is a lot of overlap here. @olegbl thanks for your efforts on adding snapToInterval btw. Hopefully we can work out this kink.

[pribeh]

@qchen-ms would you be able to share more of your code?

[pribeh]

@hramos Would you consider this not a bug? I guess this could be categorized as feature related but I find the usability of the current swipe motion support pretty unusable at this point for our purposes. We're trying to figure out how to resolve the velocity-fling issue. Perhaps this should be resolved by a separate library. What would you suggest?

[hramos]

If you're asking because I removed the "Bug Report" label, that was part of a bulk edit to all issues as we are now using "Type: Bug Report" as the new label.

[ferrannp]

Hello there 👋. For what I tried, this seems to be fixed in 0.59.x. But please, if it's actually still an issue with 0.59 please comment below and we can reopen it 😊

[pribeh]

@ferrannp Can you show a video of it working correctly or reference the PR that resolves this? Swiping vertically at least is still exactly that same.

[pribeh]

@ferrannp I stand corrected. The following appears to produce the correct animation/gesture results on Android with 0.59 when attempting to achieve a vertical swipe-scroll:

snapToInterval={screen.height}
decelerationRate={0.83}
snapToAlignment={"start"}

The key is not to use a decelerationRate of zero, which is what others have recommended before to use when attempting to achieve swipe motion.