Flip card animation using gesture for React Native
source link: https://reactnativeexample.com/flip-card-animation-using-gesture-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Flip card animation using gesture for React Native
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
perspective number perspective of the view
-1000
Method
name description args doFlip flip the card number: 1 or -1<GestureFlipView ref={(ref) => this.flipView = ref}
width={300} height={500}>
{renderBack()}
{renderFront()}
</GestureFlipView>
this.flipView.doFlip(1) // counterclockwise
this.flipView.doFlip(-1) // clockwise
GitHub
A card flipping animation component using gesture for react-native. — Read More
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK