11

Flip card animation using gesture for React Native

 4 years ago
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.
neoserver,ios ssh client
Flip

Flip card animation using gesture for React Native

Mar 09, 2021 1 min read

react-native-gesture-flip-card

flip card animation using gesture for React Native.

Installation

  npm install --save react-native-gesture-flip-card

Simple Preview

example_1
example_2

Minimal Usage

import GestureFlipView from 'react-native-gesture-flip-card';
JavaScript
<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>
  );
};
JavaScript

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>
JavaScript
this.flipView.doFlip(1)  // counterclockwise
this.flipView.doFlip(-1) // clockwise
JavaScript

GitHub

A card flipping animation component using gesture for react-native. — Read More

Latest commit to the master branch on 3-12-2021
Download as zip

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK