Newsworthy Presidential Mistakes
    Have ideas to improve npm?Join in the discussion! »

    react-native-card-stack-swiper
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.5 • Public • Published

    react-native-card-stack-swiper

    Tinder like react-native card stack swiper

    contributions welcome npm version npm downloads

    Installation

      npm install --save react-native-card-stack-swiper
    

    Preview

    App preview App preview2

    import CardStack, { Card } from 'react-native-card-stack-swiper';
      <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
        <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
        <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
        <Card style={[styles.card, styles.card1]}><Text style={styles.label}>C</Text></Card>
      </CardStack>

    CardStack

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

    CardStack 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

    CardStack actions

    Props type
    swipeLeft func
    swipeRight func
    swipeBottom func
    swipeTop func
    goBackFromLeft func
    goBackFromRight func
    goBackFromBottom func
    goBackFromTop func
      <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
        <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
        <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
      </CardStack>
     
      <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
        <Text>Left</Text>
      </TouchableOpacity>

    Card

    Card props

    Props type description required default
    style object container style {}

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

    Install

    npm i react-native-card-stack-swiper

    DownloadsWeekly Downloads

    1,290

    Version

    1.2.5

    License

    MIT

    Unpacked Size

    619 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar