Carousel not scrolling in Android when put inside a ScrollView but works in IOS.

[sagarrs]

Is this a bug report, a feature request, or a question?

bug report

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

• [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

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Tested on Android Version 9 pie

Is the bug reproductible in a production environment (not a debug one)?

yes

Environment

Environment: React: 16.9.0 React native: 0.61.4 react-native-snap-carousel: ^3.8.4

Target Platform: Android (9)

Expected Behavior

carousel should scroll when inside ScrollView

Actual Behavior

Carousel not scrolling in Android when put inside a ScrollView but works in IOS.

Reproducible Demo

here is expo snack to reproduce the issue, (Please run it in your android phone) https://snack.expo.io/@sagar293/flatlist-inside-scrollview

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. Create a ScrollView in that render the card as shown in the expo snack
2. inside the card create the "Carousel" from "react-native-snap-carousel" to render the images
3. run it in your Android device

[mohitbhansali]

I am facing the exact same issue. Let me know if you have found the solution yet.

[MahefaAbel]

I am facing to the same issue too.

[smm76]

As a quick guess, this could be related to RN's Bug on Android concerning nested horizontal ScrollViews. As a workaround, try to use the ScrollView Component of react-native-gesture-handler. See https://github.com/facebook/react-native/issues/21436

[meiqi1992]

same issue +1.

[matrak-jason]

Confirmed workaround from @smm76 . I simply swapped the import and things started working on Android. Thanks so much!

[sergey-king]

+1 Confirmed workaround from @smm76

[mathew3]

As a quick guess, this could be related to RN's Bug on Android concerning nested horizontal ScrollViews. As a workaround, try to use the ScrollView Component of react-native-gesture-handler. See https://github.com/facebook/react-native/issues/21436

I have the same issue but in a bit more complex context:

A horizontal carousel nested inside a vertical ScrollView that is essentially a horizontal FlatList item. Carousel doesn't work on Android device, works only on iOS.

Using react-native-gesture-handler's ScrollView didn't help.

I also tried the following approach as it's related, but didn't work neither: How can I have nested horizontal ScrollViews in React Native?

@smm76 @matrak-jason @sergey-king do you guys have any new information on this?

PS: Once I make the FlatList vertical, the horizontal carousel works. Therefore I believe this issue is caused by the two overlapping horizontal scrolls and it's Android specific.

[darkhorse-coder]

As a quick guess, this could be related to RN's Bug on Android concerning nested horizontal ScrollViews. As a workaround, try to use the ScrollView Component of react-native-gesture-handler. See https://github.com/facebook/react-native/issues/21436

Saved my life, I have snap carousel -> scrollview (vertical) -> scrollview(horizontal) Problem was not working the horizontal scroll in android, As you mentioned, I used the scrollview of react-native-gesture-handler

Working for me as well. thanks

[whenmoon]

As a quick guess, this could be related to RN's Bug on Android concerning nested horizontal ScrollViews. As a workaround, try to use the ScrollView Component of react-native-gesture-handler. See https://github.com/facebook/react-native/issues/21436

Thanks this worked for me

[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

[alexandermirzoyan]

This helped me https://github.com/gorhom/react-native-bottom-sheet/issues/311#issuecomment-794418413

[martinferrarese]

Thank you alexandermirzoyan! Using

<NativeViewGestureHandler disallowInterruption={true}>
   {...}
</NativeViewGestureHandler>

worked good for me in Android. Here is the source again: https://github.com/gorhom/react-native-bottom-sheet/issues/311#issuecomment-794418413