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}

)
})}
``