In this tutorial, we will be using with React Native. Lottie is an opensource library that renders Adobe Effects by providing easy to use animations just like static images. These animations are beautiful. Lottie is a mobile library developed by AirBnB. These animations are exported as JSON files using to render the natively on mobile and in web applications. Lottie Bodymovin 👍 for designers who spend their time contributing in LottieFiles. Requirements I will be using Expo XDE for brevity and to get started quickly. Create a new project using it. I am going to call but you can call whatever you want. rn-lottie-example When the XDE completes running ReactNative Package Manager and builds up the project, you can go to dropdown menu at the right and click on whichever simlulator you have installed depending on the operations system you are using. Windows users please make sure you have android studio and necessary files installed and MacOS users, please have XCode installed or upto date. Device You can also view the application, by running it using Expo Client on your mobile device. Note that, depending on your internet connection, this can be slow and your mobile device and development mahcine must be on same wifi. Scan the QR code in section, you are ready to go. Once, the app is rendered, you will be welcomed by the default screen: Share Now open your favorite text editor/IDE because we are going to start writing code in next section. Getting Started Installing Lottie as a dependency in a project can a bit tricky but fortunately, Expo provides support for it. We do not have to install anything since we are using Expo. We directly import the dependency in our : App.js Sine Lottie in Expo project is in Alpha mode, do not get worried by the word . DangerZone Include a local state in our application called . We will call this help in playing and restarting the animation itself. I am using for our animation from so you can download it. Of course, you are free to choose any other. Animations listed on the site are open source. animation this file LottieFiles.com Later, we will using the to source the animation file fetched directly in component. state.animation Lottie Defining the animation We will define two custom functions: and that perform the animation and load the animation from the internet using the API. We will also be pre-mounting our animation using method availble to us by core React. In this Life cycle method, when the state is set, it can be called before the initial render. _playAnimation _loadAnimationAsync fetch componentWillMount() In general, it is used to prepare either the first render or update the state before the render. This is why we are using it. We need to update the state we defined. Inside, we use JavaScript's API to get the animation from its source. This does mean, that the animation is coming from internet so if you are testing on your mobile device, make sure you have access to internet. _loadAnimationAsync() fetch This how our render function looks like: We separatly define styling for the overall container and the animation. To load the animation, we will set its to in order to remove any background color it has by default. backgroundColor transparent You can see the application working This tutorial shows how you can get started with Lottie animation library using React Native and Expo. There are other ways to define animations and you can go in-depth as much as you want. This article is written for a beginner’s point of view. For alternative to Lottie, you can check that also uses Adobe After Effects to create one. Facebook’s Keyframes Complete code of our demo application: You can also find the complete code at this in case you just want to play around this concept. Github repo , You can find me at 🙏 Twitter

Adobe

AirBnB

Facebook

Fetch

Twitter

Week 2 With React Native: Building a Weather App

React Native: How to Setup Your First App

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

Make resilience your competitive advantage

React Native: Getting Started with Lottie and Expo

React Native: Getting Started with Lottie and Expo

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps