Swipable Deck for React Native

React Native component for a deck with swipable items

Attention!

This library is built for internal use at Siac. There may be frequent changes in the functionality or new versions will introduce breaking changes without any prior notice.

Installation

yarn add @siac/react-native-swipable-deck

Usage

import { Deck, DeckItem } from "@siac/react-native-swipable-deck";

<Deck
  style={styles.content}
  ref={(stack) => {
    this.stack = stack;
  }}
>
  <DeckItem style={[styles.card, styles.card1]}>
    <Text style={styles.label}>A</Text>
  </DeckItem>
  <DeckItem style={[styles.card, styles.card2]}>
    <Text style={styles.label}>B</Text>
  </DeckItem>
  <DeckItem style={[styles.card, styles.card1]}>
    <Text style={styles.label}>C</Text>
  </DeckItem>
</Deck>

Components

Deck

Deck props

| 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'] |

Deck events

| 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 |

Deck actions

| Props | type | | ---------------- | ---- | | swipeLeft | func | | swipeRight | func | | swipeBottom | func | | swipeTop | func | | goBackFromLeft | func | | goBackFromRight | func | | goBackFromBottom | func | | goBackFromTop | func |

  <Deck style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <DeckItem style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></DeckItem>
    <DeckItem style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></DeckItem>
  </Deck>

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

DeckItem

DeckItem props

| Props | type | description | required | default | | ----- | ------ | --------------- | -------- | ------- | | style | object | container style | | {} |

DeckItem events

| 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. |

License

Swipable Deck is licensed under the MIT license.