rnf
react-native-flip-card-view
npm i react-native-flip-card-view
rnf

react-native-flip-card-view

An animated flip card component for React Native

by Yasemin Cidem

0.0.6 (see all)License:ISCTypeScript:Not Found
npm i react-native-flip-card-view
Readme

react-native-flip-card-view

The purpose of application is to flip view between front page and back page for react native.

Installation

npm install --save react-native-flip-card-view

Demo

Example

import React, {Component} from "react";
import {View,Text} from "react-native";
import FlipCard from "react-native-flip-card-view"

export default class Demo extends Component {
  render = () => {
    return (
      <FlipCard style={{flex: 1}}
                    velocity={2} // Velocity makes it move
                    tension={5} // Slow
                    friction={1} // Oscillate a lot
                    renderFront={this._renderFront()} 
                    renderBack={this._renderBack()}/>
    );
  };
  //Desired screen view method in front page
  _renderFront() {
        return (
            <View style={{backgroundColor: 'red',flex:1,height:100}}>
                <Text>Hello front page</Text>
            </View>);
    }
  //Desired screen view method in back page
    _renderBack() {
        return (
            <View style={{backgroundColor: 'blue',flex:1,height:100}}>
                <Text>Hello back page</Text>
            </View>);
    }
 
}

Downloads/wk

4

GitHub Stars

0
No data available

LAST COMMIT

NaNyrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
No data available
VersionTagPublished
0.0.6
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial