A library that allows rendering After Effects animations.
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.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
npx 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, { useRef, useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from 'lottie-react-native';
export default function App() {
const animation = useRef(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,
},
});
import LottieView from 'lottie-react-native';
Refer to the lottie-react-native repository for more detailed documentation.