Carousel in ScrollView layout

[serveyk0-work]

I have a layout that contains a carousel When I try to scroll the slide, the scrollView fires vertically, which interrupts the carousel animation How can this be fixed? reproduce on android

https://user-images.githubusercontent.com/78041681/226283996-541c12ee-a29e-4759-bb20-98bb359b0296.mov

[arlovip]

The same issue.

And it doesn't make the carousel slide smoothly as expected. If the ScrollView is disabled(set scrollEnabled={false}), it works very well. I also set panGestureHandlerProps following the instruction of the official docs. It looks like:

<ScrollView contentContainerStyle={{flexGrow: 1}}>
  <GestureHandlerRootView>
    <Carousel
        panGestureHandlerProps={{
          activeOffsetX: [-10, 10],
        }}
        ... // other props here
    />
  </GestureHandlerRootView>
</ScrollView>

Unfortunately, even if panGestureHandlerProps is set, it still cannot resolve my problem.

If there are any good solutions, please let me know. Thanks a lot.

[arlovip]

Eventually, after lots of trying, I worked it out with the following code snippets.

_renderCarousel = () => {
    const { width } = Dimensions.get("window");
    return <GestureHandlerRootView style={{ flex: 1 }}>
        <ScrollView>
            <View style={{ height: 200, backgroundColor: "red" }} />
            <Carousel
                width={width}
                height={200}
                data={[...new Array(6).values()]}
                renderItem={({ index }) => <Text style={{ alignSelf: "center" }}>{index}</Text>}
                panGestureHandlerProps={{
                    activeOffsetX: [-10, 10],
                }}
            />
            <View style={{ height: 400, backgroundColor: "blue" }} />
        </ScrollView>
    </GestureHandlerRootView>;
};

That is to say, we have to set the GestureHandlerRootView as a whole wrapper. We SHOULDN'T set GestureHandlerRootView in ScrollView like

_renderCarousel = () => {
    const { width } = Dimensions.get("window");
    return <ScrollView>
        <GestureHandlerRootView style={{ flex: 1 }}>
            <View style={{ height: 200, backgroundColor: "red" }} />
            <Carousel
                width={width}
                height={200}
                data={[...new Array(6).values()]}
                renderItem={({ index }) => <Text style={{ alignSelf: "center" }}>{index}</Text>}
                panGestureHandlerProps={{
                    activeOffsetX: [-10, 10],
                }}
            />
            <View style={{ height: 400, backgroundColor: "blue" }} />
        </GestureHandlerRootView>
    </ScrollView>;
};

Besides, please set panGestureHandlerProps(as can seen above) to fix the vertical scroll conflict on ScrollView when scrolling up on the Carousel component.

Hope this can help you everyone.

[tarcisioandrade]

thanks! @lchenfox, helped me a lot

[hanafnafs]

31 July 2024 and the issue still exist:

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

It works but sometimes it gets laggy but it does the job, thanks @lchenfox