react-native-card-flip
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

react-native-card-flip

Card flip animation for React Native

contributions welcome npm version

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

Package Sidebar

Install

npm i react-native-card-flip

Weekly Downloads

2,757

Version

1.0.7

License

MIT

Unpacked Size

15.6 kB

Total Files

6

Last publish

Collaborators

  • lhandel