Card flip animation for React Native

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>
  )
})}

GitHub