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