Creating A Tinder Style Swiping Component With React Native (Part 1 / 2)

In this tutorial I will explain how we can build a Basic React Native app that allows users to view other user's profiles and swipe left or right to save that profile and view another user's profile. This tutorial will be focused on providing a brief outline of how we can achieve the swiping functionality and part 2 will cover adding animations to our app to achieve a Tinder like look.

Lets start by using expo to create a new react native app.

expo init SwipingApp

Installing react-native-gesture-handler

expo install react-native-gesture-handler

And importing everything we'll need inside App.js.

import React, {useState} from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';

In our example we will use dummy data for the profiles.

  const profiles = [
    {
      name:"John Doe",
      age:27,
      likes:["Hockey","Hiking"],
      pic:"https://www.exampleimagelink.png"
    },
    {
      name:"Alexis Texas",
      age:22,
      likes:["Parties","Bananas"],
      pic:"https://www.exampleimagelink2.png"
    },
    {
      name:"Jane Smith",
      age:35,
      likes:["Netflix","Wine"],
      pic:"https://www.exampleimagelink3.png"
    }
  ]

Now let's give our app state with the useState hook inside App.js

const [profile,setProfile] = useState(profiles[0])

And make sure we are rendering the current profile.

  return (
    <View style={styles.container}>
      <View>
        <Image source={profile.pic}></Image>
        <Text>{profile.name}</Text>
        <Text>Age: {profile.age}</Text>
        <Text>Likes: {profile.likes.join(', ')}</Text>
      </View>
    </View>
  );
}

To add swiping functionality we need to wrap our View containing the profile info with the PanGestureHandler Component. We'll also give PanGestureHandler props for calling a handleSwipe method that we'll build later.

 return (
    <View style={styles.container}>
      <PanGestureHandler onHandlerStateChange={handleSwipe} >
        <View style={{backgroundColor:"yellow", width:"75%", height:"75%"}}>
          <Image source={profile.pic}></Image>
          <Text>{profile.name}</Text>
          <Text>Age: {profile.age}</Text>
          <Text>Likes: {profile.likes.join(', ')}</Text>
        </View>
      </PanGestureHandler>
      <StatusBar style="auto" />
    </View>
  );
}

We pass handleSwipe to the 'onHandlerStateChange' prop that will be called every time the PanGestureHandler state changes. This is useful because we will be able to make it so that we only execute the code to swipe once the user has taken his finger off of the screen.

Our handleSwipe method needs to a do a couple things. It should check if the user is swiping left or right and react accordingly. It should also trigger a new profile to be rendered to the screen.

const handleSwipe=({nativeEvent}) =>{
    //swiping right
    if(nativeEvent.translationX < -225){
      console.log("Swiped Right")
      //Here we would add the code to save the user profile into our match list. For simplicity, I won't be doing this in this example.
      index++
      setProfile(profiles[index%3])
    }
    //swiping left
    else if(nativeEvent.translationX > 225){
      console.log("Swiped Left")
      index++
      setProfile(profiles[index%3])
    }
  }

nativeEvent is the default event that is passed to the gesture handler function properties. We use the translationX property from nativeEvent to check if the user the direction the user is swiping.

Our function works well but we haven't yet made it so that swipes only happen when the user takes his finger off the screen. To do that we need to check the nativeEvent's state property.

const handleSwipe=({nativeEvent}) =>{
    const {state} = nativeEvent
    //state will equal 5 when the gesture is completed. I.E when a user takes his finger off the screen.
    if(state === 5){
      //handle swipe right
      if(nativeEvent.translationX < -225){
        console.log("Swiped Right")
        //save this user profile to our match list. For simplicity sake I won't be really doing this in this example.
        index++ //index is declared outside of App()
        setProfile(profiles[index%3])
      }
      //handle swipe left
      else if(nativeEvent.translationX > 225){
        console.log("Swiped Left")
        index++
        setProfile(profiles[index%3])
      }
    }
  }

Now our function is working as intended.

All in all, this is only one way of creating an App of this sort. When I originally wrote this post I had used the onGestureEvent prop from PanGestureHandler to handle swiping but afterwards I learned about onHandlerStateChange and so I rewrote this post since onHandlerStateChange works much better for what we want. I hope you learned something new. Thanks for reading. :)