All Projects → rishabhbhatia → React Native Swipeview

rishabhbhatia / React Native Swipeview

Licence: mit
The best SwipeView component for React Native.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Swipeview

Vue Router Layout
Lightweight layout resolver for Vue Router
Stars: ✭ 74 (-8.64%)
Mutual labels:  component
React Mde
📝 React Markdown Editor
Stars: ✭ 1,196 (+1376.54%)
Mutual labels:  component
Rn Components Kit
A series of commonly used react-native components
Stars: ✭ 79 (-2.47%)
Mutual labels:  component
Mao Rn Android Kit
⚙️ Android Native (ui components and modules) wrap in React Native
Stars: ✭ 74 (-8.64%)
Mutual labels:  component
Component Pattern For Angular Js 1 X
Example of implementation of Component pattern for Angular JS 1.X using ES6 & Webpack
Stars: ✭ 75 (-7.41%)
Mutual labels:  component
Vuecirclemenu
🐰A beautiful circle menu powered by Vue.js
Stars: ✭ 1,199 (+1380.25%)
Mutual labels:  component
React Native Appstate Hook
React Native appSate hook
Stars: ✭ 73 (-9.88%)
Mutual labels:  component
Percy Storybook
Percy's Storybook SDK.
Stars: ✭ 80 (-1.23%)
Mutual labels:  component
Security
The Security component provides a complete security system for your web application.
Stars: ✭ 1,195 (+1375.31%)
Mutual labels:  component
React Vim Wasm
Vim editor embedded in your React web application
Stars: ✭ 77 (-4.94%)
Mutual labels:  component
Uskin
A front-end framework aims at developing web projects based on CSS3 and provides common components.
Stars: ✭ 74 (-8.64%)
Mutual labels:  component
Vue Standalone Component
Vuejs template to build components with livecoding, tests, documentation and demos
Stars: ✭ 75 (-7.41%)
Mutual labels:  component
Ng2 Fan Menu
Angular Fan Menu
Stars: ✭ 76 (-6.17%)
Mutual labels:  component
Vue Breakpoint
😸 A renderless Vue.js component for composing CSS breakpoints
Stars: ✭ 74 (-8.64%)
Mutual labels:  component
Flow Ui
Flow-UI is a highly customizable UI framework based Seajs/jQuery。
Stars: ✭ 79 (-2.47%)
Mutual labels:  component
Http Client
The HttpClient component provides powerful methods to fetch HTTP resources synchronously or asynchronously.
Stars: ✭ 1,186 (+1364.2%)
Mutual labels:  component
Phfcomposebarview
Compose bar from iOS 7 Messages.app
Stars: ✭ 1,197 (+1377.78%)
Mutual labels:  component
Wymaterialbutton
Interactive and fully animated Material Design button for iOS developers.
Stars: ✭ 80 (-1.23%)
Mutual labels:  component
Security Csrf
The Security CSRF (cross-site request forgery) component provides a class CsrfTokenManager for generating and validating CSRF tokens.
Stars: ✭ 1,220 (+1406.17%)
Mutual labels:  component
Reactjs Popup
React Popup Component - Modals,Tooltips and Menus —  All in one
Stars: ✭ 1,211 (+1395.06%)
Mutual labels:  component

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].