CODEWITHSUNDEEP
javascriptreact-native
J. Berman
J. Berman

Reputation: 534

React Native: Swipeable and Touchable

I want to register three gestures in one container of the view:

  1. When user touches the Card -> Load Detail about the Card
  2. When user swipes down the Card -> "Like" it and display next card
  3. When user swipes up the Card -> "Skip" it and display next card

My current implementation uses PanHandler to register the gesture and uses TouchableOpacity to reduce the Opacity when card is being swiped.

But I'm not sure how to implement those three above gestures for the same exact card.

Upvotes: 2

Views: 4065

Answers (1)

Tommy Bravo
Tommy Bravo

Reputation: 532

You can just use a <TouchableHighlight /> (or any other 'Touchable' component) nested inside of a <Swipeable /> component (typically implemented using the react-native-swipeable library).

So something like the following:

{/* Props are not set in this example for simplicity */}
<Swipeable>
    {/* You should of course nest some components in the next element if you want to */}
    <TouchableHighlight />
</Swipeable>

I fixed it like this myself.

By the way: Nesting the elements the other way around (like so <TouchableHighlight><Swipeable /></TouchableHighlight>) gave me a lot of issues, so I don't recommend doing that.

Upvotes: 1

Related Questions