Skip to content
The best SwipeView component for React Native.
Branch: master
Clone or download

Latest commit

Latest commit c79c579 Oct 1, 2017


Type Name Latest commit message Commit time
Failed to load latest commit information.
src SwipeView v1.0.0 Sep 5, 2017
.babelrc Babel transform Sep 6, 2017
.gitignore Babel transform Sep 6, 2017
LICENSE Update Oct 1, 2017


React Native SwipeView

Todo-list app built with SwipeView (Watch it on YouTube)

alt text

Getting Started


$ npm i react-native-swipeview --save

Basic Usage

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';

import SwipeView from 'react-native-swipeview';

export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
          renderVisibleContent={() => <Text style={styles.text}>SwipeMe</Text>}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  text: {
    backgroundColor: 'whitesmoke',
    padding: 20,

alt text



Prop Type Description Default
leftOpenValue number TranslateX: How much view opens from the left when swiping left-to-right (positive number). 0
rightOpenValue number TranslateX: How much view opens from the right when swiping right-to-left (negative number). 0
swipeDuration number Duration of the slide out swipe animation. 250
swipeToOpenPercent number What % of the left/right openValue does the user need to swipe past to trigger onSwipedLeft/onSwipedRight actions. 35
disableSwipeToLeft bool Disable ability to swipe view to left. false
disableSwipeToRight bool Disable ability to swipe view to right. false
onSwipedLeft func Called when left swipe is completed. -
onSwipedRight func Called when right swipe is completed. -
previewSwipeDemo bool Should the view do a slide out preview to show that it is swipe-able. false
previewDuration number Duration of the slide out preview animation. 300
previewOpenValue number TranslateX value for the slide out preview animation. -60
previewOpenDelay number Delay before starting preview animation. 350
previewCloseDelay number Delay before closing preview animation. 300
swipingLeft bool Should swiping initialize with right-to-left. This should be useful for swipe previews ex: +ve previewOpenValue swipingLeft: false & -ve previewOpenValue swipingLeft: true. true
recalculateHiddenLayout bool Enable hidden row onLayout calculations to run always. false
directionalDistanceChangeThreshold number Change the sensitivity of the row. 2


Prop Type Description Default
renderVisibleContent func Main Content view. -
renderLeftView func Left view to render behind the right view. -
renderRightView func Right view to render behind the item view. -



Inspiration: react-native-swipe-list-view (Github)


Feel free to Contact me or Create an issue


Released under the Mit License

You can’t perform that action at this time.