Boost Your User Experience with Lottie for React Native

This is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective.

What is it all about Lottie?

Lottie is a library for mobile devices that offers for the team a capability of converting After Effects animations to the screen. And 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.

It’s true that animations have existed since day one. And for React Native there is native component solution as Animated or libraries like react-native-svg. And we can always do GIF animations, right?

But, as an experienced React Native and mobile developer, I can claim that none of these choices are able to offer you the same look & feel that Lottie can. The performance, all the available resources and the proud feeling your team‘s designers will reach with Lottie is the main reason I’m now writing this post.

How to Get Started with Lottie for React Native?

Either:
  npm i --save lottie-react-native
Or:
  yarn add lottie-react-native

After this, we need to link Lottie on our RN project:

react-native link lottie-ios
react-native link lottie-react-native

The official installation docs says only lottie-react-native needs to be installed. But there’s also a paragraph stating ”After this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries”.

In my case (RN 0.48.x, lottie-react-native 2.2.0), there was no Lottie.framework found in the project, but it had to be imported from separate installation of lottie-ios. I may have failed with linking the libraries properly (although everything was done like explained in the documentation). I’ll keep this paragraph as a guidance for developers facing the same issue.

About Animations

We’re going to borrow a readily made animation from LottieFiles. It’s a simple check mark for use cases when the app has successfully completed a user’s action: https://www.lottiefiles.com/433-checked-done

I like really that animation: it’s simple, self explanatory and it also gives a brief glimpse of what can be done with After Effects for Lottie. The size itself is 26kb which is very light weight for scalable animation with lots of frames.

Show me Some Code (we go with TypeScript)

Let’s start by writing a Login Form component. First, we import Animation from Lottie:

import Animation from 'lottie-react-native';

Next, we define an object with necessary animations:

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

After that we add some styling. We 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 this, we place the animation 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 the Animation. The most important part is ref, which is needed in order to play the animation.

I recommend you to read full API reference in order to create top notch animations: https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md

Now 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 of noticing that animation shouldn’t be displayed all the time so you need to set conditional styling for the animation to display it at correct situation. Also hiding back the animation will probably require some magic numbers with timeouts et cetera.

Why All the Effort?

In my latest project, we first implemented Lottie animations “as a prank”. Then, it was shown to designers and first batch of testers. I had no clue of the impact: testers were very delighted of the visual feedback for their actions. And designers went to “I can provide you even better animation” berserk mode.

I’m not saying this is something new. But it really eases the whole collaboration between designers, developers and the end users. This is not a joke.

Conclusion

In general, there are several ways to provide similar kind of solutions for users. I don’t want to over-emphasise Lottie as being a silver bullet for your user experiences.

But, I’ve been developing RN applications since the beginning (2.5 years now). Only to realise that if Lottie would’ve existed for RN and I’d been aware of that, there would be many things done with smaller effort and better results.

But unfortunately Lottie has its own issues. I can’t guarantee that your fancy animation plays well on all the devices. We’ve encountered problems where animation “doubles” the style properties. This can mean that your “let’s add 50px margin over there” may turn out being 100px. Also, on Android devices some animations may freeze or be malformed from the original one.

So, try to find a balance between using of Animated API and Lottie. Also 3rd party solutions like React Native Animatable (https://github.com/oblador/react-native-animatable) are really worth of checking out. With the combination of these tools, and with subtle visual actions (please, don’t kill good UX with too many animations) you’ll definitely provide a better outcome.

Resources

Here are some resources you should go through before starting:

Lottie

• https://github.com/airbnb/lottie-react-native
• http://airbnb.io/lottie/react-native/react-native.html
• https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md

After Effects + Bodymovin

• https://github.com/bodymovin/bodymovin
• https://exchange.adobe.com/addons/products/12557
• And an installation tip for Bodymovin AE plugin for OSX:
  1. Go to http://zxpinstaller.com and download ZXPinstaller,
  2. Download Bodymoving plugin from GitHub,
  3. Open Bodymoving.zxp via ZXPinstaller.