---
modificationDate: April 16, 2025
title: lottie-react-native
description: A library that allows rendering After Effects animations.
sourceCodeUrl: 'https://github.com/lottie-react-native/lottie-react-native'
packageName: lottie-react-native
platforms: ['android', 'ios', 'tvos', 'web']
inExpoGo: true
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v53.0.0/sdk/lottie/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# lottie-react-native

A library that allows rendering After Effects animations.
Android, iOS, tvOS, Web

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

[Lottie](https://airbnb.io/lottie/) renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

## Installation

```sh
npx expo install lottie-react-native
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project. Then, follow the [installation instructions](https://github.com/lottie-react-native/lottie-react-native#installing) provided in the library's README or documentation.

## Example

```tsx
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](https://airbnb.io/lottie/#/react-native) — Get full information on API and its usage.