The card component which have motion of flip for React Native
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}
flipHorizontal={true}
flipVertical={false}
flipped={false}
clickable={true}
onFlipped={(isFlipped)=>{console.log('isFlipped', isFlipped)}}
>
{/* 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 want to disable click a card, you can set false to this param.
The friction of card animation
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.
When a card finish a flip animation, call onFlipped function with param.
Inspired by react-flipcard
MIT