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

`javascript
import CardStack, { Card } from 'react-native-card-stack-swiper';
`

`javascript
{ this.swiper = swiper }}>
A
B
C

`

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 |

`javascript
{ this.swiper = swiper }}>
A
B


{ this.swiper.swipeLeft() }}>
Left

``

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