Swipe Cards for React Native
A package based on @brentvatne's awesome example.
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}} />
// SwipeCards.js'use strict'; ;; ; Component { superprops; } { return <View style=stylescard backgroundColor: thispropsbackgroundColor> <Text>thispropstext</Text> </View> } { superprops; } { return <View> <Text style=stylesnoMoreCardsText>No more cards</Text> </View> } Component { superprops; thisstate = cards: text: 'Tomato' backgroundColor: 'red' text: 'Aubergine' backgroundColor: 'purple' text: 'Courgette' backgroundColor: 'green' text: 'Blueberry' backgroundColor: 'blue' text: 'Umm...' backgroundColor: 'cyan' text: 'orange' backgroundColor: 'orange' ; } { console } { console } { console } { // If you want a stack of cards instead of one-per-one view, activate stack mode // stack={true} return <SwipeCards cards=thisstatecards renderCard= <Card ...cardData /> renderNoMoreCards= <NoMoreCards /> handleYup=thishandleYup handleNope=thishandleNope handleMaybe=thishandleMaybe hasMaybeAction /> } const styles = StyleSheet
More complex example
'use strict'; ;; ; Component { superprops; } { return <View style=stylescard> <Image style=stylesthumbnail source=uri: thispropsimage /> <Text style=stylestext>This is card thispropsname</Text> </View> } Component { superprops; } { return <View style=stylesnoMoreCards> <Text>No more cards</Text> </View> } const cards = name: '1' image: 'https://media.giphy.com/media/GfXFVHUzjlbOg/giphy.gif' name: '2' image: 'https://media.giphy.com/media/irTuv1L1T34TC/giphy.gif' name: '3' image: 'https://media.giphy.com/media/LkLL0HJerdXMI/giphy.gif' name: '4' image: 'https://media.giphy.com/media/fFBmUMzFL5zRS/giphy.gif' name: '5' image: 'https://media.giphy.com/media/oDLDbBgf0dkis/giphy.gif' name: '6' image: 'https://media.giphy.com/media/7r4g8V2UkBUcw/giphy.gif' name: '7' image: 'https://media.giphy.com/media/K6Q7ZCdLy8pCE/giphy.gif' name: '8' image: 'https://media.giphy.com/media/hEwST9KM0UGti/giphy.gif' name: '9' image: 'https://media.giphy.com/media/3oEduJbDtIuA2VrtS0/giphy.gif' const cards2 = name: '10' image: 'https://media.giphy.com/media/12b3E4U9aSndxC/giphy.gif' name: '11' image: 'https://media4.giphy.com/media/6csVEPEmHWhWg/200.gif' name: '12' image: 'https://media4.giphy.com/media/AA69fOAMCPa4o/200.gif' name: '13' image: 'https://media.giphy.com/media/OVHFny0I7njuU/giphy.gif' Component { superprops; thisstate = cards: cards outOfCards: false } { console } { console } { console; let CARD_REFRESH_LIMIT = 3 if thisstatecardslength - index <= CARD_REFRESH_LIMIT + 1 console; if !thisstateoutOfCards console this } { return <SwipeCards cards=thisstatecards loop=false renderCard= <Card ...cardData /> renderNoMoreCards= <NoMoreCards /> showYup=true showNope=true handleYup=thishandleYup handleNope=thishandleNope cardRemoved=thiscardRemoved /> } const styles = StyleSheet
Props
Props name | Type | Description | Default |
---|---|---|---|
cards* | Array | Data that will be provided as props for the cards | |
renderCard* | Function | Renders the card with the current data | |
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 | |
showYup | Boolean | Shows the 'Yup' component | true |
showNope | Boolean | Shows the 'Nope' | true |
showMaybe | Boolean | Shows the 'Maybe' | true |
hasMaybeAction | Boolean | Includes the possibility to swipe up and its components | false |
renderYup | Function | Renders Yup | |
renderNope | Function | Renders Nope | |
renderMaybe | Function | Renders Maybe | |
handleYup | Function | Called when card is 'passed' with that card's data | |
handleNope | Function | Called when card is 'rejected' with that card's data | |
containerStyle | style | Override default style | |
yupStyle | style | Override default style | |
yupTextStyle | style | Override default style | |
nopeStyle | style | Override default style | |
nopeTextStyle | style | Override default style | |
maybeStyle | style | Override default style | |
maybeTextStyle | style | Override default style | |
yupView | element | React component to render on a Yes vote | |
yupText | string | Text to render on Yes vote | Yep |
noView | element | React component to render on a No vote | |
noText | string | Text to render on No vote | Nope |
maybeView | element | React component to render on a Maybe vote | |
maybeText | string | Text to render on Maybe vote | Maybe |
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 |
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') |
*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
- renderYup
- renderNope
- Testing
- Add more args to
cardRemoved
? -
class extends
all components