Install

``sh
yarn add react-native-flip


or

`js
import FlipCard from "react-native-flip"

const make = () => {
const Front = (
style={{
backgroundColor: "#ed8936",
alignItems: "center",
padding: 100,
borderRadius: 12,
}}
>
Front
onPress={changeSide}
style={{
padding: 10,
marginTop: 20,
backgroundColor: "white",
borderRadius: 12,
}}
>
Click here to Flip


)
const Back = (
style={{
backgroundColor: "#007AFF",
alignItems: "center",
padding: 100,
borderRadius: 12,
}}
>
Back
onPress={changeSide}
style={{
padding: 10,
marginTop: 20,
backgroundColor: "white",
borderRadius: 12,
}}
>
Click here to Flip


)
return (

Hello, World
React Native Reanimated Flip Card
title={Change rotation. The card rotation is: ${rotate}}
onPress={() => {
setRotate((rotation) => (rotation === "X" ? "Y" : "X"))
}}
/>
Flip: ${side}} onPress={changeSide} />
side={side}
rotate={rotate}
style={styles.flipContainer}
front={Front}
back={Back}
/>

)
}
``

:wrench: 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 | - |

:camera: 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.