React-native-snap-carousel: Disabled swipe partially

Created on 26 Nov 2018  Â·  2Comments  Â·  Source: meliorence/react-native-snap-carousel

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?

carousel question

Most helpful comment

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.

react-native-snap-carousel issue 433

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.

react-native-snap-carousel issue 433

All 2 comments

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.

react-native-snap-carousel issue 433

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.

react-native-snap-carousel issue 433

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sujitpk-perennial picture sujitpk-perennial  Â·  3Comments

amyogiji picture amyogiji  Â·  5Comments

Dr1992 picture Dr1992  Â·  4Comments

Murena7 picture Murena7  Â·  3Comments

wkwyatt picture wkwyatt  Â·  4Comments