react-native-swipedeck

Swipe cards for your React Native app

Showing:

Popularity

Downloads/wk

5

GitHub Stars

1

Maintenance

Last Commit

3yrs ago

Contributors

35

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Swipe Cards for React Native

A package based on @brentvatne's awesome example.

React Native Swipe Cards

Quick Start

  1. npm install --save react-native-swipe-cards
  2. Create a module e.g. SwipeCards.js
  3. Import it import SwipeCards from './SwipeCards.js'
  4. Render it <SwipeCards style={{flex: 1}} />
// SwipeCards.js
import React, { Component } from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';

import SwipeCards from 'react-native-swipe-cards';

const Card = ({ backgroundColor, text }) => {
  return (
    <View style={[styles.card, {backgroundColor}]}>
      <Text>{text}</Text>
    </View>
  )
}

const NoMoreCards = () => {
  return (
    <View>
      <Text style={styles.noMoreCardsText}>No more cards</Text>
    </View>
  )
}

const Cards = [
  {text: 'Tomato',    backgroundColor: 'red'},
  {text: 'Aubergine', backgroundColor: 'purple'},
  {text: 'Courgette', backgroundColor: 'green'},
  {text: 'Blueberry', backgroundColor: 'blue'},
  {text: 'Umm...',    backgroundColor: 'cyan'},
  {text: 'orange',    backgroundColor: 'orange'},
]

export default class extends Component {
  state = {
      cards: Cards
  }

  onRightSwipe (card) {
    console.log(`Right for ${card.text}`)
  }

  onLeftSwipe (card) {
    console.log(`Left for ${card.text}`)
  }

  onUpSwipe (card) {
    console.log(`Up for ${card.text}`)
  }

  render() {
    return (
      <SwipeCards
        cards={this.state.cards}
        renderCard={(cardData) => <Card {...cardData} />}
        renderNoMoreCards={() => <NoMoreCards />}
        onRightSwipe={this.onRightSwipe}
        onLeftSwipe={this.onLeftSwipe}
        onUpSwipe={this.onUpSwipe}
        hasUpAction
        // If you want a stack of cards instead of one-per-one view, activate stack mode
        // stack={true}
      />
    )
  }
}

const styles = StyleSheet.create({
  card: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    height: 300,
  },
  noMoreCardsText: {
    fontSize: 22,
  }
})

More complex example

import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';


import SwipeCards from 'react-native-swipe-cards';

const Card = ({ image, name }) => {
  return (
    <View style={styles.card}>
      <Image style={styles.thumbnail} source={{uri: image}} />
      <Text style={styles.text}>This is card {name}</Text>
    </View>
  )
}

const NoMoreCards = () => {
  return (
    <View>
      <Text style={styles.noMoreCardsText}>No more cards</Text>
    </View>
  )
}

const Cards = [
  {name: '1', image: 'https://media.giphy.com/media/GfXFVHUzjlbOg/giphy.gif'},
  {name: '2', image: 'https://media.giphy.com/media/irTuv1L1T34TC/giphy.gif'},
  {name: '3', image: 'https://media.giphy.com/media/LkLL0HJerdXMI/giphy.gif'},
  {name: '4', image: 'https://media.giphy.com/media/fFBmUMzFL5zRS/giphy.gif'},
  {name: '5', image: 'https://media.giphy.com/media/oDLDbBgf0dkis/giphy.gif'},
  {name: '6', image: 'https://media.giphy.com/media/7r4g8V2UkBUcw/giphy.gif'},
  {name: '7', image: 'https://media.giphy.com/media/K6Q7ZCdLy8pCE/giphy.gif'},
  {name: '8', image: 'https://media.giphy.com/media/hEwST9KM0UGti/giphy.gif'},
  {name: '9', image: 'https://media.giphy.com/media/3oEduJbDtIuA2VrtS0/giphy.gif'},
]

const Cards2 = [
  {name: '10', image: 'https://media.giphy.com/media/12b3E4U9aSndxC/giphy.gif'},
  {name: '11', image: 'https://media4.giphy.com/media/6csVEPEmHWhWg/200.gif'},
  {name: '12', image: 'https://media4.giphy.com/media/AA69fOAMCPa4o/200.gif'},
  {name: '13', image: 'https://media.giphy.com/media/OVHFny0I7njuU/giphy.gif'},
]

export default class extends Component {
  state = {
      cards: Cards,
      outOfCards: false
  }

  onRightSwipe (card) {
    console.log("right")
  }

  onLeftSwipe (card) {
    console.log("left")
  }

  onCardRemoved (index) {
    console.log(`The index is ${index}`);

    const CARD_REFRESH_LIMIT = 3

    if (this.state.cards.length - index <= CARD_REFRESH_LIMIT + 1) {
      console.log(`There are only ${this.state.cards.length - index - 1} cards left.`);

      if (!this.state.outOfCards) {
        console.log(`Adding ${Cards2.length} more cards`)

        this.setState({
          cards: this.state.cards.concat(Cards2),
          outOfCards: true
        })
      }
    }
  }

  render() {
    return (
      <SwipeCards
        cards={this.state.cards}
        loop={false}

        renderCard={(cardData) => <Card {...cardData} />}
        renderNoMoreCards={() => <NoMoreCards />}
        showRight={true}
        showLeft={true}

        onRightSwipe={this.onRightSwipe}
        onLeftSwipe={this.onLeftSwipe}
        onCardRemoved={this.onCardRemoved}
      />
    )
  }
})

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    borderRadius: 5,
    overflow: 'hidden',
    borderColor: 'grey',
    backgroundColor: 'white',
    borderWidth: 1,
    elevation: 1,
  },
  thumbnail: {
    flex: 1,
    width: 300,
    height: 300,
  },
  text: {
    fontSize: 20,
    paddingTop: 10,
    paddingBottom: 10
  },
  noMoreCards: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})

Props

Prop nameTypeDefaultDescription
cardKey(card: T) => KeyReact key to be used to for each card
cardsArrayData that will be provided as props for the cards
containerStylestyleOverride default style
dragYBooleantrueAllows dragging cards vertically
draggingDisabledBooleanfalseAllows dragging or not
hasUpActionBooleanfalseIncludes the possibility to swipe up and its components
leftStylestyleOverride default style
leftTextstringNope!Text to render on left swipe
leftTextStylestyleOverride default style
leftViewReactNodeReact component to render on a left swipe
loopBooleanfalseIf true, start again when run out of cards
onCardRemoved() => voidA callback passing the card reference that just got removed
onLeftSwipeSwipeHandlerCalled when card is swiped left. Return true to cancel the animation.
onLoop() => voidCalled when card list returns to the beginning
onRightSwipeSwipeHandlerCalled when card is swiped right. Return true to cancel the animation.
onSwipeCancelled(card: T) => booleanCalled after a card swipe is cancelled.
onUpSwipeSwipeHandlerCalled when card is swiped up. Return true to cancel the animation.
renderCardStatelessComponentRenders the card with the current data
renderLeft(pan: Animated.ValueXY) => ReactNodeRenders Left
renderLeftButtonButtonRendererRenders Left button. Takes onPress and disabled props
renderNoMoreCardsStatelessComponentRenders what is shown after swiped last card
renderRight(pan: Animated.ValueXY) => ReactNodeRenders Right
renderRightButtonButtonRendererRenders Right Button. Takes onPress and disabled props
renderUp(pan: Animated.ValueXY) => ReactNodeRenders Up
renderUpButtonButtonRendererRenders Up Button. Takes onPress and disabled props
rightStylestyleOverride default style
rightTextstringYup!Text to render on right swipe
rightTextStylestyleOverride default style
rightViewReactNodeReact component to render on a right swipe
showLeftBooleantrueShows the 'Left' label
showRightBooleantrueShows the 'Right' label
showUpBooleantrueShows the 'Up' label
smoothTransitionBooleanfalseDisables a slow transition fading the current card out
stackBooleanfalseEnables the stack mode
stackOffsetXNumber25Horizontal offset between cards in stack
stackOffsetYNumber0Vertical offset between cards in stack
upStylestyleOverride default style
upTextstringMaybe!Text to render on Up swipe
upTextStylestyleOverride default style
upViewReactNodeReact component to render on a Up swipe

Todo (PRs welcome!)

  • Testing

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial