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 you can animate using the Animated API. four components 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, . Which you will given as the first parameter of animated methods. Create a new Animated Value Object Assign the value to a this Object property in constructor. 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 …. _Contribute to nahidmbstu/RN-Animated development by creating an account on GitHub._github.com nahidmbstu/RN-Animated For Details , check out the doc … _The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses…_facebook.github.io Animated · React Native

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Native Animated Splash Screen :)

Too Long; Didn't Read

Company Mentioned

Mirthful Nahid

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Native Animated Splash Screen :)

Too Long; Didn't Read

Company Mentioned

Mirthful Nahid

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES