How I used the Lottie with success on React Native

Portfolio Apr 03, 2021

Recently I launched my last work as a freelancer, one mobile app for a professional of the gym, he works with reduce weight for woman's and our deal was make a super simple mobile app for woman-public to train from home. As I always do, I started this project, making a prototype first using a pen and paper and more late to passing for Figma.

In the initial idea, I suggested to the client one person animated, and for that challenge Lottie was the better choice.

The idea initial

Installing the plugin

This project use Expo ejected, and the plugin that I choose was the https://github.com/lottie-react-native/lottie-react-native, the documentation is straightforward, but basically, you need to install and in the case of iOS, run the pod install:

pod install

The problem

Lottie is a plugin that provides the possibility to use After Effects animations on mobile apps through a JSON file exported, in the LottieFiles you can to find a lot animations for just to use, but I needed one animation customised, and then I called to my brother.

For the persons, I used the website https://www.flaticon.com/, and tried at least three ideas to share with my client.

After the final decision, I submitted the SVG files for my brother to create the animation using Adobe After Effects, he also have needed to install the plugin https://lottiefiles.com/plugins/after-effects, this process wasn't simples because Lottie not to accept all features of After Effects.

After many tests, my brother done it and sent to me the files JSON exported, all I have needed to do was copy into the folder assets in my project RN and set the path in the plugin.

The final result

I finished this project after 4 months (I calculated 2 months to do it), the result was really awesome, the app is available on App Store and Google Play today, and the idea of use Lottie certainly was a good choice, Lottie runs the animation too fluid, me and the client were satisfied.

Final idea choose

Throughout my career UX always was a concerned, and Lottie brought new possibilities to put amazing animations without a hard work. Recently, I have been using Lottie as well with web, I recommend.