Basic Animations using React Native

What are Animations ?
Animations are most important & integral part of any application because they make it more impressive, interactive & more appealing to the end user.

In React Native, I prefer to use third party library which provides different types of animations over there.

Similarly, will see JSON Animations as well.

Firstly, we have to install react-native-animatable for animations.

npm install react-native-animatable — save

react-native-animatable

Secondly, we have to install lottie-react-native for JSON animations.

npm install lottie-react-native

lottie-react-native

Lastly, we have to install react-native-responsive-screen for Responsiveness.

npm install react-native-responsive-screen

react-native-responsive-screen

Now, We will see an example how it works:
There will be 3 Screens:
1. Splash Screen
2. JSON Animation Screen
3. Login Screen with Animations

Let’s dive into the Javascript Code:

1. Splash.js

2. AppBtn.js

3. GetStarted.js

4. Login.js

Now, we’ll navigate all the screens using React Navigation.

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Install Stack Navigator using React Navigation.

npm install @react-navigation/stack

5. App.js

Example

If you enjoyed this article, please recommend and share it ! Thanks for your time🙏.