lhandel / react-native-card-flip

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