Disabled swipe partially

[rollsroyc3]

Is this a bug report, a feature request, or a question?

Question

I am using the carousels to show cards, which essentially have a header with a list under them. These list rows use react native swipeout to show edit/delete menu options. But this causes an issue with the carousel swipe, is it possible to disable the carousel swipe on a container (the list), but allow the swipe to work on the top half, like in the image below?

[bd-arc]

Hi @rollsroyc3,

I don't see any easy solution to your problem. Using multiple touch-aware libraries together usually lead to issues because one always take precedence over the others.

You can try creating an absolutely-positioned PanResponder over the rows that would receive the touch events, bypass the carousel, and "forward" them to the rows. To be honest, I don't have much clue about this solution.

I would personally go with the following:

• Two carousels: one for the blue area, one for the grey one.
• Set scrollEnabled to false on the grey one. Make sure that the rows properly receive the touch events though.
• Keep it in sync with the blue one — you can learn more about it here or you can take look at the ParallaxImage component's source code in this repo and see how the scroll position is passed down.
• Use native driver to ensure smooth animations. More info here.

[rollsroyc3]

OK, thanks for the detailed response. Im going to look into the second solution.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2