rnf

react-native-flip-component

Double-sided React component that flips 180 degrees

Showing:

Popularity

Downloads/wk

23

GitHub Stars

28

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

NameRequired?Description
isFlippedtrueBoolean that controls if the view is flipped.
frontViewtrueComponent for the front view.
backViewtrueComponent for the back view.
scalefalseControls if the view zooms in or out while flipping. Defaults to 0.8
scaleDurationfalseControls how quickly the scale changes. Defaults to 100
frontPerspectivefalseControls the perception of depth for the front component. Defaults to 1000
backPerspectivefalseControls the perception of depth for the back component. Defaults to 1000
rotateDurationfalseControls the duration of the rotation. Defaults to 300
containerStylesfalseStyles for the flip-component's container <View>. Defaults to null
frontStylesfalseStyles for the <Animated.View> that wraps the front component. Defaults to null
backStylesfalseStyles 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>
  }
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100