react-native-card-flip
Card flip animation for React Native


Installation
``
npm install --save react-native-card-flip
`
Preview
!
App preview!
App preview2`javascript
import CardFlip from 'react-native-card-flip';
`
`javascript
this.card = card} >
this.card.flip()} >AB
this.card.flip()} >CD
`
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 }|
$3
!
App jiggle`
javascript
this.card = card} >
this.card.jiggle({ count: 2, duration: 100, progress: 0.05 })} >AB
this.card.flip()} >CD
`
$3
!App tip
`
javascript
this.card = card} >
this.card.tip({ direction: 'right', duration: 150 })} >AB
this.card.flip()} >CD
`
CardFlip in map
`
javascript
{cards.map((item, index) => {
return (
this['card' + index] = card } >
this['card' + index].flip()} >{item}
this['card' + index].flip()} >{item}
)
})}
``