react-native-gesture-flip-card

A pure javascript implementation of a flip card animation using gesture for React Native.

2022-03-16

1. Update example to use react-native 0.67.3
2. Use LogBox to ignore unnecessary warnings. (To use LogBox you need to upgrade react-native to at least 0.63 )

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

Method

<GestureFlipView
  ref={(ref) => (viewRef.current = ref)}
  gestureEnabled={enable}
  width={300}
  height={500}>
  {renderBack()}
  {renderFront()} />

viewRef.current.flipLeft();  // counterclockwise
viewRef.current.flipRight(); // clockwise