react-native-swipeable-view-wrapper

A pure JS react native wrapper component to make your views support swipe gestures.

Demo

You can see a live demo here

Installation

  npm install react-native-swipeable-view-wrapper --save

Usage

 import SwipeableView from "react-native-swipeable-view-wrapper";

 class SwipeableViewExample extends Component {

   onSwipeRight = () => console.log("swiped right!");
   onSwipeLeft = () => console.log("swiped left!");

   render() {
     return (
       <SwipeableView
        onSwipeLeft={this.onSwipeLeft}
        onSwipeRight={this.onSwipeRight}
       >
        ...
       </SwipeableView>
    );
  }

}

Roadmap

• add support for multiple different animations

Properties

Property | Description | Default | Type ------|-------------|----------|----------- style | style applied to the wrapper component | null | Object vertical | make the component swipeable vertically | true (only if horizontal is not set) | Boolean horizontal | make the component swipeable horizontally | false | Boolean duration | duration of the release animation | 150 | Number bounciness | bounciness of the spring animation on release (the lower, the bouncier) | 100 | Number onlyUp | make the component only swipeable upwards | false | Boolean onlyRight | make the component only swipeable to the right | false | Boolean onlyDown | make the component only swipeable downwards | false | Boolean onlyLeft | make the component only swipeable to the left | false | Boolean onSwipeUp | callback to execute after component was swiped upwards | null | Function onSwipeRight | callback to execute after component was swiped to the right | null | Function onSwipeDown | callback to execute after component was swiped downwards | null | Function onSwipeLeft | callback to execute after component was swiped to the left | null | Function onCancel | callback to execute if the component swipe gesture didn't reach the threshold | null | Function requiredTranslationY | porcentual value of the screen's height that the gesture must reach to swipe successfully | 0.25 | Number requiredTranslationX | porcentual value of the screen's width that the gesture must reach to swipe succesfully | 0.1 | Number _resetOnAnimationEnd | make the inner component reappear on default location after 1000ms | false | Boolean

License

MIT