React Native Tinder like Swipeable Card Views Dynamically Android iOS Tutorial

Guys, Through this tutorial, I am going to demonstrate and explain you how we create Tinder like Swipeable Card Views in react native through react native PanResponder  API with complete source code from scratch.

In brief, what I am doing in Tinder like Swipeable Card Views tutorial?

  • I am using a React Native PanResponder  API to apply gesture effect on View component.
  • Allows user to swipe cards in both left and right directions and after a fixed amount of swipe in either left or right direction, remove the card, show the next card and so on.
  • After swiping the last card, “No More Cards” message will be shown.

Let’s begin…

Step – 1: Import required components from react , react-native  packages.

Step – 2: Create first custom component named as TinderCard ( in my case ), which is responsible to create design, hold gesture effect code for each card.

Step – 3: Implement constructor  method of our TinderCard custom component.

Step – 4: Implement componentWillMount  method of our TinderCard custom component.

Step – 5: Implement onPanResponderMove: (evt, gestureState)  method.

Explanation:

  • I am updating the value of xValue  state variable using  this.state.xValue.setValue(gestureState.dx statement continuously when user is dragging the card and later I am assiging this xValue  state variable’s value to translate the card in X direction.
  • Each card have Right and Left label, which are by default hidden and I am showing these labels when the drag value of card exceeds the dragging limit.

Step – 6: Implement onPanResponderRelease: (evt, gestureState)  method.

Explanation:

  • onPanResponderRelease method will be executed when user releases the card and on release I am deciding what should be happened with the card. In simple words, If the value of gestureState.dx  exceeds the dragging limit in either Left or Right direction then I am removing the card from View with nice smooth animation or If the value of gestureState.dx  doesn’t exceed the dragging limit in either Left or Right direction then place the card back to its original position using nice spring animation.

Step – 7: Implement render  method of our TinderCard custom component.

Explanation:

  • I am applying the rotate animation on card by interpolating the value of xValue  state variable. If user swipes the card in positive X direction then I am applying the 20deg  angle and If user swipes the card in negative X direction then I am applying the -20deg  angle.
  • According to the value of xValue  state variable I am showing and hiding the Left and Right labels on cards.

Step – 8: Create second custom component named as App ( in my case ), which is responsible to create array for swipeable card views and removing the card objects from swipeable card views array when card is successfully removed from the screen.

Step – 9: Implement the constructor  method for App  component.

Explanation:

  • showNoMoreCardsView  state variable is used to show the View with No More Cards message when user swipes all the cards from the screen.

Step – 10: Implement the componentDidMount  method for App  component.

Step – 11: Implement the removeCard  custom method for App  component. This method will be executed when the card’s removing animation successfully completed to update the cardsArray  state array variable.

Explanation:

  • Using splice  method, I am removing the card object which is currently swiping by the user in order to remove from the screen and updating the cardsArray  state array variable.

Step – 12: Implement render  method of our App  component.

Step – 13: Implement styles for all required components.

Complete Source Code:

Step – 14: Execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshots:

  • Android Screenshots:

Enjoy Guys… 😉

6 Comments

  1. Hello! This is my first comment here so I just wanted to give a
    quick shout out and tell you I genuinely enjoy reading your posts.
    Can you recommend any other blogs/websites/forums that go over the same topics?
    Many thanks!

    • Thanks best fish finder and according to my personal experience I just follow the official facebook github react native blog for basics and try to make some advanced blogs on my own basis.

  2. How would you implement this with a backend system that returns a JSON?
    Thanks

    • First of all sorry for late replying Toni and ya now if you want to implement this with backend functionality you have to use fetch API and create cards through fetched JSON.

  3. Great tutorial! Thanks 🙂
    How would you recommend catching a tap event on card with panresponder? Maybe check if X value is less then 3? / -3 ?

    • Welcome Ben and First of all sorry for late replying. and now ya if you want to catch a tap event on card then you have to implement onPanResponderRelease method. This method is called when you just click on card.

Leave a Reply

Your email address will not be published. Required fields are marked *