{"library":"rive-react-native","title":"Rive React Native","description":"This package, currently at stable version 9.8.2, provides a React Native runtime library for integrating real-time interactive animations created with the Rive design tool into iOS and Android applications. It acts as a wrapper around the native Rive iOS and Android runtimes, exposing a `Rive` component and a ref pattern for controlling animations and state machines within React Native. While actively maintained with frequent updates to synchronize with the native Rive SDKs and address critical bugs, this package is explicitly identified as a *legacy runtime*. The Rive team is actively promoting migration to a new, performance-optimized `@rive-app/react-native` (Nitro runtime), with a long-term goal for full transition to the new package. Its release cadence involves minor version bumps and bug fixes, typically related to native runtime synchronization and platform-specific build issues.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install rive-react-native"],"cli":null},"imports":["import { Rive } from 'rive-react-native';","import { useRive } from 'rive-react-native';","import type { RiveRef } from 'rive-react-native';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { View, StyleSheet, Text } from 'react-native';\nimport { Rive, RiveRef } from 'rive-react-native';\n\nconst RiveAnimationScreen: React.FC = () => {\n  const riveRef = React.useRef<RiveRef>(null);\n\n  // Example of how you might interact with the Rive component via its ref\n  React.useEffect(() => {\n    // For instance, activating a state machine input after 3 seconds\n    const timer = setTimeout(() => {\n      if (riveRef.current) {\n        console.log('Activating input...');\n        riveRef.current.fireState('Motion', 'Trigger1'); // Example: assumes a state machine 'Motion' with a trigger input 'Trigger1'\n      }\n    }, 3000);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.header}>Loading Rive Animation</Text>\n      <Rive\n        ref={riveRef}\n        resourceName=\"truck_delivery_loop\" // Ensure 'truck_delivery_loop.riv' is in your native project's assets\n        autoplay={true}\n        artboardName=\"New Artboard\" // Optional: specify a particular artboard\n        animationName=\"Timeline 1\" // Optional: specify a particular animation\n        style={styles.riveAnimation}\n        onLoad={() => console.log('Rive file loaded successfully!')}\n        onError={(error) => console.error('Rive error:', error)}\n      />\n      <Text style={styles.footer}>Interactive Rive animation</Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  header: {\n    fontSize: 20,\n    marginBottom: 20,\n  },\n  riveAnimation: {\n    width: 300,\n    height: 300,\n    backgroundColor: 'transparent',\n  },\n  footer: {\n    marginTop: 20,\n    fontSize: 16,\n    color: '#666',\n  },\n});\n\nexport default RiveAnimationScreen;\n","lang":"typescript","description":"Demonstrates how to embed a Rive animation from a local asset (e.g., 'truck_delivery_loop.riv') in a React Native component, including basic autoplay, specifying artboards/animations, and interacting with the Rive component via a ref.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}