Card flip animation for React Native
![npm version](https://camo.githubusercontent.com/b5c37e395b25155c9cb018c6207b610403319598b93f7170b4299eff0f8fed6d/68747470733a2f2f62616467652e667572792e696f2f6a732f72656163742d6e61746976652d636172642d666c69702e737667)
npm install --save react-native-card-flip
![App preview2](https://github.com/animation2.gif)
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>
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 |
Props |
type |
description |
onFlip |
func |
function to be called when a card is fliped. it receives the card-sides index |
Props |
type |
description |
flip |
func |
Flips the card |
{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>
)
})}