React-native-card-flip NPM

react-native-card-flip

Card flip animation for React Native

Installation

  npm install --save react-native-card-flip

Preview

App preview App preview2

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

App 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

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