react-native-card-flip
Card flip animation for React Native
Installation
npm install --save react-native-card-flip
Preview
import CardFlip from 'react-native-card-flip'; <CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>AB</Text></TouchableOpacity>
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>CD</Text></TouchableOpacity>
</CardFlip>CardFlip
CardFlip props
| Props | type | description | required | default |
|---|---|---|---|---|
| style | object | container style | {} | |
| duration | number | flip duration | 1000 | |
| flipZoom | number | zoom level on flip | 0.09 | |
| flipDirection | string | the rotation axis. 'x' or 'y' | 'y' | |
| perspective | number | 800 |
CardFlip events
| Props | type | description |
|---|---|---|
| onFlip | func | function to be called when a card is fliped. it receives the card-sides index |
| onFlipStart | func | function to be called when the flip-animation starts. it receives the card-sides index |
| onFlipEnd | func | function to be called when the flip-animation ends. it receives the card-sides index |
CardStack actions
| Props | type | description | args | default |
|---|---|---|---|---|
| flip | func | Flips the card | ||
| tip | func | Flips the card | { direction, progress, duration } | { direction: 'left', progress: 0.05, duration: 150 } |
| jiggle | func | Jiggles the card | { count, duration, progress } | { count: 2, duration: 200, progress: 0.05 } |
jiggle
<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.jiggle({ count: 2, duration: 100, progress: 0.05 })} ><Text>AB</Text></TouchableOpacity>
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>CD</Text></TouchableOpacity>
</CardFlip>tip
<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.tip({ direction: 'right', duration: 150 })} ><Text>AB</Text></TouchableOpacity>
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>CD</Text></TouchableOpacity>
</CardFlip>CardFlip in map
{cards.map((item, index) => {
return (
<CardFlip style={ styles.cardContainer } ref={ (card) => this['card' + index] = card } >
<TouchableOpacity style={ styles.card } onPress={() => this['card' + index].flip()} ><Text>{item}</Text></TouchableOpacity>
<TouchableOpacity style={ styles.card } onPress={() => this['card' + index].flip()} ><Text>{item}</Text></TouchableOpacity>
</CardFlip>
)
})}