react-native-gesture-flip-card

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

2024-11-10

1. Create a new example app app and remove the old example
2. (Breaking change) renderBack and renderFront are passing through props instenad of passing by children.
3. (new) Add a argument in onFlipEnd function, it will return a boolean value(1: front and 0 for back) when the flip animation ended.
4. (new) Add a new props: onFaceChanged function, it will retrun a boolean value(1: front and 0 for back) when the face is changed.

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
  # or
  yarn add 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={renderBack}
    renderFront={renderFront}
    onFaceChanged={(face) => {
      // trigger when card face changed
      console.log('face changed:', face);
    }}
    onFlipEnd={(face) => {
      // trigger when flip animation ended
      console.log('on flip end:', face);
    }}
  />
</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 | | onFaceChanged | function | callback on face changed | false | |

Method

| name | description | args | | --------------------| --------------------------------| --------------------- | | flipLeft | flip the card counterclockwise | | | flipRight | flip the card clockwise | |

<GestureFlipView
  ref={(ref) => (viewRef.current = ref)}
  {...} // skip showing other props
/>

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