lottie-react-native

import React, { useRef, useEffect } from 'react'; import { View, StyleSheet, Button } from 'react-native'; import LottieView from 'lottie-react-native'; // Assuming 'myAnimation.json' is in your project's assets folder // and contains a valid Lottie JSON animation. const myAnimation = require('./path/to/myAnimation.json'); function AnimationScreen() { const animationRef = useRef<LottieView>(null); useEffect(() => { // Start animation automatically on component mount animationRef.current?.play(); }, []); return ( <View style={styles.container}> <LottieView ref={animationRef} source={myAnimation} // Path to your local JSON animation autoPlay={true} loop={true} style={styles.lottieAnimation} onAnimationFinish={(isCancelled) => { console.log('Animation finished:', isCancelled ? 'cancelled' : 'completed'); }} /> <View style={styles.controls}> <Button title="Play" onPress={() => animationRef.current?.play()} /> <Button title="Pause" onPress={() => animationRef.current?.pause()} /> <Button title="Reset" onPress={() => animationRef.current?.reset()} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, lottieAnimation: { width: 300, height: 300, backgroundColor: 'transparent', }, controls: { flexDirection: 'row', marginTop: 20, gap: 10 } }); export default AnimationScreen;