Most useful animations for your react native app!

Usage no npm install needed!

<script type="module">
  import reactNativeCommonAnimations from '';


React native common animations

Most usage and most useful animations for your react native app


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


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

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

Overall API

duration int

Duration of animation

delay int

Delay before start animation.


Offset for animation.


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.