You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Swipe back to previous card with a custom animation
More swipe events callbacks
Integrating and using a single card with flatlist
Props ✏️
Card Props
Props
type
description
required
default
data
array
Array of data objects used to render the cards.
Yes
renderCard
func(cardData,cardIndex)
Function that renders a card based on the provided data and index.
Yes
cardStyle
object
CSS style properties applied to each card. These can be applied inline.
children
React.ReactNode
Child components to be displayed inside the component. Used typically for composition.
loop
bool
If true, the swiper will loop back to the first card after the last card is swiped.
No
false
Event callbacks
Props
type
description
default
onSwipeLeft
func
Function called when a card is swiped left. It receives the index of the card as a parameter.
(cardIndex) => {}
onSwipeRight
func
Function called when a card is swiped right. It receives the index of the card as a parameter.
(cardIndex) => {}
onSwipeTop
func
Function called when a card is swiped top. It receives the index of the card as a parameter.
(cardIndex) => {}
onSwipedAll
func
Function called when all cards have been swiped.
() => {}
onSwipeStart
func
Function called when a swipe event starts.
() => {}
onSwipeEnd
func
Function called when a swipe event ends.
() => {}
onSwipeActive
func
Function called when a swipe event is active.
() => {}
onIndexChange
func
Function called when the index of the card changes. It receives the index of the card as a parameter.
(cardIndex) => {}
Swipe Animation Props
props
type
description
default
disableLeftSwipe
bool
If true, disables the ability to swipe left.
false
disableRightSwipe
bool
If true, disables the ability to swipe right.
false
disableTopSwipe
bool
If true, disables the ability to swipe upwards.
false
Rotation Animation Props
props
type
description
default
translateXRange
array
Translates the card horizontally.
[-windowWidth / 3, 0, windowWidth / 3]
translateYRange
array
Translates the card vertically.
[-windowHeight / 3, 0, windowHeight / 3]
rotateInputRange
array
Array specifying the range of x values for rotation mapping.
[-windowWidth / 3, 0, windowWidth / 3]
outputRotationRange
array
Array of rotation values corresponding to rotateInputRange.
[-Math.PI / 20, 0, Math.PI / 20]
Overlay Labels Animation Props
props
type
description
default
inputOverlayLabelRightOpacityRange
array
Array defining the input range for animating the opacity of the right overlay label.
[0, windowWidth / 3]
outputOverlayLabelRightOpacityRange
array
Array defining the output opacity values for the right overlay label, corresponding to the input range.
[0, 1]
inputOverlayLabelLeftOpacityRange
array
Array defining the input range for animating the opacity of the left overlay label.
[0, -(windowWidth / 3)]
outputOverlayLabelLeftOpacityRange
array
Array defining the output opacity values for the left overlay label, corresponding to the input range.
[0, 1]
inputOverlayLabelTopOpacityRange
array
Array defining the input range for animating the opacity of the top overlay label.
[0, -(windowHeight / 3)]
outputOverlayLabelTopOpacityRange
array
Array defining the output opacity values for the top overlay label, corresponding to the input range.
[0, 1]
OverlayLabelRight
() => JSX.Element
Component rendered as an overlay label for right swipes.
OverlayLabelLeft
() => JSX.Element
Component rendered as an overlay label for left swipes.
OverlayLabelTop
() => JSX.Element
Component rendered as an overlay label for top swipes.
Swipe methods
props
type
description
swipeBack
callback
Resets the card position after a swipe event
swipeRight
callback
Animates the card to fling to the right and calls onSwipeRight
swipeLeft
callback
Animates the card to fling to the left and calls onSwipeLeft
swipeTop
callback
Animates the card to fling to the top and calls onSwipeTop
Swipe Animation Spring Configs (Animation Speed)
props
type
description
swipeBackXSpringConfig
SpringConfig
Spring configuration for swipe back animation on the X-axis.
swipeBackYSpringConfig
SpringConfig
Spring configuration for swipe back animation on the Y-axis.
swipeRightSpringConfig
SpringConfig
Spring configuration for swipe right animation on the X-axis.
swipeLeftSpringConfig
SpringConfig
Spring configuration for swipe left animation on the X-axis.
swipeTopSpringConfig
SpringConfig
Spring configuration for swipe top animation on the Y-axis.
swipeBottomSpringConfig
SpringConfig
Spring configuration for swipe bottom animation on the Y-axis.
What is Spring Config?
Spring configuration is used to control the animation behavior of the swipe actions. The spring configuration consists of several parameters that define the physical properties of the spring animation. Here are the details of each parameter:
Parameter
Type
Description
damping
number
Controls the amount of damping in the spring. Higher values result in more damping, causing the animation to slow down more quickly.
stiffness
number
Controls the stiffness of the spring. Higher values result in a stiffer spring, causing the animation to be more rigid and faster.
mass
number
Controls the mass of the object being animated. Higher values result in a heavier object, causing the animation to be slower.
overshootClamping
bool
If true, the spring animation will not overshoot its target value. This means the animation will stop exactly at the target value without bouncing.
restDisplacementThreshold
number
The threshold for the displacement of the spring below which the spring is considered to be at rest. Lower values result in a more precise stopping point.
restSpeedThreshold
number
The threshold for the speed of the spring below which the spring is considered to be at rest. Lower values result in a more precise stopping point.
These parameters can be adjusted to achieve the desired animation behavior for the swipe actions. The default values provided in the SWIPE_SPRING_CONFIG are: