React Native Swipe Cards Animation (Tinder-like) 👀

Wednesday, December 14, 2022
Try this demo on your device·Need the app?
reanimated
gesture-handler
skia
A Tinder-like card swipe interface with like/dislike actions.

What's This About?

This component creates an interactive card swipe interface similar to dating apps. It features smooth swipe animations, like/dislike actions, and a reset function. The implementation includes gesture handling for card swipes, fade animations for card transitions, and control buttons for manual actions, making it perfect for any interface requiring card-based decision making.

Technical Implementation

The component uses:
  • Swipe gestures
  • Card stacking
  • Action buttons
  • Fade animations
  • State tracking

Usage

// Basic usage
<SwipeCards />


// Swipeable card
<SwipeableCard
  index={index}
  activeIndex={activeIndex}
  image={image}
  ref={cardRef}
  onSwipeRight={() => {
    liked.current += 1;
  }}
  onSwipeLeft={() => {
    disliked.current += 1;
  }}
/>


// Control buttons
<View style={styles.buttonsContainer}>
  <PressableScale
    style={styles.button}
    onPress={swipeLeft}
  >
    <AntDesign name="close" size={32} color="white" />
  </PressableScale>


  <PressableScale
    style={styles.button}
    onPress={reset}
  >
    <AntDesign name="reload1" size={24} color="white" />
  </PressableScale>


  <PressableScale
    style={styles.button}
    onPress={swipeRight}
  >
    <AntDesign name="heart" size={32} color="white" />
  </PressableScale>
</View>


// Swipe controls hook
const {
  activeIndex,
  refs,
  swipeRight,
  swipeLeft,
  reset
} = useSwipeControls();

Unlock the beauty of React Native animations

Learn Reanimated, Gesture Handler & Skia with Reanimate.dev

Swipe Cards - Feedback

Share Your Thoughts

I value a lot your feedback! Help me improve by sharing your thoughts, suggestions, or reporting any issues you encounter. If you need assistance, send me an email at hello@reactiive.io