react-native-swipeable-view-stack

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

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