JSPM

react-native-swipe-gestures

1.0.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 432864
  • Score
    100M100P100Q190013F
  • License MIT

4-directional swipe gestures for react-native

Package Exports

  • react-native-swipe-gestures

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-swipe-gestures) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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