Sometimes, we want to detect swipe left in React Native.

In this article, we’ll look at how to detect swipe left in React Native.

How to detect swipe left in React Native?

To detect swipe left in React Native, we can use the react-native-swipe-gestures package.

To install it, we run npm i react-native-swipe-gestures.

Then we write:

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

export default function App() {
  const onSwipe = (gestureName, gestureState) => {
    const { SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT } = swipeDirections;
    console.log(gestureName);
  };

  return (
    <GestureRecognizer onSwipe={onSwipe}>
      <Text style={{ padding: 50 }}>hello</Text>
    </GestureRecognizer>
  );
}

to add the GestureRecognizer component which wraps around any component we want to detect swipes for.

Then we set the onSwipe prop to the onSwipe function.

And we can get the swipe direction from the gestureName.

gestureName is one of 'SWIPE_UP', 'SWIPE_DOWN', 'SWIPE_LEFT', 'SWIPE_RIGHT'.

gestureName is 'SWIPE_LEFT' when we swipe left.

Conclusion

To detect swipe left in React Native, we can use the react-native-swipe-gestures package.

To install it, we run npm i react-native-swipe-gestures.