Lottie Animation Workflow Part 2

Welcome back to the Lottie Animation Series. Last time we talked about creating an animation from scratch using Adobe After Effects, you can catch up in Part One if you haven’t read it yet.

In this part, we’re going to render our animation in a React Native app, and more specifically, an Expo app. If you haven’t heard of Expo, it’s a wrapper over React Native that streamlines the setup process, handles app builds, and provides a lot of well documented APIs.

Rendering the Animation in an App

First we’ll want to download the Expo XDE and set up a new blank project.

Once the project is created, we can open the app source in an editor and look for App.js, which should contain the following code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you check out Expo’s docs on importing Lottie, you’ll see that it’s part of their DangerZone namespace of the API due to Lottie being an alpha feature, so we’ll need to import it from there. Add the following lines to the import portion of App.js:

import { DangerZone } from 'expo';
const { Lottie } = DangerZone;

Now that Lottie is imported we can put the animation into the project. Take the animation we created in part 1 and place it in the assets folder in the file structure:

The animation is named ‘data.json’

Finally, all we need to do to display the animation is configure it into the Lottie component we imported above.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DangerZone } from 'expo';
const { Lottie } = DangerZone;
export default class App extends React.Component {
componentDidMount() {
  this.animation.play();
}
render() {
    return (
      <View style={styles.container}>
        <Lottie
          ref={animation => { this.animation = animation; }}
          style={{
            width: 60,
            height: 60,
          }}
          source={require('./assets/data.json')}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you run the code in the iOS simulator (in Expo XDE, choose device > ‘Open on iOS Simulator’) you will see that the animation plays but isn’t positioned correctly and it stops after it plays the full animation one time.

To fix this, let’s give it some styles and add the loop property in the code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DangerZone } from 'expo';
const { Lottie } = DangerZone;
export default class App extends React.Component {
componentDidMount() {
    this.animation.play();
  }
render() {
    return (
      <View style={styles.container}>
        <View style={styles.animationContainer}>
          <Lottie
            ref={animation => { this.animation = animation; }}
            style={styles.animation}
            source={require('./assets/data.json')}
            loop
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#348bc1',
    justifyContent: 'center',
    alignItems: 'center',
  },
  animationContainer: {
    width: 60,
    height: 60,
  },
  animation: {
    width: 60,
    height: 60,
  },
});

Note: in React if a prop is a boolean and is true, you don’t need to pass in the value (loop={ true }) you can simply give it the property of loop.

Now you can see we have a nice centered animation that loops:

That is a basic implementation of importing a Lottie animation and displaying it in a React Native Expo app, but Lottie can do a lot more and just as a quick example, let’s add a toggle to the loop prop so we can start/stop the animation on demand:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { DangerZone } from 'expo';
const { Lottie } = DangerZone;
export default class App extends React.Component {
state = {
  loop: true,
}
componentDidMount() {
  this.animation.play();
}
toggleLoop() {
  this.setState({ loop: !this.state.loop });
  if (!this.state.loop) {
   this.animation.play();
  }
}
render() {
    return (
      <View style={styles.container}>
        <View style={styles.animationContainer}>
          <Lottie
            ref={animation => { this.animation = animation; }}
            style={styles.animation}
            source={require('./assets/data.json')}
            loop={this.state.loop}
          />
        </View>
        <TouchableOpacity
          onPress={() => this.toggleLoop()}
        >
          <Text>Toggle Loop</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#348bc1',
    justifyContent: 'center',
    alignItems: 'center',
  },
  animationContainer: {
    width: 60,
    height: 60,
  },
  animation: {
    width: 60,
    height: 60,
  },
});

In the code above I imported the TouchableOpacity component from the React Native library which is one of React Native’s button components. I also set the default state with a property of loop set to true, so the animation will start in a looped state. I bound the TouchableOpacity onPress event to a function called toggleLoop(). This will toggle the state of loop, and play the animation if toggled back on.

So, there you have it. We have created an animation from scratch and rendered it in a mobile app. Next time we’ll go over some more advanced features that Lottie offers. If there is anything specific you’d like to see, add a comment below.