After Effect Animations in React Native with Lottie 🧨
Lottie allows us to render After Effect animations natively on mobile and web
Introduction
Animations help to make your app more dynamic and more user friendly. As you may know, it is possible to create animated videos with Adobe After Effect.
Why not integrate these animations to our App?
That is when Lottie comes to help us 😎.
What is Lottie?
Lottie is a library that allows us to add animations in iOS, Android, React Native, etc.
The main goal of Lottie is to integrate After Effects animations in our App by using a JSON file (We will not see how to pass from AE to the JSON file. You can see it here).
In this article, we will add Animations in a blank Expo app.
Setup
Before using Lottie, we need to install the package in our project:
At the root of the project, run:
yarn add lottie-react-native
yarn add lottie-ios@3.1.3Once we have added the package, we need to install the iOS dependencies:
cd ios
pod installNow Lottie should be installed 🛠
Use animations
As said, Lottie works with JSON files to run our animation. In this article, we will download it from LottieFiles.
Once you have downloaded it, you need to place it in your project folders. Then we can use the file like this:
In my case, I get that on my app:
Programmatically Play/Pause the animation
The LottieView provides us an Imperative API that lets us Play and Pause the animation as we want.
So, we need to pass a ref to the view and call the different methods as follow:
After adding the Play/Pause, we get this:
Now, for example, it is possible to start your animation when the user has complete an action, the component did mount, etc. (Other methods are available in the docs)
Conclusion
Now, you are able to implement animations in your app and make her more dynamic.
GitLab Repo: dmg.link/blog-lottie-repo.
You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀
