What's up, mobile devs? Today, we are going to explore the exciting world of Lottie animation in React Native. In this tutorial, we will handle two different Lottie animations - an astronaut animation and an add animation. The astronaut animation will have autoplay and loop properties enabled, while we will have full control over the add animation.
Are you more a visual learner? If so, check out the video version of this tutorial on our YouTube channel. Don't forget to subscribe to our channel for more exciting content!
Get Started
To get started, simply create a new React Native with the Expo CLI:
npx create-expo-app -t the-power-of-lottie
Then, install the Lottie package:
npx expo install lottie-react-native
You can find the starter code in the GitHub repository, along with the final result. Feel free to check it out in the video description.
What is Lottie?
Before diving into the implementation, let's briefly understand what Lottie is all about. Lottie is a package designed by the Airbnb team. It is more than just a React Native package; Lottie is a library that renders After Effects animations in real-time on iOS, Android, and React Native.
If you are not familiar with After Effects, don't worry! You can download various Lottie animations from the Lottifiers.com website. For this tutorial, I have already selected the astronaut and add animations and downloaded their respective Lottie JSON files.
Handling the Astronaut Animation
To use the astronaut animation in our React Native code, we need to download the Lottie JSON file for the animation. Let's begin by creating a container view that will display the astronaut animation when there are no items in the list. Otherwise, it will show the list of items.
In the code above, we have created a reusable component called AnimatedWrapper. This component takes two props - showAnimation (a boolean indicating whether to display the animation) and children (the list of items). If showAnimation is true, it will show the astronaut animation along with the list of items; otherwise, it will only show the list of items.
Now, we can use this AnimatedWrapper in our main view to handle the astronaut animation:
In the main view, we use the AnimatedWrapper component and pass the condition items.length === 0 to the showAnimation prop. When the items array is empty, the astronaut animation will be shown. Otherwise, it will display the list of items.
Handling the "Add" Animation
Now let's handle the "add" animation. We want to run the animation whenever the "Add" button is pressed. To do this, we need to create a reference to the LottieView component and use it to play the animation when the button is pressed.
In the code above, we use the useRef hook to create a reference called buttonRef for the LottieView. In the handleOnPress function, we reset the animation to its initial frame and then play it from frame 0 to frame 75 (assuming the animation has 75 frames).
Now, let's add the "Add" animation to our main view:
Now, when we tap the "Add" button, the "Add" animation will run once.
Conclusion
In this tutorial, we explored the power of Lottie animation in React Native. We created a reusable component called AnimatedWrapper to handle the astronaut animation when the list is empty. Additionally, we implemented the "Add" animation, which plays when we tap the "Add" button.
Lottie allows us to add visually engaging animations to our React Native apps with ease. If you liked this tutorial, don't forget to leave a like and subscribe to our channel for more exciting content!
Happy coding!
Join my newsletter
Every week I send out a newsletter sharing new things.