react-native-gesture-flip-card
1.0.6 • Public • Published
react-native-gesture-flip-card
flip card animation using gesture for React Native
Installation
npm install --save react-native-gesture-flip-card
Simple Preview
Minimal Usage
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>
);
};
Detail
Props
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 |
Method
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
Package Sidebar
Install
npm i react-native-gesture-flip-card
Weekly Downloads