react-native-card-stack

Tinder really changed the game with it's card swiping interface. It's simple, visually appealing, and just plain fun.

Perhaps that's why it's taken the mobile UI world by storm. These days there is a "Tinder of..." just about everything from Music to Pet Adoption.

This component will make it easier to make your own "Tinder of..." by adding a stack of swipeable cards to your application. Based on the component built in our Platypost.

Quick Start

1. npm install --save react-native-card-stack
2. Import it import CardStack from 'react-native-card-stack'
3. Render it <CardStack/>

Example

'use strict';
import React, { Component } from 'react';
import {
  Text,
  View,
  Image,
  StyleSheet
} from 'react-native';
import flattenStyle from 'flattenStyle';
import CardStack from 'react-native-card-stack';
 
export default class SwipeView extends Component {
 
  constructor(props) {
    super(props);
    this.state = {
      allCards: [],
      displayedCards: [],
    };
  }
 
  componentWillMount() {
    this.pullUsers();
  }
 
  async pullUsers() {
    try {
      let response = await fetch('https://randomuser.me/api/?results=100&gender=female');
      let result = await response.json();
      let resultKeyed = []
      for (var i = 0; i < result.results.length; i++){
        result.results[i].key = result.results[i].login.username;
        resultKeyed.push(result.results[i]);
      }
      this.setState({
        allCards: resultKeyed
      });
      let selection = []
      for (var i = 0; i < 3; i++){
        selection.push(this.state.allCards.shift(i))
      }
      this.setState({
        allCards: this.state.allCards,
        displayedCards: selection.reverse()
      });
    } catch (err) {
      alert(JSON.stringify(err));
    }
  }
 
  handleAdd() {
    if (this.state.allCards.length > 0) {
      let newCard = this.state.allCards.shift()
      this.setState({
        displayedCards: [newCard, ...this.state.displayedCards]
      });
    }
  };
 
  handleRemove = (index) => {
    this.state.displayedCards.pop();
    this.setState({
      displayedCards: this.state.displayedCards
    });
    this.handleAdd();
  };
 
  renderCard(cardObject) {
    return(
      <View style={Styles.card}>
        <View style={Styles.cardTop}/>
        <View style={Styles.cardImageBorder}/>
        <Image source={{uri: cardObject.picture.large}} style={Styles.cardImage}/>
        <View style={Styles.cardText}>
          <Text style={Styles.cardTextMain}>{cardObject.name.first.toUpperCase()} {cardObject.name.last.toUpperCase()}</Text>
          <Text style={Styles.cardTextSecondary}>{cardObject.location.city.toUpperCase()} </Text>
          <Text style={Styles.cardTextSecondary}>{cardObject.location.state.toUpperCase()}</Text>
          <Text style={Styles.cardTextTerciary}>{cardObject.email}</Text>
        </View>
      </View>
    )
  }
 
  render() {
    return (
      <CardStack
        cardList={this.state.displayedCards}
        renderCard={this.renderCard}
        cardHeight={flattenStyle(Styles.card).height}
        cardWidth={flattenStyle(Styles.card).width}
        cardRotation={20}
        cardOpacity={0.5}
        onSwipeRight={this.handleRemove}
        onSwipeLeft={this.handleRemove}
        onSwipeUp={this.handleRemove}
        onSwipeDown={this.handleRemove}
        leftSwipeThreshold={-150}
        rightSwipeThreshold={150}
        upSwipeThreshold={-150}
        downSwipeThreshold={150}
      />
    );
  }
}
 
const Styles = StyleSheet.create({
  card: {
    height: 500,
    width: 350,
    borderWidth: 1,
    borderColor: '#A9A9A9',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
    overflow: 'hidden'
  },
  cardTop: {
    position: 'absolute',
    left: 0,
    top: 0,
    height: 200,
    width: 350,
    backgroundColor: '#D3D3D3'
  },
  cardImage: {
    position: 'absolute',
    left: 85,
    top: 110,
    width: 180,
    height: 180,
    borderRadius: 90,
    borderColor: '#FFF',
    borderWidth: 4,
    backgroundColor: '#1E90FF'
  },
  cardImageBorder: {
    position: 'absolute',
    left: 83.5,
    top: 108.5,
    width: 183,
    height: 183,
    borderRadius: 91.5,
    backgroundColor: '#A9A9A9'
  },
  cardText: {
    position: 'absolute',
    left: 0,
    top: 300,
    width: 350,
    alignItems: 'center',
    padding: 20
  },
  cardTextMain: {
    textAlign: 'left',
    fontSize: 25,
    color: '#696969',
    backgroundColor: 'transparent',
    paddingBottom: 10
  },
  cardTextSecondary: {
    textAlign: 'left',
    fontSize: 18,
    color: 'grey',
    backgroundColor: 'transparent'
  },
  cardTextTerciary: {
    textAlign: 'left',
    fontSize: 18,
    color: '#696969',
    backgroundColor: 'transparent',
    paddingTop: 10
  }
});

Props

Name	Type	Description	Default
cardList	Array	Data provided for each card
renderCard	Function	Renders a card with the data provided
cardHeight	Number	Height of the card in density-independent pixels
cardWidth	Number	Width of the card in density-independent pixels
cardRotation	Number	Maximum rotation of card in degrees when dragged
cardOpacity	Number	Minimum opacity of card when dragged (0-1)
onSwipeRight	Function	Function to execute when card is past rightSwipeThreshold
onSwipeLeft	Function	Function to execute when card is past leftSwipeThreshold
onSwipeUp	Function	Function to execute when card is past upSwipeThreshold
onSwipeDown	Function	Function to execute when card is past downSwipeThreshold
leftSwipeThreshold	Number	Maximum card can be moved left before triggering onSwipeLeft function
rightSwipeThreshold	Number	Maximum card can be moved right before triggering onSwipeRight function
upSwipeThreshold	Number	Maximum card can be moved up before triggering onSwipeUp function
downSwipeThreshold	Number	Maximum card can be moved down before triggering onSwipeDown function