README
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
npm i react-native-swipe-cards-deck- Import it
import SwipeCards from "react-native-swipe-cards-deck" - 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)
| Name | Type | Description | Default | v0.3 changes & notes |
|---|---|---|---|---|
| ⚠️ showYup | Boolean | Shows the 'Yup' component | true |
use actions instead |
| ⚠️ showNope | Boolean | Shows the 'Nope' | true |
use actions instead |
| ⚠️ showMaybe | Boolean | Shows the 'Maybe' | true |
use actions instead |
| ⚠️ renderYup | Function | Renders Yup | use actions instead |
|
| ⚠️ renderNope | Function | Renders Nope | use actions instead |
|
| ⚠️ renderMaybe | Function | Renders Maybe | use actions instead |
|
| ⚠️ handleYup | Function | Called when card is 'passed' with that card's data, returns true for success | use actions instead |
|
| ⚠️ handleNope | Function | Called when card is 'rejected' with that card's data, returns true for success | use actions instead |
|
| ⚠️ handleMaybe | Function | Called when card is 'maybe' with that card's data, returns true for success | use actions instead |
|
| ⚠️ yupStyle | style | Override default style | use actions instead |
|
| ⚠️ yupTextStyle | style | Override default style | use actions instead |
|
| ⚠️ nopeStyle | style | Override default style | use actions instead |
|
| ⚠️ nopeTextStyle | style | Override default style | use actions instead |
|
| ⚠️ maybeStyle | style | Override default style | use actions instead |
|
| ⚠️ maybeTextStyle | style | Override default style | use actions instead |
|
| ⚠️ yupView | element | React component to render on a Yes vote | use actions instead |
|
| ⚠️ yupText | string | Text to render on Yes vote | Yep |
use actions instead |
| ⚠️ nopeView | element | React component to render on a No vote | use actions instead |
|
| ⚠️ nopeText | string | Text to render on No vote | Nope |
use actions instead |
| ⚠️ maybeView | element | React component to render on a Maybe vote | use actions instead |
|
| ⚠️ maybeText | string | Text to render on Maybe vote | Maybe |
use actions instead |
Functions
| Name | Description | Arguments | Return value | v0.3 changes & notes |
|---|---|---|---|---|
| ⚠️ _forceRightSwipe | Fires swipe right animation | deprecated | ||
| ⚠️ _forceLeftSwipe | Fires swipe left animation | deprecated | ||
| ⚠️ _forceUpSwipe | Fires swipe up animation | deprecated | ||
| ✨ swipeMaybe | Fires swipe maybe action | new | ||
| ✨ swipeYup | Fires swipe yup action | new | ||
| ✨ swipeNope | Fires swipe nope action | new |
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...