Get Started
API Reference


Expo includes support for Lottie, the animation library from AirBnB.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb


expo install lottie-react-native

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';

export default class App extends React.Component {
  componentDidMount() {
    // Or set a specific startFrame and endFrame with:
    // this.animation.play(30, 120);

  resetAnimation = () => {

  render() {
    return (
      <View style={styles.animationContainer}>
          ref={animation => {
            this.animation = animation;
            width: 400,
            height: 400,
            backgroundColor: '#eee',
          // OR find more Lottie files @ https://lottiefiles.com/featured
          // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
        <View style={styles.buttonContainer}>
          <Button title="Restart Animation" onPress={this.resetAnimation} />

const styles = StyleSheet.create({
  animationContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  buttonContainer: {
    paddingTop: 20,

You can import it like this:
import LottieView from 'lottie-react-native';

The Lottie SDK is currently considered to be under Expo's "DangerZone" because it's implementation is still in Alpha.
  • Importing Lottie 3 files causes the previewer to crash without a visible error, because Expo relies on lottie-react-native v2.

We pull in the API from lottie-react-native, so the documentation there is the best resource to follow.