Lottie: Create better user experience (with animations) for React Native

When it comes to Lottie, a lot of people may think of a fairly new library that enables rendering After Effects animations in real-time in your apps. It is certainly available on almost every mobile platform like iOS or Android. And above all, it has been introduced by AirBnB in 2017. All in all, it’s a mobile library for animating your user interface and telling the user stories from a whole new perspective.

Lottie usage in React Native
Lottie usage in React Native

We are all aware of the entrance of Lottie, and the importance of it in UX/UI for React Native likewise. Yet, you may want to understand a little further about this module. If you do, then this article is just for you! So now, we – ArrowHiTech would like to introduce to you guys everything you need to know about Lottie, and how to create a better user experience for React Native.

First, let’s go through some definitions.

What is Lottie?

Lottie, in short, is a library for mobile devices that offers for the team the capability of converting After Effects animations to the screen. And also under the hood, it’s only a single file exported as JSON with Bodymovin plugin. The end result is pure vector magic so no need to worry about screen sizes.

How to get started with Lottie for React Native?

#1. About animations

The animations of using Lottie in React Native
The animations of using Lottie in React Native

The animations themselves can certainly be created with Adobe After Effects, and are exported to a JSON file that your app loads into a view. To clarify, you can create the animations from scratch in After Effects, or import the vector drawings from Adobe Illustrator. When preparing your Illustrator document for import into After Effects, you can spread the different animation elements across Illustrator layers. The layer names you set up in Illustrator will translate to After Effects later.

#2. Show me some code (so we go with TypeScript)

Let’s start by writing a Login Form component. Firstly, we import Animation from this module:

import Animation from 'lottie-react-native';

Secondly, we define an object with the necessary animations:

 const animations: any = {
  checkedDone: require(‘../assets/animations/checked-done.json’),
};

In addition, we add some styling. We certainly want to make it large, 1/4 of the whole viewport.

 const viewport: any = Dimensions.get('window');
const styles: any = StyleSheet.create({
  checkedDone: {
    width: viewport.width / 4,
    height: viewport.width / 4,
  },
});

Then we prepare the reference for the animation inside the actual component:

private animationCheckedDone: any;

After that, we place the animation of Lottie to the component:

  ...
  public render(): JSX.Element {
    return (
      ...
      <View>
        <Animation
          ref={(animation: any) => animationCheckedDone = animation}
          loop={false}
          style={styles.checkedDone}
          source={animations.checkedDone}
        />
      </View>
      ...
    )
  }
  ...

Now, you can see we have four properties for Animation. The most important part is the ref, which is needed in order to play the animation. We are almost there. We just need to play the animation when the login form is submitted:

  onSubmit(): void {
    ...
    animationCheckedDone.play();
    ...
  }

Now, there’s a small difference when compared to native Animated API: it’s .play(), not .start().

It’s also worth noticing that animation shouldn’t be displayed all the time so you need to set conditional styling for the animation to display it in the correct situation. Also hiding back the animation will probably require some magic numbers with timeouts.

#3. Lottie on iOS

You can try out this module on iOS. This certainly can be done by cloning the GitHub repository and running the example app, which has some bundled animations. You can also load them from a URL to try them out quickly without having to recompile your app. In addition, the main entry point for adding animations via the module is LOTAnimationView. So, you can create a new LOTAnimationView with a bundled JSON file or a URL. Here we have an example of this using Swift language:

  1 import Lottie
  2
  3 // ...
  4 guard let animationView = LOTAnimationView(name: "animation") else { return }
  5 animationView.contentMode = .scaleAspectFit
  6 animationView.loopAnimation = true
  7 self.view.addSubview(animationView)
  8
  9 animationView.play { animationFinished in
  10    // ...
  11 }

You can also create custom view controller transitions with LOTAnimationTransitionController by using custom-defined After Effect layers to animate a transition with a given animation.

#4. Lottie in Android

You can also try this module on Android by downloading the app on the Google Play Store. To clarify, use Gradle to integrate this module for Android into your project. Similarly, on iOS, Lottie for Android provides various API to customize and configure animations. So here we have an example of this, using Java language:

  1 import com.arrowhitech.lottie.LottieAnimationView;
  2
  3 LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
  4 animationView.setAnimation("animation.json");
  5 animationView.loop(true);
  6
  7 animationView.playAnimation();

Final words

That should conclude everything you need to know about Lottie, and how to create a better user experience for React Native, using this module. All in all, though this module may be quite new in recent years, it’s never been easier to implement animations as it is now. And since it’s open-source, you can take the opportunity to help improve this framework even more by contributing to the library.
Furthermore, if you want to get the solution for your business problems, don’t hesitate to entering your problems at CONTACT FORM right now ! ArrowHiTech experts will help you solve it as soon as possible.

Read

Webpack: The major advantages and how to set it up for React

Flexbox: How to use it to style your interface thoroughly in React Native

Tags

Share