Cannot Scroll down/up when the Carousel is in a ScrollView (Must Click Outside the carousel)

[tylerkrett]

I have a simple image carousel in a scroll view component.

When I want to scroll down past the Carousel the screen will only allow me to animate the carousel.

All movements down/up on a ScrollView will not scroll the page if your finger is on the carousel.

[dohooo]

I'm not sure what you mean. 😶‍🌫️

[dohooo]

Can you give me a video?

[tylerkrett]

Dohoo I have resolved the issue. Thank you for such a speedy response

[dohooo]

Dohoo I have resolved the issue. Thank you for such a speedy response

How did you solve it?

[tylerkrett]

I decided to use the Carousel in a Modal popup. As it was not letting me scroll down the ScrollView component without touching outside the image carousel.

All gestures within the Carousel will animate the carousel I needed just left and right actions so the ScrollView can be scrolled down or up when your finger is on the carousel.

[tylerkrett]

Hope that makes sense.

[dohooo]

Hope that makes sense.

Are you in discord? https://discord.gg/cPzr7WMQ

[dohooo]

@tylerkrett try this

<Carousel
    {...}
    panGestureHandlerProps={{
        activeOffsetX: [-10, 10],
    }}
/>

[dohooo]

@tylerkrett try this

<Carousel
    {...}
    panGestureHandlerProps={{
        activeOffsetX: [-10, 10],
    }}
/>

https://docs.swmansion.com/react-native-gesture-handler/docs/gesture-handlers/api/pan-gh/#activeoffsetx

[tylerkrett]

That worked perfectly. Thank you so much.

[alfredarcifa]

@tylerkrett try this

<Carousel
    {...}
    panGestureHandlerProps={{
        activeOffsetX: [-10, 10],
    }}
/>

Hi @dohooo

I use panGestureHandlerProps={{activeOffsetX: [-10, 10],}} and in iOS I haven't any problem.
In Android, I should to use code below:

<ScrollView>
          <GestureHandlerRootView style={{flex: 1}}>
            <Carousel.......>
....

because the drag was locked.
I found an issue in Android with this code, when dragging, at random, the carousel was frozen in a horizontal setting.

[nurhamsah1998]

I use @alfredarcifa method and the results work well

[sabari-venkatesh]

panGestureHandlerProps

This was really helpful.. Thanks @dohooo

[AdirTrichter]

Hey there.
What does the [-10, 10] in the activeOffsetX field means? is it pixels, percent of screen? something else?

[BrodaNoel]

@dohooo this is not a valid fix in 4.0.0-alpha.0

[patrickmycore]

This is good. But the method "onScrollBegin" still gets triggered when scrolling vertically even after setting

panGestureHandlerProps={{
activeOffsetX: [-10, 10],
}}

[Oleksiiithouse]

panGestureHandlerProps={{
activeOffsetX: [-20, 20],
failOffsetY: [-20, 20],
}}

[doanhnong]

work like a champ, thanks

[keenode]

Thank you, this worked for me!

[cbdeveloper]

I was using it inside a Modal on Android. So wrapping the Modal children in GestureHandlerRootView was also necessary for me.

https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/#usage-with-modals-on-android

This is what is working for me:

panGestureHandlerProps={{
  activeOffsetX: [-5, 5],
  failOffsetY: [-5, 5]
}}

Note: using "react-native-reanimated-carousel": "3.5.1",

[Arjun059]

@dohooo thanks

[qwertychouskie]

@dohooo this is not a valid fix in 4.0.0-alpha.0

#465 (comment)

[qwertychouskie]

On iOS, when I start a horizontal scroll, it blocks starting a vertical scroll until the finger is removed and a new gesture started. However, on Android, if the finger moves up/down slightly during the horizontal scroll, the horizontal scroll is immediately released and it starts scrolling vertically. Is there a fix for this behavior?

(Using 4.0.0-alpha12 due to #509 / #625)

[qwertychouskie]

Also, scrolling up and down doesn't work at all on web. Any ideas there? Is it worth opening a new bug report?

[Oleksiiithouse]

Also, scrolling up and down doesn't work at all on web. Any ideas there? Is it worth opening a new bug report?

Just downgrade to 3.x version, it has less bugs.
Versions 4.x are still alpha, of course it is buggy

[qwertychouskie]

Also, scrolling up and down doesn't work at all on web. Any ideas there? Is it worth opening a new bug report?

Just downgrade to 3.x version, it has less bugs. Versions 4.x are still alpha, of course it is buggy

I can't, due to #509 / #625

[Oleksiiithouse]

@qwertychouskie
I have a long experience with this library. Any of library versions are not good enough, each has its pros and cons.
Below I paste versions of dependencies that by working together have the less problems ever possible:

"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.14.4",
"react-native-reanimated-carousel": "^3.5.1".

With these dependencies everything works on web and native.
The only minus is that v3.5.1 doesn't have all props that mentioned in the docs. For me it was not a huge problem, for everything I found a workaround.

[tarikfp]

If anyone wondering solution for 4.0.0-alpha.10 version, here it is:

 onConfigurePanGesture={(g) => {
    "worklet"
    // Disable vertical gestures
    g.activeOffsetY([-999999, 999999])
    // Enable horizontal gestures with a small threshold
    g.activeOffsetX([-20, 20])
    })
  }}