react-native-flip v0.2.2

Install

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

:warning: 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>
  )
}

:wrench: Props

:camera: Screenhots

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.