@rn-components-kit/deck-swiper NPM

DeckSwiper

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

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

Preview	Code
	Demo1 Code

Allow you to customizr style

Type	Required	Default
object	no	-

Data source of cards

Type	Required	Default
T[]	yes	-

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

Type	Required	Default
number	yes	-

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

Type	Required	Default
number	yes	-

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

Takes an item from data and renders it into the swiper

Type	Required	Default
function	yes	-

() => React.ReactElement | null

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

Type	Required	Default
function	no	-

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

A callback will be triggered when card is swiped left

Type	Required	Default
function	no	() => {}

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

A callback will be triggered when card is swiped right

Type	Required	Default
function	no	() => {}

() => void

A callback will be triggered when you begin to drag DeckSwiper

Type	Required	Default
function	no	() => {}

() => void

A callback will be triggered when dragging operation ends

Type	Required	Default
function	no	() => {}

prev()

Swipes to previous card

next()

Swipes to next card

6 years ago