react-native-swipe-detect

React Native component for handling swipe gestures in up, down, left and right direction.
(forked from https://github.com/glepur/react-native-swipe-gestures, primarily to fix vertical scrolling on iOS)

Installation

npm i -S react-native-swipe-detect

Usage

``javascript
"use strict";

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

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 (
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,
}}
>
{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 | 70 | 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) |
| enableSwipeUp | Boolean | true | Determines whether upward swipes should be recognized |
| enableSwipeDown | Boolean | true | Determines whether downward swipes should be recognized |
| enableSwipeLeft | Boolean | true | Determines whether left swipes should be recognized |
| enableSwipeRight | Boolean | true | Determines whether right swipes should be recognized |

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 |

Fix ScrollView and FlatList issues on iOS

To prevent any vertical scrolling hiccups on iOS, disable vertical swipe recognition with a config like this:

`javascript
config={{
enableSwipeUp: false,
enableSwipeDown: false,
}}
>
``