meliorence / meliorence/react-native-snap-carousel
Item vertical scroll interferes with carousel horizontal scroll (Android only)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Is this a bug report, a feature request, or a question?
This is a bug report
Summary: I have a carousel where each item is a card that has a title and a WebView. On Android, when attempting to scroll the web page loaded in the webview, the gesture handler of the Carousel gets fired first most of the time. On iOS, everything works fine.
Have you followed the required steps before opening a bug report?
- I have read the guidelines regarding bug report.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- I have searched for existing issues and made sure that the problem hasn't already been reported.
- I am using the latest plugin version.
- I am following the issue template closely in order to produce a useful bug report.
Have you made sure that it wasn't a React Native bug?
Yes, it is not an issue with React Native - the iOS build works as expected.
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
Android only.
Is the bug reproductible in a production environment (not a debug one)?
Yes
Environment
Environment:
React: 16.11.0
React native: 0.62.0
react-native-snap-carousel: 4.0.0-beta.5
Target Platform:
Android (10.0)
iOS (13)
Expected Behavior
On Android, the user should be able to scroll the web page (vertically) without triggering a carousel horizontal scroll.
Actual Behavior
On Android, most attempts to scroll the web page (vertically) will trigger a carousel horizontal scroll
Here are gifs showing the issue. The iOS build works as expected, but for Android it's virtually impossible to scroll a webpage vertically without triggering the horizontal Carousel scroll.
iOS

Android

Reproducible Demo
https://github.com/dudeinthemirror/carousel-example
Steps to Reproduce
iOS
- Initialize, build and run iOS (yarn, yarn start, pod install, yarn ios)
- Cards with title and webview will load in the Carousel
- Scroll up and down in a webpage
- Observe that everything works as expected (no interference between the vertical and horizontal scroll)
Android
- Initialize, build and run Android (yarn, yarn start, pod install, yarn android)
- Cards with title and webview will load in the Carousel
- Scroll up and down in a webpage
- Observe that it's virtually impossible to scroll a webpage vertically without triggering the Carousel horizontal scroll
Thank you for your time!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproducible demo and run its Android steps to observe the WebView's vertical scrolling competing with the Carousel's horizontal gesture handling. Compare the Android and iOS behavior described in the issue. Done means vertical WebView scrolling no longer triggers horizontal Carousel scrolling on Android while carousel gestures still work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100