React Native Swipeview Save

The best SwipeView component for React Native.

Project README

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

Open Source Agenda is not affiliated with "React Native Swipeview" Project. README Source: rishabhbhatia/react-native-swipeview
Stars
87
Open Issues
1
Last Commit
6 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating