1.4.0 • Published 2 years ago

@starodubenko/react-native-card-stack-swiper v1.4.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-card-stack-swiper

Tinder like react-native card stack swiper

contributions welcome npm version

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

Propstypedescriptionrequireddefault
styleobjectcontainer style{}
secondCardZoomnumbersecond card zoom0.95
durationnumberanimation duration300
loopboolkeep swiping indefinitelyfalse
renderNoMoreCardsfuncfalse
disableTopSwipebooldisable top swipefalse
disableBottomSwipebooldisable bottom swipefalse
disableLeftSwipebooldisable left swipefalse
disableRightSwipebooldisable right swipefalse
verticalSwipeboolenable/disable vertical swipingtrue
horizontalSwipeboolenable/disable horizont swipingtrue
verticalThresholdboolvertical swipe thresholdheight/4
horizontalThresholdboolhorizontal swipe thresholdwidth/2
outputRotationRangearrayrotation values for the x values'-15deg', '0deg', '15deg'

CardStack events

Propstypedescription
onSwipeStartfuncfunction to be called when a card swipe starts
onSwipeEndfuncfunction to be called when a card swipe ends (card is released)
onSwipedfuncfunction to be called when a card is swiped. it receives the swiped card index
onSwipedLeftfuncfunction to be called when a card is swiped left. it receives the swiped card index
onSwipedRightfuncfunction to be called when a card is swiped right. it receives the swiped card index
onSwipedTopfuncfunction to be called when a card is swiped top. it receives the swiped card index
onSwipedBottomfuncfunction to be called when a card is swiped bottom. it receives the swiped card index
onSwipedAllasync funcfunction to be called when the last card is swiped. Could trig action to refresh cards

CardStack actions

Propstype
swipeLeftfunc
swipeRightfunc
swipeBottomfunc
swipeTopfunc
goBackFromLeftfunc
goBackFromRightfunc
goBackFromBottomfunc
goBackFromTopfunc
  <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

Propstypedescriptionrequireddefault
styleobjectcontainer style{}

Card events

Propstypedescription
onSwipedfuncfunction to be called when a card is swiped.
onSwipedLeftfuncfunction to be called when a card is swiped left.
onSwipedRightfuncfunction to be called when a card is swiped right.
onSwipedTopfuncfunction to be called when a card is swiped top.
onSwipedBottomfuncfunction to be called when a card is swiped bottom.