react-native-swipeable-view-stack

1.0.4 • Public • Published

react-native-swipeable-view-stack NPM version Build Status

This is an interactive swipeable view stack npm package. Users can pan left or right on the frontmost view to naviagte to the next view. Data set is looped by defaut.

Swipeable View Stack for React Native

Alt text

Installation

$ npm install --save react-native-swipeable-view-stack

Import and Basic Usage

Import

var ReactNativeSwipeableViewStack = require('react-native-swipeable-view-stack');
reactNativeSwipeableViewStack();

Basic Usage

<ReactNativeSwipeableViewStack
  onSwipe={ ( swipedIndex ) => this.onCardSwipe( swipedIndex ) }
  initialSelectedIndex={ 1 }
  data={ this.dataArray }
  renderItem={ ( element ) => this.renderViewItem( element ) }
  onItemClicked={ ( element ) => this.onClick( element ) }
  stackSpacing={ 20 }
/>

Props

  • onSwipe( swipedIndex: number ): (Optional) Gets called when navigation is about to take place.

  • initialSelectedIndex: number: (Optional) Element at index to be shown at the top of the stack initially.

  • stackSpacing: number: (Optional) Top spacing between stacked views.

  • data: Array: Array of Elements that'll be represented by this component.

  • onItemClicked( element: ~Clicked Element ): Function: Function to be executed when the frontmost card is clicked.

  • renderItem( element: ~Array Element): Function: Inputs a function that returns view items of stack.

Important Note

*** You have to specify the width & height of renderItem view, otherwise you might see unusual behaviour.

License

ISC © Rajat Soni

Package Sidebar

Install

npm i react-native-swipeable-view-stack

Weekly Downloads

6

Version

1.0.4

License

ISC

Unpacked Size

14 kB

Total Files

3

Last publish

Collaborators

  • rajatsoni