{"id":11954,"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.","status":"maintenance","version":"9.8.2","language":"javascript","source_language":"en","source_url":"https://github.com/rive-app/rive-react-native","tags":["javascript","react-native","ios","android","typescript"],"install":[{"cmd":"npm install rive-react-native","lang":"bash","label":"npm"},{"cmd":"yarn add rive-react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add rive-react-native","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native components.","package":"react","optional":false},{"reason":"Core framework peer dependency for building mobile applications.","package":"react-native","optional":false}],"imports":[{"note":"The primary component for rendering Rive animations in your React Native app. It's a named export.","wrong":"const Rive = require('rive-react-native').Rive;","symbol":"Rive","correct":"import { Rive } from 'rive-react-native';"},{"note":"A React hook for programmatic control over Rive animations and state machines. It's a named export.","wrong":"import useRive from 'rive-react-native';","symbol":"useRive","correct":"import { useRive } from 'rive-react-native';"},{"note":"This is a TypeScript type definition for the ref object used to control the Rive component programmatically. Import it as a type.","wrong":"import { RiveRef } from 'rive-react-native';","symbol":"RiveRef","correct":"import type { RiveRef } from 'rive-react-native';"}],"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."},"warnings":[{"fix":"Refer to the official Rive documentation and the `@rive-app/react-native` GitHub repository for migration guides and new runtime usage. Plan to transition your existing projects.","message":"This package is a legacy runtime. The Rive team strongly recommends migrating to the new, performance-optimized `@rive-app/react-native` (Nitro runtime) for all new development and future-proofing. This package will eventually be superseded.","severity":"deprecated","affected_versions":">=9.0.0"},{"fix":"Check the changelogs for `rive-android` and `rive-ios` linked in the `rive-react-native` release notes for each update. After upgrading, run `cd ios && pod update RiveRuntime` and perform a clean Android build (e.g., `cd android && ./gradlew clean && ./gradlew assembleDebug`).","message":"Frequent bumps to the underlying native Rive iOS and Android runtimes (e.g., Rive Android 11.4.0, iOS 6.18.2 in v9.8.2) may introduce subtle breaking changes, new requirements, or necessitate updates to native build configurations. Always review release notes for the specific native SDKs.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Update your project's `Podfile` (iOS) to `platform :ios, '14.0'` and `build.gradle` (Android) to specify `minSdkVersion 21` and `targetSdkVersion 33` (or higher, as recommended by React Native).","message":"Minimum supported device versions are iOS 14.0+ and Android SDK 21+ with a target SDK 33+. Ensure your project's native configurations meet these minimums to avoid compatibility issues or build failures.","severity":"gotcha","affected_versions":"*"},{"fix":"For iOS, drag `.riv` files into your Xcode project and ensure they are part of a target's 'Copy Bundle Resources'. For Android, place `.riv` files in `android/app/src/main/res/raw/`. For Expo managed workflow, follow Expo's asset bundling guidelines. Paths with subfolders can be tricky on iOS Release builds, verify your setup.","message":"When using local Rive `.riv` assets, ensure the `resourceName` prop matches the filename (without extension) exactly. The assets must also be correctly bundled within your native project, which is a common source of 'file not found' errors.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project-level `build.gradle` includes `mavenCentral()` in `allprojects { repositories { ... } }`. Then, clean your Android project by running `cd android && ./gradlew clean` and rebuild.","cause":"Android build failed to locate the Rive Android native library due to a dependency resolution issue, often after a package update or build cache corruption.","error":"Could not find com.rive-app:rive-android:<version> in any of the following locations:"},{"fix":"Navigate to your `ios` project folder (`cd ios`) and run `pod install` or `pod update RiveRuntime`. Ensure your `Podfile` includes `use_native_modules!` and `pod 'RiveRuntime', :path => '../node_modules/rive-react-native'` (if manually linked).","cause":"iOS build failed to locate the Rive iOS native framework header, indicating a CocoaPods issue where the native module isn't correctly linked.","error":"RiveRuntime/RiveRuntime.h file not found"},{"fix":"Verify the animation name exactly matches what is defined in your Rive file (case-sensitive). You can use `riveRef.current.getAnimationNames()` to inspect all available animation names at runtime.","cause":"The specified animation name (via `animationName` prop or `play()` method) does not exist within the loaded Rive file or is misspelled.","error":"Failed to play animation: <animation name> - animation not found"},{"fix":"For React Native 0.60+, auto-linking should handle this. If it persists, try `npx react-native link rive-react-native`, ensure `new RiveReactNativePackage()` is present in your `MainApplication.java` (if linking manually or older RN), clean your Android build cache, and rebuild.","cause":"This error typically occurs on Android when the Rive React Native package isn't properly linked, especially after manual linking or issues with auto-linking.","error":"error: cannot find symbol class RiveReactNativePackage"}],"ecosystem":"npm"}