React Native Animated Loading 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()

Animated.spring()

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

Animated.parallel()

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

For Details , check out the doc …

Animated · React Native