React-native-card-stack-swiper-fork NPM

react-native-card-stack-swiper

Tinder like react-native card stack swiper

Installation

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

Preview

App preview App preview2

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	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.