This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).

Lottie

GitHub

npm

A library that allows rendering After Effects animations.

Android

iOS

tvOS

Web

This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.

Lottie renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Installation

Terminal

- npx expo install lottie-react-native

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions provided by the library's README or documentation.

Usage

Lottie

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

export default function App() {
  const animation = useRef<LottieView>(null);
  useEffect(() => {
    // You can control the ref programmatically, rather than using autoPlay
    // animation.current?.play();
  }, []);

  return (
    <View style={styles.animationContainer}>
      <LottieView
        autoPlay
        ref={animation}
        style={{
          width: 200,
          height: 200,
          backgroundColor: '#eee',
        }}
        // Find more Lottie files at https://lottiefiles.com/featured
        source={require('./assets/gradientBall.json')}
      />
      <View style={styles.buttonContainer}>
        <Button
          title="Restart Animation"
          onPress={() => {
            animation.current?.reset();
            animation.current?.play();
          }}
        />
      </View>
    </View>
  );
}

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

API

import LottieView from 'lottie-react-native';

Refer to the lottie-react-native repository for more detailed documentation.