React Native Animated Splash Screen :)

video

I am going to talk about my Animated Loading Screen in React Native and how you can build your own Loading screen using React Native Animated API with EASE .

There are tutorials which describe the animated API . So , I am not going talk about that. I will only talk about how i made my own animation using the animated API .

First, there are four components you can animate using the Animated API.

In my case, I wanted to animate a View, a Image inside another View.

To animate something, you need to do the following,

1 . An Animated Value.

Import Animated from react native. Then, Create a new Animated Value Object. Assign the value to a this Object property in constructor. Which you will given as the first parameter of animated methods.

2. Give a style Property to the animated Component

Let’s Move to main Topic, I wanted to animate these two animated component.

Animated.View

Animated.Image

If you don’t understand it, don’t worry . I will give the full code example.

To animate a Component, You need to give a style property to the Component , just like CSS . I have given two style :

truckStyle , scaleText

Now its time to define these styles. I used transform style for my cases and scaled it according to the animated value.

3 . Animated Methods and Don’t forget to start and stop them.

There are various methods that ships with the animated API.

They take two parameters. first: an Animated value , second: a configuration Objects

The most used are:

[Animated.timing(](https://facebook.github.io/react-native/docs/animated#timing))

[Animated.spring()](https://facebook.github.io/react-native/docs/animated#spring)

These two are kind independent. They are used with other animation methods like :

[Animated.parallel()](https://facebook.github.io/react-native/docs/animated#parallel)

[Animated.sequence()](https://facebook.github.io/react-native/docs/animated#sequence)

I only used the upper two in my cases. But you can combine them with the later two to create more dynamic beautiful animation.

I wanted to start the animated on screen render . so, in ComponentDidMount , I called them with the parameters . The configuration object must have toValue property. the other values are optional ….

At last , I have started the animation with start() method.

The, End Game, is like the video below. ( yes ! i am a Marvel fan too )

Thanks for reading …. the full code is below ….

nahidmbstu/RN-Animated_Contribute to nahidmbstu/RN-Animated development by creating an account on GitHub._github.com

For Details , check out the doc …

Animated · React Native_The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses…_facebook.github.io