- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding an animated loader and splash screen in a React Native app
In this article, we will see how to implement a Lottie animation in a React Native app. Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Lottie animations are mainly used for loader screen or as a start screen.
So, let's add a Lottie animation to our React Native mobile app.
Example
Go to the official Lottie animation website and download Lottie JSON.
Link to animation that I am going to use −
https://lottiefiles.com/74546-character-02# /
Name the JSON file "myloader.json" and keep it at the same level as App.js.
Now install the lottie-react-native package
npm i --save lottie-react-native
Lottie library will be used to add lottie-animation’s JSON file to your React Native App.
To add the downloaded animation, first import LottieView from lottie-react-native.
Next, insert the following lines of code in App.js −
import React from 'react';
import LottieView from 'lottie-react-native';
const App = () => {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<LottieView source={require('./myloader.json')} autoPlay loop/>
</View>
);
}
export default App;In source attribute of LottieView, you need to give the path to the JSON of your downloaded lottie JSON file to implement that animation.
Output
On execution, it will produce the following output −
363 Views
