Skip to content
Completely customizable tinder-like card swiper for React Native
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
actions.js
animator.js
card.js
index.js
package.json

README.md

Swiper

This is one of our open source screens from React Screens. If you like the work we do, consider subscribing :)

Read the blog post on how this was made if you need any help.

Preview

Scan the QR code with Expo, or click here if on your device to play around with a demo.

QR code

Install

npm install @reactscreens/swiper --save

Swiper

import Swiper from '@reactscreens/swiper';

//Use our default card and actions if you like
import Card from '@reactscreens/swiper/card';
import Actions from '@reactscreens/swiper/actions';


...

export default () => (
  <Swiper
    onTossLeft={card => console.log(card, 'tossed left')}
    onTossRight={card => console.log(card, 'tossed right')}
    actionsBar={toss => <Actions toss={toss} />}
  >
    <Card
      image="http://betterjs.org/www/images/tweets_js_love/last_thing_you_gonna_see.jpg"
      title="Bob, 20"
      subTitle="Engineer"
    />
    <Card
      image="http://betterjs.org/www/images/tweets_js_love/last_thing_you_gonna_see.jpg"
      title="James, 20"
      subTitle="Engineer"
    />
    <Card
      image="https://scontent-mia1-1.xx.fbcdn.net/v/t31.0-8/12525677_951915328178313_3843304291619308173_o.jpg?oh=04ad477ea548b7d267d59aac4d3763a6&amp;oe=59B44E26"
      title="Dominic, 20"
      subTitle="Engineer"
    />
  </Swiper>
)

Performance

Currently all children are rendered initially, so don't try rendering a huge list of cards at a time.

More information coming soon! Yes, we need tests and more performance improvements :)

You can’t perform that action at this time.