Detect Swipe Left in React Native

​Detecting a left swipe gesture in React Native can be achieved through various methods, each tailored to different use cases and preferences.

1. Using a Custom Hook with Touch Events:

A straightforward method involves creating a custom hook that tracks touch positions to determine swipe direction. Here’s how you can implement it:

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
export function useSwipe(onSwipeLeft ?:()=>void, onSwipeRight?:()=>void, rangeOffset = 4) {
   let firstTouch = 0;
   // Set user touch start position
   function onTouchStart(e) {
       firstTouch = e.nativeEvent.pageX;
   }
   // When touch ends, check for swipe directions
   function onTouchEnd(e) {
       const positionX = e.nativeEvent.pageX;
       const range = windowWidth / rangeOffset;


       if (positionX - firstTouch > range) {
           onSwipeRight && onSwipeRight();
       } else if (firstTouch - positionX > range) {
           onSwipeLeft && onSwipeLeft();
       }
   }
   return { onTouchStart, onTouchEnd };
}

In your component, you can utilize this hook as follows:

export default function App() {
 const { onTouchStart, onTouchEnd } = useSwipe(
   () => console.log('Swiped left'),
   () => console.log('Swiped right')
 );
 return (
   
   
       Open up App.tsx to start working on your app!
   
   
 );
}

This approach offers a clean implementation without relying on external modules.
a custom hook to detect left and right swipe gestures within a ScrollView that has horizontal={true}. Since a horizontal ScrollView arranges its children in a row direction (flexDirection: ‘row’) and onSwipeLeft and onSwipeRight can detect swipe left/right you can add your logic as you want

2. Utilizing the PanResponder API:

React Native’s PanResponder API can be employed to recognize swipe gestures. By tracking the gesture’s movement, you can determine the swipe direction. For instance, by monitoring the dx (change in x-axis position), you can detect left or right swipes.

import React, { useRef } from 'react';
import { View, Text, PanResponder, StyleSheet } from 'react-native';

export default function SwipeDetector() {
   const panResponder = useRef(
       PanResponder.create({
           onStartShouldSetPanResponder: () => true,
           onMoveShouldSetPanResponder: () => true,


           onPanResponderRelease: (evt, gestureState) => {
               const { dx } = gestureState;
               __DEV__ && console.log('dx', dx);
               if (dx > 50) {
                   console.log('Swiped Right');
               } else if (dx < -50) {
                   console.log('Swiped Left');
               }
           },
       })
   ).current;
   return (
       
           Swipe Left or Right
       
   );
}
const styles = StyleSheet.create({
   container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#f0f0f0',
   },
   text: {
       fontSize: 20,
       fontWeight: 'bold',
   },
});

How It Works:

1. PanResponder.create() initializes a gesture responder.
2. onPanResponderRelease detects swipe movements by checking dx (horizontal displacement).
3. A swipe is considered:
   -> Right swipe if dx > 50
   -> Left swipe if dx < -50
4. panHandlers is applied to the root View to capture gestures.

This is a lightweight, dependency-free approach to detecting swipe gestures in React Native.

3. Using the react-native-gesture-handler Library:

For more advanced gesture recognition, the react-native-gesture-handler library provides components like Swipeable and PanGestureHandler. These components offer enhanced performance and flexibility in handling gestures. For example, Swipeable can be used to create swipeable rows with customizable actions.
Here you need to install react-native-gesture-handler lib from npm

Here is the code:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView, HandlerStateChangeEvent, PanGestureHandler, PanGestureHandlerEventPayload, State } from 'react-native-gesture-handler';

export default function SwipeGesture() {
   const onGestureEvent = (event: HandlerStateChangeEvent) => {
       const { translationX, state } = event.nativeEvent;
       if (state === State.END) {
           if (translationX < -50) {
               console.log('Swiped Left');
           } else if (translationX > 50) {
               console.log('Swiped Right');
           }
       }
   };

   return (
       
           
               
                   Swipe Left or Right
               
           
       
   );
}
const styles = StyleSheet.create({
   container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#f0f0f0',
   },
   text: {
       fontSize: 20,
       fontWeight: 'bold',
   },
});

How It Works:

1. PanGestureHandler detects swipe gestures.
2. translationX determines swipe direction:
   -> translationX < -50 → Swiped Left -> translationX > 50 → Swiped Right
3. State.END ensures detection happens when the gesture ends.
4. This solution is efficient and smooth, making it ideal for gesture-heavy apps.

4. Implementing the onResponderMove Event:

Another method involves using the onResponderMove event to track touch movements and determine swipe direction. By setting up a responder and monitoring the touch’s movement along the x-axis, you can identify left and right swipes.​

Here is the code

import React, { useRef } from 'react';
import { View, Text, StyleSheet, GestureResponderEvent } from 'react-native';
export default function SwipeResponder() {
   const startX = useRef(0);
   const onStartShouldSetResponder = () => true;
   const onResponderGrant = (event:GestureResponderEvent) => {
       startX.current = event.nativeEvent.pageX;
   };


   const onResponderRelease = (event:GestureResponderEvent) => {
       const endX = event.nativeEvent.pageX;
       const diffX = endX - startX.current;


       if (diffX > 50) {
           console.log('Swiped Right');
       } else if (diffX < -50) {
           console.log('Swiped Left');
       }
   };
   return (
       
           Swipe Left or Right 2
       
   );
}
const styles = StyleSheet.create({
   container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#f0f0f0',
   },
   text: {
       fontSize: 20,
       fontWeight: 'bold',
   },
});

How It Works:

• onResponderGrant stores the initial touch position (startX).
• onResponderRelease calculates the swipe distance when the user lifts their finger.
• If the swipe distance is:
  -> Greater than +50 → “Swiped Right”
  -> Less than -50 → “Swiped Left”

This approach is simple, lightweight, and doesn’t require extra dependencies.

Also Read:

React Native State Management

5. Using the react-native-swipe-gestures Library:

The react-native-swipe-gestures library simplifies the process of detecting swipe gestures by providing a GestureRecognizer component. This component allows you to specify handlers for different swipe directions, including left swipes
Here you need to install react-native-swipe-gestures from npm

Here is code

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import GestureRecognizer from 'react-native-swipe-gestures';

export default function SwipeGestureComponent() {
    const onSwipeLeft = () => {
        console.log('Swiped Left');
    };

    const onSwipeRight = () => {
        console.log('Swiped Right');
    };

    const swipeConfig = {
        velocityThreshold: 0.3,
        directionalOffsetThreshold: 80,
    };

    return (
        
            Swipe Left or Right
        
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f0f0f0',
    },
    text: {
        fontSize: 20,
        fontWeight: 'bold',
    },
});

How It Works:

1. GestureRecognizer detects swipe gestures.
2. onSwipeLeft triggers when a left swipe is detected.
3. onSwipeRight triggers when a right swipe is detected.
4. swipeConfig sets sensitivity:
   -> velocityThreshold → Minimum swipe speed required.
   -> directionalOffsetThreshold → Controls swipe accuracy.

This method is quick, easy, and requires minimal setup.

Conclusion:

Each of these methods offers a viable solution for detecting left swipe gestures in React Native. The choice of approach depends on your project’s specific requirements and whether you prefer to use external libraries or stick with built-in APIs.

The first four solutions are supported across all React Native frameworks, including Expo Go. However, the last solution (using react-native-swipe-gestures) works only in bare React Native projects and is not compatible with Expo Go.