react-native-swipe-cards-deck v0.3.0

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)

* Major changes has been made to consolidate all yup/nope/maybe props to one object (actions props) for a cleaner code | Name | Type | Description | Default | v0.3 changes & notes | |-------------------|----------|--------------------------------------------------------------------------------|--------------|----------------------| | cards | Array | Data that will be provided as props for the cards | | | | renderCard | Function | Renders the card with the current data | | | | keyExtractor* | Function | Extracts the key for given card | | | | loop | Boolean | If true, start again when run out of cards | false | | | onLoop | Function | Called when card list returns to the beginning | | | | renderNoMoreCards | Function | Renders what is shown after swiped last card | | | | hasMaybeAction | Boolean | Includes the possibility to swipe up and its components | false | | | containerStyle | style | Override default style | | | | smoothTransition | Boolean | Disables a slow transition fading the current card out | false | | | cardKey | String | React key to be used to for each card | | | | dragY | Boolean | Allows dragging cards vertically | true | | | stack | Boolean | Enables the stack mode | false | | | stackDepth | Number | Limit number of cards showing in stack mode | no limit | | | stackOffsetX | Number | Horizontal offset between cards in stack | 25 | | | stackOffsetY | Number | Vertical offset between cards in stack | 0 | | | cardRemoved | Function | A callback passing the card reference that just got removed | | | | onClickHandler | Function | A callback clicking the card | alert('tap') | | | ✨ actions | Actions | Sets show, text, color, style, view for nope, yup, maybe actions | | Interface defined ⬇️ | | ✨ swipeThreshold | Number | Sets the sensitivity of the card swipping (until nope/yup/maybe) | 120 | new |

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

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