@starodubenko/react-native-card-stack-swiper
v1.4.0
Published
Tinder like react-native card stack swiper
Downloads
59
Maintainers
Readme
react-native-card-stack-swiper
Tinder like react-native card stack swiper
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 | | {} | | secondCardZoom | number | second card zoom | | 0.95 | | duration | number | animation duration | | 300 | | 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 | bool | vertical swipe threshold | | height/4 | | horizontalThreshold | bool | 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 |
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. |