Unlock the Power of Animations in React Native
When building mobile apps, speed and efficiency are crucial. React Native provides an excellent way to display information to the frontend, but what about informing users that data is on its way? This is where animations come in – giving your UI a vibrant feel and making a lasting impression.
Leveraging Lottie-React-Native
In the React Native world, numerous libraries exist to help you get started with animations. We’ll be using lottie-react-native and react-native-animatable, known for their ease of use and excellent maintenance.
Lottie-react-native allows developers to render animations without recreating them via code. It’s perfect for those who want to bring their Adobe After Effects creations to life. With just a few lines of code, you can focus on more important aspects of your project.
Installing and Acquiring Assets
To install lottie-react-native, run the following terminal commands:
Next, acquire your desired animation assets using the Bodymovin plugin or the LottieFiles directory. For this guide, we’ll use the Sleeping Cat animation.
Simple Usage and Conditional Rendering
To use Lottie, write the following code:
You can even perform conditional rendering on your SimpleLottie component to simulate loading functionality:
Creating a Loader Component with Lottie
Let’s create a loader component that displays data from the Coffee API while the data is loading. Create a file called DataDisplay.js and write the following code:
Next, alter your App.js file to fetch data from the API and store the response into the data Hook. If the response has loaded, display the API data; otherwise, render the SimpleLottie animation.
Using React-Native-Animatable
The react-native-animatable library allows developers to create their own transitions and animations through a declarative API. This is perfect for loaders and splash screens.
Installation and Simple Usage
Run the following terminal command to install react-native-animatable:
Create a file called SimpleAnimatable.js and write the following block of code:
This will give your Text element a bounce-like behavior. You can even get a “flash-like” animation by modifying the code.
Creating a Loader Component with React-Native-Animatable
Use conditional rendering to create a loader component:
Take Your App to the Next Level
In this article, we explored two common strategies for building animations in React Native. Whether you choose Lottie or react-native-animatable, you’ll be able to create engaging and vibrant UI experiences that leave a lasting impression on your users.