Swipe Cards Deck for React Native

A swipping cards deck (similar to Tinder). This project is compatible with React Native 0.62+ (and probably older versions) & Expo projects (unlike others).

A package based on react-native-tinder-swipe-cards (unmaintained) project - with bug fixes and performance improvement using react's native driver.

We are planning in keeping this project alive for future react version and to expand it for better compatibility, design & performance.

Issues & PRs are welcome (for PRs check PR section at the bottom)

Note: There are 2 working modes, stack & cards, currently we can only gurantee the cards part of the project but we'll try to fix common problems in both modes. Stack mode is working OK in the latest version.

* Taken from our app swaplet.

If you liked our contribution, please try out swaplet - the free home exchange platform for Android and iOS.

We would love to get your feedback!

🎉 Version 0.3 is HERE! 🎉

There are major/breaking changes described in the readme, but they are for the better!

• Control over swipe sensitivity
• Better & more stable code
• Better props handling

We are very excited to get feedback from you...

Quick Start

1. npm i react-native-swipe-cards-deck
2. Import it import SwipeCards from "react-native-swipe-cards-deck"
3. Render it <SwipeCards ... />

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import SwipeCards from "react-native-swipe-cards-deck";

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

function StatusCard({ text }) {
  return (
    <View>
      <Text style={styles.cardsText}>{text}</Text>
    </View>
  );
}

export default function App() {
  const [cards, setCards] = useState();

  // replace with real remote data fetching
  useEffect(() => {
    setTimeout(() => {
      setCards([
        { text: "Tomato", backgroundColor: "red" },
        { text: "Aubergine", backgroundColor: "purple" },
        { text: "Courgette", backgroundColor: "green" },
        { text: "Blueberry", backgroundColor: "blue" },
        { text: "Umm...", backgroundColor: "cyan" },
        { text: "orange", backgroundColor: "orange" },
      ]);
    }, 3000);
  }, []);

  function handleYup(card) {
    console.log(`Yup for ${card.text}`);
    return true; // return false if you wish to cancel the action
  }
  function handleNope(card) {
    console.log(`Nope for ${card.text}`);
    return true;
  }
  function handleMaybe(card) {
    console.log(`Maybe for ${card.text}`);
    return true;
  }

  return (
    <View style={styles.container}>
      {cards ? (
        <SwipeCards
          cards={cards}
          renderCard={(cardData) => <Card data={cardData} />}
          keyExtractor={(cardData) => String(cardData.text)}
          renderNoMoreCards={() => <StatusCard text="No more cards..." />}
          actions={{
            nope: { onAction: handleNope },
            yup: { onAction: handleYup },
            maybe: { onAction: handleMaybe },
          }}
          hasMaybeAction={true}

          // If you want a stack of cards instead of one-per-one view, activate stack mode
          // stack={true}
          // stackDepth={3}
        />
      ) : (
        <StatusCard text="Loading..." />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  card: {
    justifyContent: "center",
    alignItems: "center",
    width: 300,
    height: 300,
  },
  cardsText: {
    fontSize: 22,
  },
});

Props (> v0.3)

Deprecated props (< v0.3)

Functions

Interfaces (> v0.3)

interface Action {
  show: boolean, // if to show the view when the action occur, this doesn't disable the action from happening!
  text: string, // for customizing the text in text-in-a-box default view of the action
  color: string, // for customizing the color of text-in-a-box default view of the action
  containerStyle: ViewProps.style, // customing the style of the animated container (the box of text-in-a-box view)
  textStyle: TextViewProps.style, // customing the style of the text in text-in-a-box view
  view: ReactElement, // when set, uses the custom view instead of the default text-in-a-box - takes priority on text/color
  onAction: function, // a function to handle on action fired, must return true if successful or false if failed
}

interface Actions {
  yup: Action,
  nope: Action,
  maybe: Action
}

// Unifying the property for nope/yup/maybe makes it easier & cleaner to apply
// These are the default values for actions prop
actions: {
  yup: { show: true, text: "Yup!", color: "green" },
  nope: { show: true, text: "Nope!", color: "red" },
  maybe: { show: true, text: "Maybe!", color: "orange" },
}

example of customizing actions prop:

const actions = {
  maybe: { show: false }, 
} // this will override the defaults value **ONLY** of maybe and will not show the text-in-a-box when triggered (but will show for yup/nope)

<SwipeCards
  cards={...}
  renderCard={...}
  keyExtractor={...}
  actions={actions}
  ...
  />

*required

PRs are welcome

Just stick with the git standards and implement a good code.

Please use branch prefix (fix/feature).

Contact me if you have questions...

Todo

• [X] Bug fixes from prev. project
• [ ] Get ideas from project
• [X] New gif example
• [X] Manual testing to check if all prev. features work with new react native versions
• [X] Fix stack mode
• [ ] Unit testing
• [X] Fix dragY not working
• [X] Fix iOS stack
• [ ] Refactor code to be cleaner - v3.0
• [ ] Move to typescript