react-native-card-stack-swiper

A fork of react-native-card-stack-swiper, modified to render 5 cards at a time and to add some useful events:

onSwipeCancel to detect a failed/cancelled swipe

onSwipeSuccess does the same as onSwiped, but triggers as soon as the user releases touch

Installation

  npm install --save react-native-card-stack-swiper

Preview

import CardStack, { Card } from "react-native-card-stack-swiper";

<CardStack
  style={styles.content}
  ref={(swiper) => {
    this.swiper = swiper;
  }}
>
  <Card style={[styles.card, styles.card1]}>
    <Text style={styles.label}>A</Text>
  </Card>
  <Card style={[styles.card, styles.card2]}>
    <Text style={styles.label}>B</Text>
  </Card>
  <Card style={[styles.card, styles.card1]}>
    <Text style={styles.label}>C</Text>
  </Card>
</CardStack>

CardStack

CardStack props

Props	type	description	required	default
style	object	container style		{}
cardContainerStyle	object	cardContainerStyle style		{}
secondCardZoom	number	second card zoom		0.95
duration	number	animation duration		300
initialIndex	number	initial card index		0
loop	bool	keep swiping indefinitely		false
renderNoMoreCards	func			false
disableTopSwipe	bool	disable top swipe		false
disableBottomSwipe	bool	disable bottom swipe		false
disableLeftSwipe	bool	disable left swipe		false
disableRightSwipe	bool	disable right swipe		false
verticalSwipe	bool	enable/disable vertical swiping		true
horizontalSwipe	bool	enable/disable horizont swiping		true
verticalThreshold	number	vertical swipe threshold		height/4
horizontalThreshold	number	horizontal swipe threshold		width/2
outputRotationRange	array	rotation values for the x values		['-15deg', '0deg', '15deg']

CardStack events

Props	type	description
onSwipeStart	func	function to be called when a card swipe starts
onSwipeEnd	func	function to be called when a card swipe ends (card is released)
onSwiped	func	function to be called when a card is swiped. it receives the swiped card index
onSwipedLeft	func	function to be called when a card is swiped left. it receives the swiped card index
onSwipedRight	func	function to be called when a card is swiped right. it receives the swiped card index
onSwipedTop	func	function to be called when a card is swiped top. it receives the swiped card index
onSwipedBottom	func	function to be called when a card is swiped bottom. it receives the swiped card index
onSwipedAll	async func	function to be called when the last card is swiped. Could trig action to refresh cards
onSwipe	func	function to be called when a card is swiped. It receives the current x, and y coordinates

CardStack actions

Props	type
swipeLeft	func
swipeRight	func
swipeBottom	func
swipeTop	func
goBackFromLeft	func
goBackFromRight	func
goBackFromBottom	func
goBackFromTop	func

  <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
  </CardStack>

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

Card

Card props

Props	type	description	required	default
style	object	container style		{}

Card events

Props	type	description
onSwiped	func	function to be called when a card is swiped.
onSwipedLeft	func	function to be called when a card is swiped left.
onSwipedRight	func	function to be called when a card is swiped right.
onSwipedTop	func	function to be called when a card is swiped top.
onSwipedBottom	func	function to be called when a card is swiped bottom.