react-native-swipe-gestures-plus

react-native-swipe-gestures-plus

React Native component for handling swipe gestures in up, down, left and right direction with Press and Long Press Events.

Installation

npm i react-native-swipe-gestures-plus

License

This is an updated version by arunahuja94.
Original author glepur,

Usage

'use strict';

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

export default function App() {
  const [myText, setMyText] = React.useState("I'm ready to get swiped!");
  const [gestureName, setGestureName] = React.useState('none');
  const [backgroundColor, setBackgroundColor] = React.useState('#fff');

  const onSwipeUp = (gestureState) => {
    setMyText('You swiped up!');
  };

  const onSwipeDown = (gestureState) => {
    setMyText('You swiped down!');
  };

  const onSwipeLeft = (gestureState) => {
    setMyText('You swiped left!');
  };

  const onSwipeRight = (gestureState) => {
    setMyText('You swiped right!');
  };

  const onPress = (gestureState) => {
    setMyText('You Clicked!');
  };

  const onLongPress = (gestureState) => {
    setMyText('You Long Pressed!');
  };

  const onLongPressRelease = (gestureState) => {
    setMyText('You Long Pressed Released!');
  };

  const onSwipe = (gestureName, gestureState) => {
    const {
      SWIPE_UP,
      SWIPE_DOWN,
      SWIPE_LEFT,
      SWIPE_RIGHT,
      ON_PRESS,
      ON_LONGPRESS,
      ON_LONGPRESS_RELEASE,
    } = swipeDirections;
    setGestureName(gestureName);
    switch (gestureName) {
      case SWIPE_UP:
        setBackgroundColor('red');
        break;
      case SWIPE_DOWN:
        setBackgroundColor('green');
        break;
      case SWIPE_LEFT:
        setBackgroundColor('blue');
        break;
      case SWIPE_RIGHT:
        setBackgroundColor('yellow');
        break;
      case ON_PRESS:
        setBackgroundColor('black');
        break;
      case ON_LONGPRESS:
        setBackgroundColor('pink');
        break;
      case ON_LONGPRESS_RELEASE:
        setBackgroundColor('pink');
        break;
    }
  };

  const config = {
    velocityThreshold: 0.3,
    directionalOffsetThreshold: 80,
    swipeEnabled: true,
    longpressDelay: 700,
  };

  return (
    <GestureRecognizer
      onSwipe={(direction, state) => onSwipe(direction, state)}
      onSwipeUp={(state) => onSwipeUp(state)}
      onSwipeDown={(state) => onSwipeDown(state)}
      onSwipeLeft={(state) => onSwipeLeft(state)}
      onSwipeRight={(state) => onSwipeRight(state)}
      onPress={(state) => onPress(state)}
      onLongPress={(state) => onLongPress(state)}
      onLongPressRelease={(state) => onLongPressRelease(state)}
      config={config}
      gestureStyle={{
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        backgroundColor: backgroundColor,
      }}
      style={{
        flex: 1,
        backgroundColor: backgroundColor,
      }}>
      <Text>{myText}</Text>
      <Text>callback received gesture: {gestureName}</Text>
    </GestureRecognizer>
  );
}

Config

Can be passed within optional config property.

Params	Type	Default	Description
velocityThreshold	Number	0.3	Velocity that has to be breached in order for swipe to be triggered (vx and vy properties of gestureState)
directionalOffsetThreshold	Number	80	Absolute offset that shouldn't be breached for swipe to be triggered (dy for horizontal swipe, dx for vertical swipe)
gestureIsClickThreshold	Number	5	Absolute distance that should be breached for the gesture to not be considered a click (dx or dy properties of gestureState)

Methods

onSwipe(gestureName, gestureState)

Params	Type	Description
gestureName	String	Name of the gesture (look example above)
gestureState	Object	gestureState received from PanResponder

onSwipeUp(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder

onSwipeDown(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder

onSwipeLeft(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder

onSwipeRight(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder

onPress(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder

onLongPress(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder

onLongPressRelease(gestureState)

Params	Type	Description
gestureState	Object	gestureState received from PanResponder