search

dohooo / react-native-reanimated-carousel

🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
https://react-native-reanimated-carousel.vercel.app
MIT License
2.73k stars 317 forks source link

Swipe event happening for both carousels #605

Open rajesh-rt opened 4 months ago

rajesh-rt commented 4 months ago

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[bot] commented 4 months ago

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](https://github.com/dohooo/react-native-reanimated-carousel/issues/383) - [src/components/ScrollViewGesture.tsx](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/components/ScrollViewGesture.tsx) - [src/components/Carousel.tsx](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/components/Carousel.tsx) - [src/hooks/useCarouselController.tsx](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/hooks/useCarouselController.tsx) - [src/hooks/useCommonVariables.ts](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/hooks/useCommonVariables.ts) - [src/components/ItemRenderer.tsx](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/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.