Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
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() { this.animation.play(); // Or set a specific startFrame and endFrame with: // this.animation.play(30, 120); } resetAnimation = () => { this.animation.reset(); this.animation.play(); }; render() { return ( <View style={styles.animationContainer}> <LottieView ref={animation => { this.animation = animation; }} style={{ width: 400, height: 400, backgroundColor: '#eee', }} source={require('./assets/gradientBall.json')} // 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} /> </View> </View> ); } } const styles = StyleSheet.create({ animationContainer: { backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', flex: 1, }, buttonContainer: { paddingTop: 20, }, });
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.
lottie-react-native
v2.