react-native-card-stack-swiper
Tinder like react-native card stack swiper
![npm downloads](https://camo.githubusercontent.com/e956d1beb9173b4f68e268bb7abe4ecd792df66eb52060addf998e80214d70ec/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f72656163742d6e61746976652d636172642d737461636b2d7377697065722e737667)
npm install --save react-native-card-stack-swiper
![App preview2](/animation2.gif)
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>
Props |
type |
description |
required |
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'] |
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 |
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>
Props |
type |
description |
required |
default |
style |
object |
container style |
|
{} |
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. |