rishabhbhatia / react-native-swipeview

The best SwipeView component for React Native.

React Native SwipeView

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

Getting Started

• Installation
• Basic Usage
• Properties
• Todo-list Project

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,
  }
});

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

• @rishabhbhatia Author.

Credits

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

Questions

Feel free to Contact me or Create an issue

License

Released under the Mit License

react-native-swipeview's Issues

auto swipe view to left or right

hi @rishabhbhatia. Thank your nice library.
And I have a question. I would like to auto-swipe view to left or right when to press a button. How to do it?
it likes when I press the swipe left or swipe right text in the gif:
https://camo.githubusercontent.com/79b16b15e446a29443761919ae8025c1d1f07c5a/68747470733a2f2f692e696d6775722e636f6d2f416238316d6c6c2e676966
Thank you.

Android: Swipe out left intercepts with flat list

When you try to swipe view to left/right it intercepts with vertical scrolling of flatlist. Is there a way we can prevent this from happening?

This doesn’t have a native feel :/

Suggestion - shorten first example gif

The first gif in the README takes about 30 seconds before it shows the actual functionality this component provides. Shorten it immensely. Have a populated to do list, and show the swiping action to complete or remove immediately. Then consider adding one item, or showing the completed items list. Then let the gif loop. Someone interested in using this component is not interested in your to do list app.