1.0.0 • Published 1 year ago

react-native-swiper-card v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
1 year ago

react-native-card-stack-swiper

Tinder like react-native card stack swiper

contributions welcome npm version npm downloads

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{}
cardContainerStyleobjectcardContainerStyle style{}
secondCardZoomnumbersecond card zoom0.95
durationnumberanimation duration300
initialIndexnumberinitial card index0
loopboolkeep swiping indefinitelyfalse
renderNoMoreCardsfuncfalse
disableTopSwipebooldisable top swipefalse
disableBottomSwipebooldisable bottom swipefalse
disableLeftSwipebooldisable left swipefalse
disableRightSwipebooldisable right swipefalse
verticalSwipeboolenable/disable vertical swipingtrue
horizontalSwipeboolenable/disable horizont swipingtrue
verticalThresholdnumbervertical swipe thresholdheight/4
horizontalThresholdnumberhorizontal 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
onSwipefuncfunction to be called when a card is swiped. It receives the current x, and y coordinates

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.