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

[talhabinkhalil]

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.

Thank You very much, This Helped Me. i was working on this issue for last two days ! Thank God it resolved. Keep Helping, keep growing man !