@rn-components-kit/deck-swiper

DeckSwiper

English | 中文

Deck Swiper helps you evaluate one option at a time, instead of selecting from a set of options.

How to use

npm install @rn-components-kit/deck-swiper --save

Preview	Code
	Demo1 Code

Props

• style
• data
• cardWidth
• cardHeight
• renderCard
• renderBottom
• onSwipeLeft
• onSwipeRight
• onBeginDragging
• onEndDragging

Methods

• prev
• next

Reference

Props

style

Allow you to customizr style

Type	Required	Default
object	no	-

data

Data source of cards

Type	Required	Default
T[]	yes	-

cardWidth

Width of card (it is important to help calculate animation)

Type	Required	Default
number	yes	-

cardHeight

Height of card (it is important to help calculate animation)

Type	Required	Default
number	yes	-

renderCard

(params: {item: T, index: number}) => React.ReactElement | null

Takes an item from data and renders it into the swiper

Type	Required	Default
function	yes	-

renderBottom

() => React.ReactElement | null

When all cards are swiped, it will be called and returns bottom layer component

Type	Required	Default
function	no	-

onSwipeLeft

(from: number, to: number) => void

A callback will be triggered when card is swiped left

Type	Required	Default
function	no	() => {}

onSwipeRight

(from: number, to: number) => void

A callback will be triggered when card is swiped right

Type	Required	Default
function	no	() => {}

onBeginDragging

() => void

A callback will be triggered when you begin to drag DeckSwiper

Type	Required	Default
function	no	() => {}

onEndDragging

() => void

A callback will be triggered when dragging operation ends

Type	Required	Default
function	no	() => {}

Methods

prev

prev()

Swipes to previous card

next

next()

Swipes to next card