Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@newagebel/react-native-card-flip

NewAgeBel24MIT1.0.2TypeScript support: included

Card flip animation for React Native

react-native, flip, cards, card, rotate, deck, card-flip, flip-card, react-native-component

readme

react-native-card-flip

Card flip animation for React Native

contributions welcome npm version npm downloads

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

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