Blog

Boost Your User Experience with Lottie for React Native

  • November 6, 2020

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 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.

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.

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 unfortunately it 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.

-Metacoder