callstack / callstack/react-native-pager-view
How to make ViewPager be more aggressive in responding to horizontal gesture when nested inside a vertical ScrollView?
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
Hi everyone,
Users are reporting that it is difficult to use the ViewPager to successfully scroll left and right between images, since the ScrollView that the ViewPager is nested in seems to grab the event more than it should.
[Example](https://photos.google.com/share/AF1QipM8vQJTpFJkYNWk4H2DttKGoPp_h1GQOWglxDdaV-PqukyPk1S1nOE3NjHw_af9HQ/photo/AF1QipOxZRQTf5imKOZqPpwqqdnPqSZkyO74F8zx02bN?key=NFJVY3ZlWFdWeXRJODFhQTlISGJrU2RIR3RZN3RR)
Indeed, I compared my app to Google Maps which has a very similar UI: A horizontally scrollable set of images inside a vertically scrolling parent view. In Google Maps, I can move my finger at 45 degrees to either side, and the horizontal images view takes the event. In my app, moving my finger 45 degrees is picked up by the ScrollView and the entire page begins scrolling up and down.
Here, the purple arrows are what is handled by both apps successfully. The blue arrows are what is handled successfully by Google Maps but not by ScrollView/ViewPager. In Google Maps, the result is a horizontal scroll, in my app the result is a vertical scroll - and angry users.
I have looked into the props and found: `ViewPager.onStartShouldSetResponder` and `ViewPager.onMoveShouldSetResponderCapture`. I tried providing a function that always returns true for both, but got no effect in my app. I also tried the same props but returning false for the ScrollView. Still nothing. I also tried `ScrollView.disableScrollViewPanResponder`, although I'm not really sure what this does.
Somewhat at a loss here, can anyone help?
Contributor guide
Assessment
This issue has not been assessed yet.