Make sure you set showSecondCard={false} for smoother and proper transitions while going back to previous card.
Props
type
description
default
goBackToPreviousCardOnSwipeLeft
bool
previous card is rendered on left swipe
false
goBackToPreviousCardOnSwipeRight
bool
previous card is rendered on right swipe
false
goBackToPreviousCardOnSwipeTop
bool
previous card is rendered on top swipe
false
goBackToPreviousCardOnSwipeBottom
bool
previous card is rendered on bottom swipe
false
Style props
Props
type
description
default
backgroundColor
string
background color for the view containing the cards
'#4FD0E9'
marginTop
number
marginTop for the swiper container
0
marginBottom
number
marginBottom for the swiper container
0
cardVerticalMargin
number
card vertical margin
60
cardHorizontalMargin
number
card horizontal margin
20
childrenOnTop
bool
render children on top or not
false
cardStyle
node
override swipable card style
{}
containerStyle
node
overrides for the containing style
{}
pointerEvents
string
pointerEvents prop for the containing
'auto'
useViewOverflow
bool
use ViewOverflow instead of View for the Swiper component
true
Swipe back method info
Method
Name
type
description
swipeBack
callback
swipe back into deck last swiped card
Props
Props
type
description
default
previousCardDefaultPositionX
number
Animation start position oX when card swipes back into deck
-width
previousCardDefaultPositionY
number
Animation start position oY when card swipes back into deck
-height
stackAnimationFriction
number
spring animation friction (bounciness)
7
stackAnimationTension
number
spring animation tension (speed)
40
stackAnimationTension
number
spring animation tension (speed)
40
swipeBackCard
bool
renders swipe back card, in order to animate it
false
Methods
To trigger imperative animations, you can use a reference to the Swiper component.
Name
arguments
description
swipeLeft
mustDecrementCardIndex = false
swipe left to the next card
swipeRight
mustDecrementCardIndex = false
swipe right to the next card
swipeTop
mustDecrementCardIndex = false
swipe top to the next card
swipeBottom
mustDecrementCardIndex = false
swipe bottom to the next card
jumpToCardIndex
cardIndex
set the current card index
Usage example
render(){<Viewstyle={styles.container}><Swipercards={['DO','MORE','OF','WHAT','MAKES','YOU','HAPPY']}renderCard={(card)=>{return(<Viewstyle={styles.card}><Textstyle={styles.text}>{card}</Text></View>)}}onSwiped={(cardIndex)=>{console.log(cardIndex)}}onSwipedAll={()=>{console.log('onSwipedAll')}}cardIndex={0}backgroundColor={'#4FD0E9'}stackSize={3}><ButtononPress={()=>{console.log('oulala')}}title="Press me">
You can press me
</Button></Swiper></View>}