Skip to content
The best SwipeView component for React Native.
Branch: master
Clone or download
Latest commit c79c579 Oct 1, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Basic SwipeView usage Sep 5, 2017
src
.babelrc Babel transform Sep 6, 2017
.gitignore
.npmignore
LICENSE Initial commit Sep 4, 2017
README.md
index.js index.js Sep 6, 2017
package.json index.js Sep 6, 2017

README.md

react-native-swipeview

React Native SwipeView

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

alt text

Getting Started

Installation

$ 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}>
        <SwipeView
          renderVisibleContent={() => <Text style={styles.text}>SwipeMe</Text>}
        />
      </View>
    );
  };
};

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

alt text

Properties

Basic

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

Views

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. -

Contribution

Credits

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

Questions

Feel free to Contact me or Create an issue

License

Released under the Mit License

You can’t perform that action at this time.