Swipe Cards for React Native
Maintained Version of @meteor-factory's package.
Quick Start
npm install --save react-native-swipeable-cards
- Create a module e.g.
SwipeCards.js
- Import it
import SwipeCards from 'react-native-swipeable-cards'
- 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 /> onSwipeRight=thishandleYup onSwipeLeft=thishandleNope onSwipeUp=thishandleMaybe hasMaybeAction /> } const styles = StyleSheet
More complex example
'use strict'; ;; ; { superprops; } { return <View style=stylescard> <Image style=stylesthumbnail source=uri: thispropsimage /> <Text style=stylestext>This is card thispropsname</Text> <Button type='outline' title='Nah' style=SwipeStylesrejectButton onPress= { thispropsswiper } /> </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 ref = thisswiper = swiper loop=false renderCard= <Card swiper=thisswiper ...cardData /> renderNoMoreCards= <NoMoreCards /> showRightOverlay=true showLeftOverlay=true stackDepth=3 stack=true keyExtractor= { return cardname } onSwipeRight=thiscardSwipedRight onSwipeLeft=thiscardSwipedLeft cardRemoved= this /> } 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 | |
showRightOverlay | Boolean | Shows the 'Right Overlay' component | true |
showLeftOverlay | Boolean | Shows the 'Left Overlay' | true |
showUpOverlay | Boolean | Shows the 'Up Overlay' | true |
swipeUp | Boolean | Includes the possibility to swipe up and its components | false |
renderRightOverlay | Function | Renders the Right Overlay | |
renderLeftOverlay | Function | Renders Left Overlay | |
renderUpOverlay | Function | Renders Up Overlay | |
onSwipeRight | Function | Called when card is 'passed' with that card's data | |
onSwipeLeft | Function | Called when card is 'rejected' with that card's data | |
containerStyle | style | Override default style | |
overlayRightWrapper | style | Override default style | |
overlayRightTextStyle | style | Override default style | |
overlayLeftWrapper | style | Override default style | |
overlayLeftTextStyle | style | Override default style | |
overlayUpWrapper | style | Override default style | |
overlayUpTextStyle | style | Override default style | |
overlayRight | element | React component to render on a Yes vote | |
overlayRightText | string | Text to render on Yes vote | Like |
overlayLeft | element | React component to render on a No vote | |
overlayLeftText | string | Text to render on No vote | Nope |
overlayUp | element | React component to render on a Maybe vote | |
overlayUpText | 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 |
stackDepth | Number | Number of Cards for Stack to Container | 5 |
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') |
keyExtractor | Function | Callback to set Key prop on card | key = index |
rotation | Boolean | Disable card rotation during swipe | True |
*required
Todo (PRs welcome!)
- Show next card underneath current card
- Add more args to
cardRemoved
? - Update ReadMe