React Native Swipe Up and Swipe Down Gesture Handle

I was looking into how I can figure out how to detect swipe up and swipe down gesture handler in my React Native app.

Everywhere I went the only thing I could see is the

react-native-gesture-handler

package. But it is extra originally complicated, and I needed a quick solution for my app.

But I couldn’t find any solution.

So I created one :D

react-native-swipe-gesture-handler

React Native Swipe Up and Swipe Down Gesture Handle

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js
• npm (Node Package Manager)
• Expo CLI

Step 1: Setting Up a New Expo Project

First, let’s create a new Expo project. Open your terminal and run the following commands:

expo init SwipeGesturesApp
cd SwipeGesturesApp

Follow the prompts to select a blank template.

Step 2: Installing react-native-swipe-gesture-handler

Now, let’s install the react-native-swipe-gesture-handler package into our project. Run the following command in your terminal:

npm install react-native-swipe-gesture-handler

or 

yarn add react-native-swipe-gesture-handler

Step 3: Implementing Swipe Gestures

Open App.js in your preferred code editor. We'll implement the swipe gestures in this file.

import { SwipeGesture } from "react-native-swipe-gesture-handler";

const onSwipePerformed = (action) => {
      
      switch(action){
        case 'left':{
          console.log('left Swipe performed'); 
          break;
        }
         case 'right':{ 
          console.log('right Swipe performed');
          break;
        }
         case 'up':{ 
          console.log('up Swipe performed'); 
          break;
        }
         case 'down':{ 
          console.log('down Swipe performed'); 
          break;
        }
         default : {
         console.log('Undeteceted action');
         }
      }
}

Step 4: Define the wrapper

Now you can just wrap the View you want to detect the swipe for inside the SwipeGesture component and the prop onSwipePerformed:

<SwipeGesture  
    onSwipePerformed={onSwipePerformed} 
    >
          <View>
          Your View Component
          </View>

    </SwipeGesture>

Step 5: Testing the App

Now, let’s test our app. In the terminal, navigate to your project directory and run:

This will start the Expo development server. You can then open the Expo app on your device and scan the QR code to view your app. I used it in my sh0rts app.