React Native is an amazing library for developers looking to build mobile apps with speed. It provides an efficient way of displaying information to the frontend. But before displaying API data, the application has to first inform the user that the data is on its way.
One way to do so is to leverage the power of animations. Thus, it can also give your UI a more vibrant feel.
For example, what do you think gives a better impression? Rendering a piece of text:
Or using a vivid animation:
In the React Native world, a multitude of libraries exists to help you get up and running. In this guide, we will use lottie-react-native and react-native-animatable. This is because they are an absolute breeze to use and well maintained.
Using Lottie
Let’s say that you built a breathtaking graphic using Adobe After Effects and want to render it in your app. But, this is one major flaw: Adobe does not allow you to do that.
This is where lottie-react-native comes in. It allows developers to render their animations without recreating them via code. It only requires a few lines of code to work, thus letting you focus on more important parts of the project.
Installing modules
To install it in your app, run the following terminal commands:
npm i lottie-react-native npm i [email protected]
Acquiring assets
You can use your own animations by exporting them with the Bodymovin plugin. But for this guide, we will use the LottieFiles directory. It includes a ton of free animations that you can import in your project.
In this article, I will use the Sleeping Cat animation.
To use your desired animation in your application, first download it in JSON format like so:
Next, move this into the assets
folder.
Simple usage
To use Lottie, write the following code:
import React from "react"; import { StyleSheet, View, Text } from "react-native"; import LottieView from "lottie-react-native"; import { useState } from "react"; export default function SimpleLottie() { return ( <View> <LottieView source={require("./assets/67834-ssssttt-shut-up-the-cat-is-sleeping.json")} style={styles.animation} autoPlay /> </View> ); } const styles = StyleSheet.create({ animation: { width: 100, height: 100, }, });
The LottieView
component holds our animation config. Here, the source
prop tells the location of our asset. Moreover, the autoPlay
prop tells Lottie to run the animation on startup.
To render SimpleLottie
, write the following code in App.js
:
//further code removed.. import SimpleLottie from "./SimpleLottie"; export default function App() { return ( <View style={styles.container}> <SimpleLottie /> <StatusBar style="auto" /> </View> ); } //...
Conditional rendering in Lottie
We can even perform conditional rendering on our SimpleLottie
component. This will simulate loading functionality:
const [show, setShow] = useState(false); useEffect(() => { setTimeout(() => setShow(true), 3000); }, []); return ( <View style={styles.container}> {show ?<Text>Finished loading!</Text> : <SimpleLottie /> } <StatusBar style="auto" /> </View> );
In this block of code, we told React to reverse the value of the show
Hook after 3 seconds. This will render the Text
on the screen.
Creating a loader component with Lottie
Here, the plan is to show data from Coffee API. While the data is loading, React will display the loading graphic.
Create a file called DataDisplay.js
. This component will be useful in displaying list items. Here, write the following code:
import React from "react"; import { StyleSheet, SafeAreaView, FlatList, Text, View } from "react-native"; export default function DataDisplay({ data }) { const Item = ({ title }) => ( <View style={styles.item}> <Text>{title}</Text> </View> ); const renderItem = ({ item }) => <Item title={item.title} />; return ( <SafeAreaView> <FlatList data={data} renderItem={renderItem} keyExtractor={(item) => item.id.toString()} /> </SafeAreaView> ); } const styles = StyleSheet.create({ item: { backgroundColor: "yellow", padding: 20, marginVertical: 8, }, });
A few inferences from this code:
- We created the
Item
component andrenderItem
function. They will work together to render each individual element in the array - Later on, we used the
FlatList
component to render the list
Next, alter your App.js
file like so:
export default function App() { const [data, setData] = useState(null); const fetchData = async () => { const resp = await fetch("https://api.sampleapis.com/coffee/hot"); const data = await resp.json(); setData(data); }; useEffect(() => { fetchData(); }, []); return ( <View style={styles.container}> {data ? <DataDisplay data={data} /> : <SimpleLottie />} <StatusBar style="auto" /> </View> ); }
In the above block of code, we told React to fetch data from the API and store the response into the data
Hook. After that, React checks whether the response has loaded (data
has a value).
If true
, the API data is shown. Otherwise, React Native renders the SimpleLottie
animation.
This will be the output:
Using react-native-animatable
The react-native-animatable library allows the developer to create their own transitions and animations through the declarative API. This is suitable for loaders and splash screens.
Installation
Run the following terminal command to get the package:
npm install react-native-animatable
Simple usage
Create a file called SimpleAnimatable.js
. Here, write the following block of code:
import * as Animatable from "react-native-animatable"; import React from "react"; export default function SimpleAnimatable() { return ( <Animatable.View> <Animatable.Text animation="bounce" iterationCount={"infinite"} direction="normal" > Loading.. </Animatable.Text> </Animatable.View> ); }
Let’s dissect this code piece by piece.
- The
Animatable.View
component allows our custom component to have animation functionality - Our
Text
element will have bounce-like behavior. Moreover, we’ve also set theiterationCount
property toinfinite
. This makes the animation loop forever
This will be the output:
You can even get a “flash-like” animation like so:
<Animatable.Text animation="flash" //....
Creating a loader component with react-native-animatable
This step should be straightforward. You can simply use conditional rendering:
{data ? <DataDisplay data={data} /> : <SimpleAnimatable />}
Conclusion
In this article, we covered two common strategies for building animations in React Native. In my own projects, I use Lottie because it is rock solid and extremely easy to use.
Furthermore, Lottie includes an imperative API which allows for more granular control over the chosen animation.
Thank you so much for reading!
LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.