react-native-flip-card-plus

> The card component which has a motion of flip for React Native(Android/ios) with gestures

Installation

npm i react-native-flip-card-plus

Look and feel

Once you're up and running

Usage with single card

``
import React, { Component } from 'react';
import {
Text,
View,
Button,
StyleSheet,
TouchableOpacity,
Pressable,
} from 'react-native';
import FlipCard from "react-native-flip-card-plus";

export default class App extends Component {
constructor(props) {
super(props);
this.card = React.createRef();
}

render() {
return (

flipDirection={"h"}
style={styles.cardContainer}
ref={(card) => (this.card = card)}
onFlipStart={() => console.log('onFlipStart')}
onFlipEnd={() => console.log('onFlipEnd')}>
style={styles.card}
onLongPress={() => alert('onLongPress')}>
FRONT

alert('onPress')}>
BACK



style={styles.trigger}
onPress={() => this.card.flipHorizontal()}>
Horizontal

style={styles.trigger}
onPress={() => this.card.flipVertical()}>
Vetical



);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
cardContainer: {
width: 220,
height: 270,
},
card: {
width: 220,
height: 270,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FE474C',
borderRadius: 5,
shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.5,
},
label: {
textAlign: 'center',
fontSize: 25,
fontFamily: 'System',
color: '#ffffff',
backgroundColor: 'transparent',
},
manualTriggers: {
flexDirection: 'row',
},
trigger: {
backgroundColor: 'black',
margin: 20,
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 5,
shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.5,
},
});


`

Usage with multiple cards (MAP)

`
import React, { Component } from 'react';
import { Text, View, Button, StyleSheet, Pressable } from 'react-native';
import FlipCard from "react-native-flip-card-plus";

export default class App extends Component {
constructor(props) {
super(props);
this.multiCardRef = [];
this.state = {
cards: ['CARD1', 'CARD2'],
};
}

render() {
return (

{this.state.cards.map((item, index) => {
return (
<>
flipDirection={'h'}
style={styles.cardContainer}
onFlipStart={() => console.log('onFlipStart')}
onFlipEnd={() => console.log('onFlipEnd')}
ref={(card) => (this.multiCardRef['card' + index] = card)}>
style={styles.card}
onLongPress={() => alert('onLongPress')}>
{item} Front

alert('onPress')}>
{item} Back



style={styles.trigger}
onPress={() =>
this.multiCardRef['card' + index].flipHorizontal()
}>
Horizontal

style={styles.trigger}
onPress={() =>
this.multiCardRef['card' + index].flipVertical()
}>
Vetical



);
})}

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
cardContainer: {
width: 220,
height: 270,
},
card: {
width: 220,
height: 270,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FE474C',
borderRadius: 5,
shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.5,
},
label: {
textAlign: 'center',
fontSize: 25,
fontFamily: 'System',
color: '#ffffff',
backgroundColor: 'transparent',
},
manualTriggers: {
flexDirection: 'row',
},
trigger: {
backgroundColor: 'black',
margin: 20,
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 5,
shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.5,
},
});


``

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 | 'h' or 'v' | if swipeable | 'h' |
| perspective | number | | | 800 |
| flipHorizontal | function | Flip horizontal trigger | | |
| flipVertical | function | Flip vertical trigger | | |
| swipeable | bool | enable/disable gesture swipe | | true |

events

| Props | type | description |
| ----------------- | ------------- | --------------------------- |
| 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 |

Credits

Inspired by react-native-card-flip