callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.68k stars 411 forks source link

Rendering in ScrollView makes gestures hard to be picked up on Android #606

Open vytautasvargonas opened 2 years ago

vytautasvargonas commented 2 years ago

Environment

Android react-native: 0.66.4 react-native-pager-view: 5.4.15

Description

Running into a couple of issues when rendering pager view inside ScrollView on Android.

  1. Swiping diagonally at a small angle - 10-20 degrees - gets captured by scrollview and not pager view.
  2. Swiping horizontally while the the scroll still has momentum doesn't get captured by pager view.3.

These issues combined make a terrible user experience on Android.

Diagonal swipe Scroll momentum
ezgif-3-9b2f3ca01b ezgif-3-6767ceb422

Reproducible Demo

https://snack.expo.dev/D1avOzeAs?platform=android

nlaffey commented 1 year ago

We're also encountering this issue and looking for a way to improve upon the experience on Android.

"react-native-pager-view": "6.0.1" "react-native": "0.70.5"

urkin-dev commented 1 year ago

That is the exact problem we are currently dealing with. On iOS, it works really well, but on Android swiping needs to be perfectly horizontal to switch pages

BasixKOR commented 1 year ago

Are there any workarounds available for this issue? It isn't deal-breaking but UX is quite subpar compared to what can be achieved using native APIs.

BasixKOR commented 1 year ago

While I was looking for a solution, I stumbled upon this post, which has a workaround code for this exact issue: https://bladecoder.medium.com/fixing-recyclerview-nested-scrolling-in-opposite-direction-f587be5c1a04

Apparently, it is an issue of ViewPager2 itself, not necessarily this library.