https://github.com/glepur/react-native-swipe-gestures

4-directional swipe gestures for react-native
https://github.com/glepur/react-native-swipe-gestures

gesture gestures react-native swipe touch

Last synced: 5 days ago
JSON representation

4-directional swipe gestures for react-native

• Host: GitHub
• URL: https://github.com/glepur/react-native-swipe-gestures
• Owner: glepur
• License: mit
• Created: 2016-12-20T18:28:59.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-05-19T16:07:33.000Z (over 2 years ago)
• Last Synced: 2024-10-30T01:01:53.557Z (4 months ago)
• Topics: gesture, gestures, react-native, swipe, touch
• Language: JavaScript
• Size: 21.5 KB
• Stars: 607
• Watchers: 6
• Forks: 162
• Open Issues: 45
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

```javascript

'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 (

       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

        }}

        >

        {this.state.myText}

        onSwipe callback received gesture: {this.state.gestureName}

      

    );

  }

}

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  |