React Native Reanimated Flip Card

Install

yarn add react-native-flip
# or
npm i react-native-flip

⚠️ You need to install react-native-reanimated and follow their installation instructions.

Usage

import FlipCard from "react-native-flip"

const make = () => {
  const Front = (
    <View
      style={{
        backgroundColor: "#ed8936",
        alignItems: "center",
        padding: 100,
        borderRadius: 12,
      }}
    >
      <Text style={{ fontSize: 18, color: "black" }}>Front</Text>
      <TouchableOpacity
        onPress={changeSide}
        style={{
          padding: 10,
          marginTop: 20,
          backgroundColor: "white",
          borderRadius: 12,
        }}
      >
        <Text>Click here to Flip</Text>
      </TouchableOpacity>
    </View>
  )
  const Back = (
    <View
      style={{
        backgroundColor: "#007AFF",
        alignItems: "center",
        padding: 100,
        borderRadius: 12,
      }}
    >
      <Text style={{ fontSize: 18, color: "white" }}>Back</Text>
      <TouchableOpacity
        onPress={changeSide}
        style={{
          padding: 10,
          marginTop: 20,
          backgroundColor: "white",
          borderRadius: 12,
        }}
      >
        <Text>Click here to Flip</Text>
      </TouchableOpacity>
    </View>
  )
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.textStyle}>Hello, World</Text>
      <Text style={styles.textStyle}>React Native Reanimated Flip Card</Text>
      <Button
        title={`Change rotation. The card rotation is: ${rotate}`}
        onPress={() => {
          setRotate((rotation) => (rotation === "X" ? "Y" : "X"))
        }}
      />
      <Button title={`Flip: ${side}`} onPress={changeSide} />
      <FlipCard
        side={side}
        rotate={rotate}
        style={styles.flipContainer}
        front={Front}
        back={Back}
      />
    </SafeAreaView>
  )
}

🔧 Props

Name	Description	Required	Type	Default
perspective	Perspective of rotation	NO	Number	1200
side	A value indicating Front(1) or Back(0)	YES	<1, 0>	-
rotate	A value indicating the axis of rotation	NO	<'Y', 'X'>	"Y"
style	Container Style	NO	ViewStyle	-
front	React component in Front Side	YES	React.Element	-
back	React component in Back Side	YES	React.Element	-

📷 Screenhots

iOS	Android

Try it out

You can also try out the example app with Expo.

You can also try the React Native App.

The source code for the example app is under /examples folder.