Swipe event happening for both carousels

[rajesh-rt]

I'm using 2 carousels, one below the other that need to be scrolled horizontally. But when I swipe card of top carousel the below one is also scrolling.

[dosubot]

To address the issue of both carousels scrolling simultaneously when you swipe on one, ensure each carousel is managed as an independent component. This involves:

1. Separate State Management: Use distinct instances of the Carousel component for each carousel to maintain separate states. This prevents actions on one carousel from affecting the other.

2. Isolated Gesture Handlers: Implement gesture handlers like scrollViewGestureOnScrollStart and scrollViewGestureOnScrollEnd for each carousel. This ensures gestures on one carousel do not trigger actions on another.

3. Unique ref for Each Carousel: Assign a unique ref to each carousel to control them independently, allowing for separate navigation actions (next, prev, scrollTo) without interference.

4. Dedicated Props: Provide each carousel with its own set of props, including data arrays and configurations (loop, autoplay), to manage their behavior individually.

5. GestureHandlerRootView: Ensure the Carousel component is correctly wrapped in a GestureHandlerRootView to handle gestures properly in React Native. Avoid nesting these views in a way that could affect gesture recognition.

By following these steps, you can achieve independent scrolling for each carousel, ensuring that swiping on one does not affect the other.

Details

Sources

• Carousel in ScrollView layout
• src/components/ScrollViewGesture.tsx
• src/components/Carousel.tsx
• src/hooks/useCarouselController.tsx
• src/hooks/useCommonVariables.ts
• src/components/ItemRenderer.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.