react-native-swipe-view

A native container which provides a smooth drag interaction with any react-native view to implement a horizontal swiping behaviour, for example: swiping a "card" view out of the screen to delete it.

Installation

Install from

npm

npm i --save react-native-swipe-view

Now link the native libraries:

Android

Add to the app

build.gradle

compile project(':RNSwipeView')

Add to

settings.gradle

include ':RNSwipeView'
project(':RNSwipeView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-swipe-view/android')

Add the package to your MainApplication.java

getPackages

import com.wix.RNSwipeView.SwipeViewPackage;

@Override
protected List getPackages() {
  return Arrays.asList(
      //add this pacakge:
      new SwipeViewPackage()
  );
}
};

iOS

In Xcode, drag the

SwipeView.xcodeproj

libSwipeView

Usage

react-native-swipe-view

SwipeView

For example:

//import the swipe view container
import {SwipeView} from 'react-native-swipe-view';

//use it in your render function

    
        This is a swipe view!
    
    
        Drag it to interact
    

supported props

| prop | default | type | description | | ---- | ---- | ----| ---- | | changeOpacity | false | Boolean | Should the component change content alphw while dragging | | removeViewOnSwipedOut |false | Boolean | Should the component be removed from the hierarchy after it is swiped out | | minPanToComplete | 0.5 | Number | The distance from the view center which needs to be completed in percents for the "swipe out" action to happen. If the threshold is not reached it will bounce back | | bounceBackAnimDuration | 0.35 | Number | Duration of bounce back animation when the threshold defined in minPanToComplete is not matched | | bounceBackAnimDamping | 0.65 | Number | Damping param of iOS bounce back animation when the threshold defined in minPanToComplete is not matched | | onSwipeStart | - | Function | Callback function which is called when the swiping action starts. A

direction

left

right

direction

left

right

direction

left

right

direction

left

right

direction

left

right