The card component which has a motion of flip for React Native(iOS/Android)
JavaScript Objective-C Python Java
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
doc update README Feb 10, 2016
example depreacte flippend Aug 13, 2017
lib #46 Back side on IOS is blured Oct 9, 2017
test add settings Jan 23, 2016
.gitignore add gitignore Feb 18, 2017
.npmignore add .npmignore Apr 29, 2017
LICENSE add settings Jan 23, 2016
README.md Update README.md Sep 24, 2017
index.js add source Jan 23, 2016
package.json 3.5.2 Oct 15, 2017
yarn.lock Support for React 16 & RN 0.46 Jul 27, 2017

README.md

react-native-flip-card

The card component which have motion of flip for React Native(iOS/Android)

NPM

npmnpm

js-standard-style forthebadge

Demo

Installation

in Cli

npm i react-native-flip-card

Usage

Simple

import FlipCard from 'react-native-flip-card'

<FlipCard>
  {/* Face Side */}
  <View style={styles.face}>
    <Text>The Face</Text>
  </View>
  {/* Back Side */}
  <View style={styles.back}>
    <Text>The Back</Text>
  </View>
</FlipCard>

Customized

<FlipCard 
  style={styles.card}
  friction={6}
  perspective={1000}
  flipHorizontal={true}
  flipVertical={false}
  flip={false}
  clickable={true}
  onFlipEnd={(isFlipEnd)=>{console.log('isFlipEnd', isFlipEnd)}}
>
  {/* Face Side */}
  <View style={styles.face}>
    <Text>The Face</Text>
  </View>
  {/* Back Side */}
  <View style={styles.back}>
    <Text>The Back</Text>
  </View>
</FlipCard>

Props

flip(bool) Default: false

If you change default display side, you can set true to this param. If you change side, you can pass bool variable dynamically.

clickable(bool) Default: true

If you want to disable click a card, you can set false to this param.

friction(number) Default: 6

The friction of card animation

perspective(number) Default: 0

The amount of perspective applied to the flip transformation

flipHorizontal(bool) Default: false

If you set true, a card flip to horizontal.

flipVertical(bool) Default: true

If you set false, a card not flip to vertical. If you set true both flipHorizontal and flipVertical , a card flip to diagonal.

vertical diagnoal

onFlipStart(function) (isFlipStart) => {}

When a card starts a flip animation, call onFlipEnd function with param.

onFlipEnd(function) (isFlipEnd) => {}

When a card finishes a flip animation, call onFlipEnd function with param.

alignHeight(boolean) Default:false

If you pass true to alignHeight param, the card keep height of bigger side.

alignWidth(boolean) Default:false

If you pass true to alignWidth param, the card keep width of bigger side.

useNativeDriver(boolean) Default:false

If you pass true to useNativeDriver param, the card animation will utilize the native driver.

Credits

Inspired by react-flipcard

License

MIT