react-native-gesture-flip-card
![npm version](https://camo.githubusercontent.com/a23b4027a5e2630cfde0433377f573f14815ab0f5db118808a3851bf9c5f13cb/68747470733a2f2f62616467652e667572792e696f2f6a732f72656163742d6e61746976652d676573747572652d666c69702d636172642e737667)
A pure javascript implementation of a flip card animation using gesture for React Native.
- Update example to use react-native 0.67.3
- Use
LogBox
to ignore unnecessary warnings. (To use LogBox
you need to upgrade react-native to at least 0.63 )
npm install --save react-native-gesture-flip-card
![App preview](https://github.com/screenshots/example_2.gif)
import GestureFlipView from 'react-native-gesture-flip-card';
<View style={styles.container}>
<GestureFlipView width={300} height={500}>
{renderBack()}
{renderFront()}
</GestureFlipView>
</View>
const renderFront = () => {
return (
<View style={styles.frontStyle}>
<Text style={{fontSize: 25, color: '#fff'}}>{'Front'}</Text>
</View>
);
};
const renderBack = () => {
return (
<View style={styles.backStyle}>
<Text style={{fontSize: 25, color: '#fff'}}>{'Back'}</Text>
</View>
);
};
Props |
type |
description |
required |
default |
width |
number |
width of view |
true |
|
height |
number |
height of view |
true |
|
onFlipEnd |
function |
callback on end of flip |
false |
|
perspective |
number |
perspective of the view |
false |
-1000 |
gestureEnabled |
bool |
enable or disable gestures |
false |
true |
name |
description |
args |
flipLeft |
flip the card counterclockwise |
|
flipRight |
flip the card clockwise |
|
<GestureFlipView
ref={(ref) => (viewRef.current = ref)}
gestureEnabled={enable}
width={300}
height={500}>
{renderBack()}
{renderFront()} />
viewRef.current.flipLeft(); // counterclockwise
viewRef.current.flipRight(); // clockwise