Item vertical scroll interferes with carousel horizontal scroll (Android only)

[dudeinthemirror]

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?

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] 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

1. Initialize, build and run iOS (yarn, yarn start, pod install, yarn ios)
2. Cards with title and webview will load in the Carousel
3. Scroll up and down in a webpage
4. Observe that everything works as expected (no interference between the vertical and horizontal scroll)

Android

1. Initialize, build and run Android (yarn, yarn start, pod install, yarn android)
2. Cards with title and webview will load in the Carousel
3. Scroll up and down in a webpage
4. Observe that it's virtually impossible to scroll a webpage vertically without triggering the Carousel horizontal scroll

Thank you for your time!

[goleary]

hey @dudeinthemirror I'm also struggling with this issue. Did you figure out any workarounds?

[dudeinthemirror]

hey @goleary, not yet. I posted on SO as well, nothing so far. Let me know if you figure out something, thanks 🍻

[goleary]

Thanks for following up @dudeinthemirror. Someone on my team rigged something to spit scroll events from the webview into the react native application that will conditionally disable swiping on the carousel...sadly it doesn't work very well and slows the app down so I was hoping you'd found a better solution.

I'll let you know if we get it to work better or come up with a better solution.

[dudeinthemirror]

appreciate it @goleary ! BTW, feel free to use my demo repo that I put together for this issue: https://github.com/dudeinthemirror/carousel-example

[goleary]

hey @dudeinthemirror I ended up switching to another package to get around this limitation:

https://github.com/callstack/react-native-viewpager

Here's a snack I made where you can play with it: https://snack.expo.io/@goleary/2d70d1

Looks like it doesn't work on the web, but it works in Android & iOS (which is all we need).

Hope it's helpful!

[dudeinthemirror]

hey @goleary thanks for following up on this! This looks like a viable solution and the fact that it's published under the @react-native-community namespace is reassuring ;) I'll make the switch in our project as well.

[goleary]

@dudeinthemirror

The viewpager works a million times better on Android. But it has one annoying issue on iOS. The webview doesn't load when off screen (unlike with this package), so when you swipe from one to the next it's blank for a bit.

I've got a PR out that I hope will fix this, but it could be a bit before it makes it into that package.

Just thought I'd let you know in case it affects your decision to move over or not.

[vikrantnegi]

Any solution for this?

[goleary]

neither of the issues have been fixed in either repo...so I use the snap carousel on ios & the view pager on android 😬

[vikrantnegi]

But how to create asnap carousel type carousel with first and last item visible using pager view.

[goleary]

ahh I have no idea. I use full screen webviews with both.

[dudeinthemirror]

@vikrantnegi from what I've tried so far, if you use viewpager you can't have it show previews (i.e. part of the previous page (left) and part of the next page (right)). The Ux is sub-par IMO.

[vikrantnegi]

@dudeinthemirror You are right, there is no support for showing previews in react native pager.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[xjdqq]

我的解决方法是让webView占满高度，然后放在scrollView里面，让scrollView去滚动而不是让webView滚动，这样就不会出现这种情况了

[arasovic]

any workarounds ?