react-native-swipe-gestures

v1.0.5

4-directional swipe gestures for react-native

NPM

README

GitHub

Website

MIT

Latest version published 10 months ago

    npm install react-native-swipe-gestures

We couldn't find any similar packages Browse all packages

Package Health Score

66 / 100

Popularity
Popular
Maintenance
Sustainable
Security
No known security issues
Community
Sustainable

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Popular

Weekly Downloads (103,329)

Dependents: 48
GitHub Stars: 462
Forks: 131
Contributors: 6

The npm package react-native-swipe-gestures receives a total of 103,329 downloads a week. As such, we scored react-native-swipe-gestures popularity level to be Popular.

Based on project statistics from the GitHub repository for the npm package react-native-swipe-gestures, we found that it has been starred 462 times, and that 48 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

1.0.5

Indirect Vulnerabilities

1.0.5

License Risks

1.0.5

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

MIT

Security Policy

We found a way for you to contribute to the project! Looks like react-native-swipe-gestures is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

We found a way for you to contribute to the project! Looks like react-native-swipe-gestures is missing a security policy.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test react-native-swipe-gestures

Keep your project free of vulnerabilities with Snyk

Maintenance

Sustainable

Commit Frequency

Open Issues: 31
Merged PR: 6
Open PR: 7
Last Commit: 10 months ago

Further analysis of the maintenance status of react-native-swipe-gestures based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that react-native-swipe-gestures demonstrates a positive version release cadence with at least one new version released in the past 12 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 6
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like react-native-swipe-gestures is missing a Code of Conduct.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 4 years
Dependencies: 0 Direct
Versions: 7
Install Size: 11 kB
Dist-tags: 1
# of Files: 6
Maintainers: 1
TS Typings: Yes

react-native-swipe-gestures has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

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