React native common animations

Most usage and most useful animations for your react native app

Installing

npm install react-native-common-animations --save
- or -
yarn add react-native-common-animations

Usage

import React from 'react';
import { Countdown, FadeIn, FadeOut, PopIn, Tada } from 'react-native-common-animations';

export default class Example extends React.Component
{
    render() {
        return (
            <View>
                <Countdown go={true} text={ {show : true , style : { color: 'rgba(0,0,0,0.3)' } } } colors={{ stroke: ['#ff0844', '#ffb199'], outline: '#f7f7f7'}} start={Date.now()} end={Date.now()+5000} borderWidth={4} radius={50} />
                <FadeIn offsetY={30} duration={500}>
                    <View>
                        <Text>{'FadeIn'}</Text>
                    </View>
                </FadeIn>
                <FadeOut offsetY={-15} opacity={1} delay={2} duration={5}>
                    <View>
                        <Text>{'FadeOut'}</Text>
                    </View>
                </FadeOut>
                <PopIn duration={500} animate={true}>
                    <View>
                        <Text>{'PopIn'}</Text>
                    </View>
                </PopIn>
                <Tada delay={1000} duration={500}>
                    <View>
                        <Text>{'Tada'}</Text>
                    </View>
                </Tada>
            </View>
        );
    }
}

Overall API

duration int

Duration of animation

delay int

Delay before start animation.

offsetY

Offset for animation.

opacity

Opacity of elements.

animate [true|false]

Do you wanna animate?

API for Countdown

go [true|false]

Showing text go after time ended.

text [{show:[true|false],style:[{}]}]

Showing text over the circle.

colors [{stroke:[],outline:''}]

Colors of countdown.

start|end timestamp

Time from to.

borderWidth int

Your border width for countdown.

radius int

Your radius size for countdown.

from|to int

If you don't want to use circle you can use from to params. For this param you should use type text.

type [text|int]

Type of count down.