React Native Swipeable CardView like Tinder in iOS Android Example

Tinder is one of the most famous locally people search application used to find partners near by you. Tinder has its unique set of CardViews structure used with Swipe Left and Swipe Right used to Send and Reject partner profiles. So in this tutorial we would going to Create Swipeable CardView like Tinder in iOS Android react native application fully explained example tutorial. We are using PanResponder component in our tutorial to detect Swipe left and Right on screen and also applying the Gesture Effect, So let’s get started 🙂 .

Live screenshot of App :

Contents in this project Swipeable CardView like Tinder in iOS Android React Native App Example Tutorial:

1. Import Platform, StyleSheet, View, Text, Dimensions, Animated and PanResponder component in your project.

2. Create a constant named as SCREEN_WIDTH and store the current device screen width in dimensions.

3. Create a New class named as SwipeableCardView in your App.js file, This would be our Custom Animated Swipeable CardView class.

4. Create constructor() inside SwipeableCardView class.

this.panResponder : Used to handle Pan Responder.

Xposition : Hold the animated value of X-Axis.

RightText : Used to Show and Hide the Right Swipe Text.

LeftText : Used to show and hide the Left Swipe Text.

this.CardView_Opacity : Setting up the animated opacity value.

5. Create componentWillMount() inbuilt method in SwipeableCardView class. Inside this function we would implement the PanResponder.create() method to control the gesture effect.

PanResponder.create() : Used to create Pan Responder method.

onPanResponderMove: (evt, gestureState) : Changing the Xposition State value while moving(dragging) the Card View.

onPanResponderRelease: (evt, gestureState) : Updating the View and firing the Animation to Move CardView.

Note: We have 2 State named as RightText and LeftText which is used to show and hide the Left Swipe and Right Swipe Text on CardView on Card Swipe event.

6. Create rotateCard interpolate with input and output range of animation in render’s block of SwipeableCardView class.

7. Create a Animated View inside render’s return block of SwipeableCardView class. This View is used to dynamically Show all the cardViews with dragging and moving animation.

It will show us the CardView title we will pass from our Main class and if user swipes left the it will show the Left Swipe text and if the user swipes right then it will show us the Right Swipe text using States.

8. Complete Source Code of SwipeableCardView class.

9. Create main class in our project named as MyApp, this class would be our main Default Export class.

10. Create constructor() in your Main class and inside this constructor we would make a State array named as Sample_CardView_Items_Array with 5 different items, these items would show inside the CardViews. The No_More_CardView State is used to show the No More CardViews Found text after swiping all the cards.

11. Create componentDidMount() method in your main class.

12. Create a function named as removeCardView() in your main class, Using this function we would remove the swiped Card from array and show the next item on screen.

13. Create render’s return block in your main class. Now we would create SwipeableCardView component and using array looping we would start printing CardView, we would also show a text No More CardViews Found if all the card successfully removed from screen.

14. Creating Style.

15. Complete source code for App.js File :

Screenshots in Android device:

Screenshot in iOS device: