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

npm i react-native-flip-card

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>

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

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

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

The friction of card animation

The amount of perspective applied to the flip transformation

If you set true, a card flip to horizontal.

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

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

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

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

Inspired by react-flipcard

MIT