Source: https://docs.expo.dev/versions/v53.0.0/sdk/lottie

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 53

Archive Expo Snack Discord and Forums Newsletter

lottie-react-native

GitHub npm

A library that allows rendering After Effects animations.

GitHub npm

Android

iOS

tvOS

Web

Bundled version:

7.2.2

Copy page

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

Installation

Terminal

Copy

- npx expo install lottie-react-native

If you are installing this in an existing React Native app , make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

Example

Lottie

Copy

Open in Snack

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, }, });

Learn more

Visit official documentation

Get full information on API and its usage.