Card flip animation for React Native
![npm downloads](https://camo.githubusercontent.com/121cd029f466c05c93f4f35dcf47aee2a5d0217f0d03dfdec5152414dc357272/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f72656163742d6e61746976652d636172642d666c69702e737667)
npm install --save react-native-card-flip
![App preview2](https://github.com/screenshots/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 |
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 |
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 } |
![App jiggle](https://github.com/screenshots/jiggle.gif)
<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>
![App tip](https://github.com/screenshots/tip.gif)
<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>
{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>
)
})}