Published on <a href="https://blog.prototypr.io/using-lottie-with-react-native-af7a8ea2c13c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Bi Yoo 
<h4>Quick review on Airbnb’s AE animation renderer</h4>
Few months ago, I discovered <a href="https://github.com/airbnb/lottie-react-native">this library called Lottie</a> and have been meaning to try it out. I finally got some down time to play with it, so I’m going to write about it!
Lottie is an open-source library that renders After Effects animations that are exported as JSON with <a href="https://aescripts.com/bodymovin/">bodymovin</a>. (Bodymovin is an AE plugin that exports AE animations for web)
Long story short, I think if you care about performance and small file sizes, Lottie is a pretty awesome tool you can use. I was able to create this short AE animation which is about 5 seconds, in a 20KB JSON file. Considering mp4 version of this was about 3MB, the size difference is pretty significant.
<img alt="" src="https://cdn-images-1.medium.com/max/320/1*LYS0egkRXB86Nbn_ex93yg.gif">* you can control not just start and stop, but also speed &amp; keyframe<img alt="" src="https://cdn-images-1.medium.com/max/306/1*Te0pt2UtNqSqRdhQ0DxAIg.gif">iOS version — I think this library works better with iOS.
For simple animations, I would still use FB’s Animated library if you are writing in React-native. But if you are proficient in After Effect, Lottie can be a real game changer. It could definitely help you achieve better UX and polished UI for your app.
AE JSON files that are converted by <a href="https://aescripts.com/bodymovin/">bodymovin</a> plugin are not just for native apps, you can use them for web as well. IMO, <a href="https://github.com/airbnb/lottie-web">lottie-web</a> has better APIs and controls. There’s some impressive examples on <a href="https://codepen.io/collection/nVYWZR/">codepen if you want to explore.</a>
<a href="https://github.com/airbnb/lottie-web">airbnb/lottie-web</a>
Also, there were few things I noticed when I was playing with it. I wouldn’t call them a drawback, but I think it is worth noting.
As the time of writing,
<ul>
<li>After Effect expressions are not exported correctly.</li>
<li>Puppet pin is not supported.</li>
<li>Expo implementation of Lottie is still Alpha. Speed props did not work for Android (works for iOS).</li>
</ul>
I created <a href="https://snack.expo.io/@yoobidev/lottie-test">Expo snack</a> for those who want to try this out. This has speed control buttons using speed prop.
As always, I hope this short review was helpful to your project.
Happy holidays!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=af7a8ea2c13c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-lottie-with-react-native-af7a8ea2c13c">Using Lottie with React Native</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Lottie with React Native

Quick review on Airbnb’s AE animation renderer

Top Stories