rng

react-native-gesture-helper

A gesture helper for React Native

Showing:

Popularity

Downloads/wk

46

GitHub Stars

5

Maintenance

Last Commit

4yrs ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

0.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Build Status

Coverage Status

React Native Gesture Helper

A small library that adds returns gesture type when gestureState, the velocity threshold and the directional offset threshold is passed from the React Native pan responder.

Content

Installation

npm install react-native-gesture-helper --save

Usage

Depending on the velocityThreshold and directionalOffsetThreshold the library will return wether or not the gestures is a swipe or a pan.

import React, {Component} from 'react';
import getGestureType from 'react-native-gesture-helper';

class SomeComponent extends Component {
    componentWillMount: function() {
        this._panResponder = PanResponder.create({
            onPanResponderMove: (evt, gestureState) => {
                // Add the gesture detection.
                const velocityThreshold = 0.4;
                const directionalOffsetThreshold = 80;
                const swipeDirection = getGestureType(gestureState, velocityThreshold, directionalOffsetThreshold);

                // Do what you will with the results here...
            }
        });
    }
}

Function params

ParamDefaulttypedescription
gestureStatenullObjectThe gestureState value returned from the react Native PanResponder api
velocityThreshold0.4NumberThe Velocity threshold that decides wether the gesture is a swipe or a pan
directionalOffsetThreshold80NumberThe directional offset threshold of the gesture

Response

Based on the input the response returned fro the gesture should be one of the following.

  • SWIPE_UP
  • SWIPE_DOWN
  • SWIPE_LEFT
  • SWIPE_RIGHT
  • PAN_UP
  • PAN_DOWN
  • PAN_LEFT
  • PAN_RIGHT
  • TAP

Tests

npm test

Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Questions?

Feel free to contact me in twitter or create an issue

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100