Tinder Cards for React Native
LOOKING FOR CONTRIBUTORS. I'm not currently using this in any active projects. If anyone wants to be added, please write me.
A package based on @brentvatne's awesome example, based in turn on the Tinder swipe interface.
Quick Start
npm install --save react-native-swipe-cards
- Create a module e.g.
Tinder.js
- Import it
import Tinder from './Tinder.js'
- Render it
<Tinder style={{flex: 1}} />
// Tinder.js'use strict'; ; ; let Card = React const 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' const styles = StyleSheet
More complex example
'use strict'; ; ; let Card = React let NoMoreCards = React 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' 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 |
renderNoMoreCards | Function | Renders what is shown after swiped last card | |
showYup | Boolean | Shows the 'Yup' component | true |
showNope | Boolean | Shows the 'Nope' | true |
renderYup | Function | Renders Yup | true |
renderYup | Function | Renders Nope | true |
handleYup | Function | Called when card is 'passed' with that card's data | |
handleNope | Function | Called when card is 'rejected' with that card's data |
*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