Best way to wrap carousel in a touchable?

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

Question

I want my entire carousel to be touchable, while at the same letting users go through photos. I basically have a view with a carousel and a card in it, and I want that entire thing to be touchable.

so the code looks like

<TouchableOpacity>
  <View>
    <Carousel />
    <Card />
  </View>
</TouchableOpacity>

As soon as a touchable* is added, panning stops working on the carousel. If I swipe really fast the items are gone through, but otherwise the carousel is unresponsive.

Things I’ve tried:

1. Setting onMoveShouldSetResponder={ () => false } on my TouchableOpacity
2. Setting onMoveShouldSetResponder={() => true} on the carousel
3. Setting onStartShouldSetResponder={() => true} on the carousel

Aside from completely ditching TouchableOpacity and setting up my own gesture detection using PanResponder, is there anything else I can do?

Thanks in advance for any help!

[plus-]

This is what I’ve found is working for me:

<Carousel
...
renderItem={({ item, index }: { item: any; index: number }) => {
          return (
            <TouchableWithoutFeedback onPress={onPress} disabled={!onPress}>
              <View onStartShouldSetResponder={() => true}>{renderItem(item, index)}</View>
            </TouchableWithoutFeedback>
          )
        }}

Basically you propagate the parent touchable onPress to the child and give it priority so it can be swiped as well

[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