CD2H gitForager

Yipit/react-native-tinder-swipe-cards

Name: react-native-tinder-swipe-cards

Owner: Yipit

Description: Tinder-like swipe cards for your React Native app

Created: 2017-07-28 17:57:35.0

Updated: 2017-08-30 18:36:09.0

Pushed: 2018-01-30 01:40:41.0

Homepage: null

Size: 3819

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Swipe Cards for React Native

A package based on @brentvatne's awesome example.

React Native Swipe Cards

Quick Start

npm install --save react-native-swipe-cards
Create a module e.g. SwipeCards.js
Import it import SwipeCards from './SwipeCards.js'
Render it <SwipeCards style={{flex: 1}} />

wipeCards.js
 strict';

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

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

Card = React.createClass({
nder() {
return (
  <View style={[styles.card, {backgroundColor: this.props.backgroundColor}]}>
    <Text>{this.props.text}</Text>
  </View>
)



s NoMoreCards extends Component {
nstructor(props) {
super(props);


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



t Cards = [
ext: 'Tomato', backgroundColor: 'red'},
ext: 'Aubergine', backgroundColor: 'purple'},
ext: 'Courgette', backgroundColor: 'green'},
ext: 'Blueberry', backgroundColor: 'blue'},
ext: 'Umm...', backgroundColor: 'cyan'},
ext: 'orange', backgroundColor: 'orange'},


rt default React.createClass({
tInitialState() {
return {
  cards: Cards
}

ndleYup (card) {
console.log(`Yup for ${card.text}`)

ndleNope (card) {
console.log(`Nope for ${card.text}`)

ndleMaybe (card) {
console.log(`Maybe for ${card.text}`)

nder() {
// If you want a stack of cards instead of one-per-one view, activate stack mode
// stack={true}
return (
  <SwipeCards
    cards={this.state.cards}

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

    handleYup={this.handleYup}
    handleNope={this.handleNope}
    handleMaybe={this.handleMaybe}
    hasMaybeAction
  />
)



t styles = StyleSheet.create({
rd: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 300,

MoreCardsText: {
fontSize: 22,

More complex example

 strict';

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


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

Card = React.createClass({
nder() {
return (
  <View style={styles.card}>
    <Image style={styles.thumbnail} source={{uri: this.props.image}} />
    <Text style={styles.text}>This is card {this.props.name}</Text>
  </View>
)



NoMoreCards = React.createClass({
nder() {
return (
  <View style={styles.noMoreCards}>
    <Text>No more cards</Text>
  </View>
)



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


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


rt default React.createClass({
tInitialState() {
return {
  cards: Cards,
  outOfCards: false
}

ndleYup (card) {
console.log("yup")

ndleNope (card) {
console.log("nope")

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

let 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
    })
  }

}


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

    renderCard={(cardData) => <Card {...cardData} />}
    renderNoMoreCards={() => <NoMoreCards />}
    showYup={true}
    showNope={true}

    handleYup={this.handleYup}
    handleNope={this.handleNope}
    cardRemoved={this.cardRemoved}
  />
)



t styles = StyleSheet.create({
rd: {
alignItems: 'center',
borderRadius: 5,
overflow: 'hidden',
borderColor: 'grey',
backgroundColor: 'white',
borderWidth: 1,
elevation: 1,

umbnail: {
flex: 1,
width: 300,
height: 300,

xt: {
fontSize: 20,
paddingTop: 10,
paddingBottom: 10

MoreCards: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',

Props

*required

Todo (PRs welcome!)

[ ] Show next card underneath current card
[ ] Shadow when card is being dragged
[ ] Example with backend
[ ] Example with polaroids
[ ] Submit to repos
[x] renderYup
[x] renderNope
[ ] Testing
[ ] Add more args to cardRemoved?
[ ] class extends all components

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.