npm npm

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.