Super Simple Animations In React Native
Animation is a crucial component of mobile development. With the endless potential for activity behind our handheld tempered glass screens and the ever-shortening attention span of the average person, it should go without saying that utilizing as many resources to keep your applications as visually-stimulating as possible is a must in our current age.
This article hopes to raise awareness about the incredible and easy to use resource Lottie by Air BnB. I came across this while attempting to add a progress bar to one of my projects, and its ease of use and efficacy inspired me to spread the world about their incredibly effective approach!
INSTALLATION
The first step is to install Lottie for your operating system and React Native project. This is done via entering the following commands subsequently in your terminal which should be navigated to your frontend folder:
npm i --save lottie-react-native
npm i --save lottie-ios@3.1.8You may want to restart your frontend server to guarantee that the installation was thoroughly completed.
FINDING ANIMATIONS
Want to know something fantastic? The above GIF was initially a Lottie animation by Igor Sunz which has the ability to be incorporated in your application! While Lottie works primarily with JSON, the site now has the capability to convert their animations into GIFs! Exciting, right?
Finding the right animation for you could not be any easier with Lottie. Simply use the search bar in order to narrow the options of what you are after. This can either be something specific, like the progress bar I was searching for, or something more abstract such as the animation shown above which was found by searching “float”.
CUSTOMIZING ANIMATIONS
Let’s say you want to change the color of your animation to match the palette of your application. When you select the animation that is right for you, there will be a list of options on the bottom right-hand side of the screen. As animations are rendered in layers, you will want to select “Edit Layer Colors”.
You will be temporarily redirected to create a free account upon pressing this button (don’t worry, I haven’t received any spam from them yet, and if I do I will be sure to update this and leave a 1-star review of Air BnB on Yelp.)
After creating your account, you will have the ability to navigate to the “Edit Color Layers” screen. The interface of this section is super impressive, and a huge reason why I am writing this. An example is shown below:
The animation I have selected as an example has 3 layers which can all be edited on the right hand menu, along with the background color, dimensions, frame rate, duration and playback speed. You can use the hex code of your chosen app colors to select which are shown in context, which will be updated in the center screen as shown above.
ADDING ANIMATION TO YOUR PROJECT
Once you have the animation dialed in to your desire, click the button in the bottom right corner under “Export A Lottie JSON”.
Once this is downloaded, you can copy/paste the code and add as a constituent JSON file. I like to keep all of my visual elements in a folder, and my animations in a subfolder aptly titled “animations”. You can title it anything you’d like, but the more specific the better.
Next, you will want to import Lottie into the page you wish to load the animation into. The import statement for Lottie is as such:
import LottieView from 'lottie-react-native'LottieView is a component which will be rendered in JSX, so for React Native it will be presented as <LottieView />.
The list of properties which can be included in your component are very well documented, so I will attach them here as opposed to typing it all again. Because the component works similar to an Image tag (for those of you familiar with HTML… hopefully all of you…) a “source” property is required. It will be contained within a “require” function that navigates to the path of your animation (documented above).
That is quite literally it! How you choose to stylize the animation inline is up to you, and the 16 properties above will fulfill all of your image-movement fantasies.
Happy animating!
