@siac/react-native-swipable-deck

    1.1.0 • Public • Published

    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.

    Install

    npm i @siac/react-native-swipable-deck

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • _itsag