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.

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 :)