react-native-flip-component

Installation

npm install react-native-flip-component --save

Instructions

Pass a boolean, front component, and back component as props. The boolean will determine if the front or back component should be displayed.

Demo

To see the code from this GIF, check out example.js in the repo on GitHub.

Props

Name | Required? | Description ---- | ----------|-------- isFlipped | true | Boolean that controls if the view is flipped. frontView | true | Component for the front view. backView | true | Component for the back view. scale | false | Controls if the view zooms in or out while flipping. Defaults to 0.8 scaleDuration | false | Controls how quickly the scale changes. Defaults to 100 frontPerspective | false | Controls the perception of depth for the front component. Defaults to 1000 backPerspective | false | Controls the perception of depth for the back component. Defaults to 1000 rotateDuration | false | Controls the duration of the rotation. Defaults to 300 containerStyles | false | Styles for the flip-component's container <View>. Defaults to null frontStyles | false | Styles for the <Animated.View> that wraps the front component. Defaults to null backStyles | false | Styles for the <Animated.View> that wraps the back component. Defaults to null

Example

import React, { Component } from 'react';
import FlipComponent from 'react-native-flip-component';
import { View, Button, Text } from 'react-native';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFlipped: false;
    };
  }
  render() {
    <View>
      <FlipComponent
        isFlipped={this.state.isFlipped}
        frontView={
          <View>
            <Text style={{ textAlign: 'center' }}>
              Front Side
            </Text>
          </View>
        }
        backView={
          <View>
            <Text style={{ textAlign: 'center' }}>
              Back Side
            </Text>
          </View>
        }
      />
      <Button
        onPress={() => {
          this.setState({ isFlipped: !this.state.isFlipped })
        }}
        title="Flip"
      />
    </View>
  }
}