react-native-swipe-gestures

What is react-native-swipe-gestures?

The react-native-swipe-gestures package allows developers to easily add swipe gesture recognition to their React Native applications. It supports swipe gestures in four directions: up, down, left, and right, and provides a simple API to handle these gestures.

What are react-native-swipe-gestures's main functionalities?

Swipe Left Gesture

This feature allows you to detect a left swipe gesture. The onSwipeLeft function is called whenever a left swipe is detected.

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

const App = () => {
  const onSwipeLeft = (gestureState) => {
    console.log('Swiped left!');
  };

  return (
    <GestureRecognizer
      onSwipeLeft={onSwipeLeft}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Swipe left to see the action in console</Text>
      </View>
    </GestureRecognizer>
  );
};

export default App;

Swipe Right Gesture

This feature allows you to detect a right swipe gesture. The onSwipeRight function is called whenever a right swipe is detected.

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

const App = () => {
  const onSwipeRight = (gestureState) => {
    console.log('Swiped right!');
  };

  return (
    <GestureRecognizer
      onSwipeRight={onSwipeRight}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Swipe right to see the action in console</Text>
      </View>
    </GestureRecognizer>
  );
};

export default App;

Swipe Up Gesture

This feature allows you to detect an upward swipe gesture. The onSwipeUp function is called whenever an upward swipe is detected.

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

const App = () => {
  const onSwipeUp = (gestureState) => {
    console.log('Swiped up!');
  };

  return (
    <GestureRecognizer
      onSwipeUp={onSwipeUp}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Swipe up to see the action in console</Text>
      </View>
    </GestureRecognizer>
  );
};

export default App;

Swipe Down Gesture

This feature allows you to detect a downward swipe gesture. The onSwipeDown function is called whenever a downward swipe is detected.

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

const App = () => {
  const onSwipeDown = (gestureState) => {
    console.log('Swiped down!');
  };

  return (
    <GestureRecognizer
      onSwipeDown={onSwipeDown}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Swipe down to see the action in console</Text>
      </View>
    </GestureRecognizer>
  );
};

export default App;

Other packages similar to react-native-swipe-gestures

react-native-gesture-handler

react-native-gesture-handler is a comprehensive gesture handling library for React Native. It provides a wide range of gesture types, including pan, pinch, rotate, and more. Compared to react-native-swipe-gestures, it offers more advanced and customizable gesture handling capabilities.

react-native-swipe-list-view

react-native-swipe-list-view is a library that provides swipeable list items in a React Native ListView. It is particularly useful for creating swipeable actions on list items, such as delete or archive. While it focuses on list views, it offers similar swipe gesture functionality as react-native-swipe-gestures.

react-native-swipeable

react-native-swipeable is a library that allows you to create swipeable components in React Native. It is useful for creating swipeable actions on individual components, such as buttons or cards. It offers similar swipe gesture detection as react-native-swipe-gestures but is more focused on individual component interactions.

README

react-native-swipe-gestures

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

Installation

npm i -S react-native-swipe-gestures

Usage

'use strict';

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

class SomeComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      myText: 'I\'m ready to get swiped!',
      gestureName: 'none',
      backgroundColor: '#fff'
    };
  }

  onSwipeUp(gestureState) {
    this.setState({myText: 'You swiped up!'});
  }

  onSwipeDown(gestureState) {
    this.setState({myText: 'You swiped down!'});
  }

  onSwipeLeft(gestureState) {
    this.setState({myText: 'You swiped left!'});
  }

  onSwipeRight(gestureState) {
    this.setState({myText: 'You swiped right!'});
  }

  onSwipe(gestureName, gestureState) {
    const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
    this.setState({gestureName: gestureName});
    switch (gestureName) {
      case SWIPE_UP:
        this.setState({backgroundColor: 'red'});
        break;
      case SWIPE_DOWN:
        this.setState({backgroundColor: 'green'});
        break;
      case SWIPE_LEFT:
        this.setState({backgroundColor: 'blue'});
        break;
      case SWIPE_RIGHT:
        this.setState({backgroundColor: 'yellow'});
        break;
    }
  }

  render() {

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

    return (
      <GestureRecognizer
        onSwipe={(direction, state) => this.onSwipe(direction, state)}
        onSwipeUp={(state) => this.onSwipeUp(state)}
        onSwipeDown={(state) => this.onSwipeDown(state)}
        onSwipeLeft={(state) => this.onSwipeLeft(state)}
        onSwipeRight={(state) => this.onSwipeRight(state)}
        config={config}
        style={{
          flex: 1,
          backgroundColor: this.state.backgroundColor
        }}
        >
        <Text>{this.state.myText}</Text>
        <Text>onSwipe callback received gesture: {this.state.gestureName}</Text>
      </GestureRecognizer>
    );
  }
}

export default SomeComponent;

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