rive-react-native

import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; import { Rive, RiveRef } from 'rive-react-native'; const RiveAnimationScreen: React.FC = () => { const riveRef = React.useRef<RiveRef>(null); // Example of how you might interact with the Rive component via its ref React.useEffect(() => { // For instance, activating a state machine input after 3 seconds const timer = setTimeout(() => { if (riveRef.current) { console.log('Activating input...'); riveRef.current.fireState('Motion', 'Trigger1'); // Example: assumes a state machine 'Motion' with a trigger input 'Trigger1' } }, 3000); return () => clearTimeout(timer); }, []); return ( <View style={styles.container}> <Text style={styles.header}>Loading Rive Animation</Text> <Rive ref={riveRef} resourceName="truck_delivery_loop" // Ensure 'truck_delivery_loop.riv' is in your native project's assets autoplay={true} artboardName="New Artboard" // Optional: specify a particular artboard animationName="Timeline 1" // Optional: specify a particular animation style={styles.riveAnimation} onLoad={() => console.log('Rive file loaded successfully!')} onError={(error) => console.error('Rive error:', error)} /> <Text style={styles.footer}>Interactive Rive animation</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, header: { fontSize: 20, marginBottom: 20, }, riveAnimation: { width: 300, height: 300, backgroundColor: 'transparent', }, footer: { marginTop: 20, fontSize: 16, color: '#666', }, }); export default RiveAnimationScreen;