{"id":35580610,"url":"https://github.com/rive-app/rive-nitro-react-native","last_synced_at":"2026-04-23T16:02:58.614Z","repository":{"id":326376913,"uuid":"981830964","full_name":"rive-app/rive-nitro-react-native","owner":"rive-app","description":"Rive React Native - v2 built with Nitro","archived":false,"fork":false,"pushed_at":"2026-03-26T21:27:20.000Z","size":75323,"stargazers_count":131,"open_issues_count":26,"forks_count":7,"subscribers_count":9,"default_branch":"main","last_synced_at":"2026-03-27T05:10:38.734Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rive-app.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-12T00:48:42.000Z","updated_at":"2026-03-26T21:27:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/rive-app/rive-nitro-react-native","commit_stats":null,"previous_names":["rive-app/rive-nitro-react-native"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/rive-app/rive-nitro-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rive-app%2Frive-nitro-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rive-app%2Frive-nitro-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rive-app%2Frive-nitro-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rive-app%2Frive-nitro-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rive-app","download_url":"https://codeload.github.com/rive-app/rive-nitro-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rive-app%2Frive-nitro-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-04T20:53:08.352Z","updated_at":"2026-04-01T19:32:49.589Z","avatar_url":"https://github.com/rive-app.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @rive-app/react-native\n\n[![Build](https://github.com/rive-app/rive-nitro-react-native/actions/workflows/ci.yml/badge.svg)](https://github.com/rive-app/rive-nitro-react-native/actions)\n[![NPM Version](https://img.shields.io/npm/v/@rive-app/react-native)](https://www.npmjs.com/package/@rive-app/react-native)\n[![Downloads](https://img.shields.io/npm/dm/@rive-app/react-native)](https://www.npmjs.com/package/@rive-app/react-native)\n[![React Native](https://img.shields.io/badge/React_Native-0.78+-61dafb)](https://reactnative.dev/)\n[![iOS](https://img.shields.io/badge/iOS-15.1+-blue)](#requirements)\n[![Android](https://img.shields.io/badge/Android-7.0+-green)](#requirements)\n[![Rive iOS Runtime](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Frive-app%2Frive-nitro-react-native%2Fmain%2Fpackage.json\u0026query=%24.runtimeVersions.ios\u0026label=Rive%20iOS%20Runtime\u0026color=informational)](https://github.com/rive-app/rive-ios/releases)\n[![Rive Android Runtime](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Frive-app%2Frive-nitro-react-native%2Fmain%2Fpackage.json\u0026query=%24.runtimeVersions.android\u0026label=Rive%20Android%20Runtime\u0026color=informational)](https://github.com/rive-app/rive-android/releases)\n\n**Rive React Native 2.0**\n\n![Rive hero image](https://cdn.rive.app/rive_logo_dark_bg.png)\n\n## Early Release\n\n\u003e **⚠️ Early Release**: This package is in active development. We recommend testing thoroughly before using in production applications. We're actively gathering feedback to improve the library. Please share your thoughts and report any issues you encounter.\n\n## Requirements\n\n- **React Native**: 0.78 or later (0.79+ recommended for better Android error messages)\n- **Expo SDK**: 53 or later (for Expo users)\n- **iOS**: 15.1 or later\n- **Android**: SDK 24 (Android 7.0) or later\n- **Xcode**: 16.4 or later\n- **JDK**: 17 or later\n- **Nitro Modules**: 0.33.2 or later\n\n## Known Issues\n\n- Error messages on Android in React Native 0.78-0.79 may not be descriptive, this is a [known issue](https://github.com/mrousavy/nitro/issues/382) in React Native and is fixed in RN 0.80\n\n## Installation\n\n```sh\nnpm install @rive-app/react-native react-native-nitro-modules\n```\n\n\u003e `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).\n\n## Usage\n\n```js\nimport { Fit, RiveView, useRiveFile } from '@rive-app/react-native';\n\nfunction App() {\n  const { riveFile } = useRiveFile({\n    url: 'https://cdn.rive.app/animations/vehicles.riv',\n  });\n\n  if (!riveFile) {\n    return null;\n  }\n\n  return (\n    \u003cRiveView\n      autoPlay={true}\n      fit={Fit.Contain}\n      file={riveFile}\n      onError={(error) =\u003e console.error('Rive error:', error.message)}\n      style={{ width: '100%', height: 400 }}\n    /\u003e\n  );\n}\n```\n\n## Native SDK Version Customization\n\n\u003e **⚠️ Advanced Usage:** Customizing native SDK versions is intended for advanced users only. Using non-default versions may cause build-time errors, or compatibility issues. Always review and update custom versions when upgrading @rive-app/react-native.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eCustom Native SDK Version instructions - \u003cb\u003eonly use if you need it!\u003c/b\u003e\u003c/summary\u003e\n\nBy default, @rive-app/react-native uses specific versions of the Rive native SDKs defined in the library's `package.json` (`runtimeVersions.ios` and `runtimeVersions.android`). You can customize these versions if needed.\n\n### Vanilla React Native\n\nAdd the appropriate properties to your configuration files:\n\n**iOS** - Add to `ios/Podfile.properties.json`:\n\n```json\n{\n  \"RiveRuntimeIOSVersion\": \"6.13.0\"\n}\n```\n\n**Android** - Add to `android/gradle.properties`:\n\n```properties\nRive_RiveRuntimeAndroidVersion=10.6.0\n```\n\n### Expo\n\nUse an inline config plugin in your `app.config.ts`:\n\n```typescript\nimport {\n  withPodfileProperties,\n  withGradleProperties,\n} from '@expo/config-plugins';\n\nexport default {\n  expo: {\n    // ... other config\n    plugins: [\n      (config) =\u003e {\n        config = withPodfileProperties(config, (config) =\u003e {\n          config.modResults['RiveRuntimeIOSVersion'] = '6.13.0';\n          return config;\n        });\n\n        config = withGradleProperties(config, (config) =\u003e {\n          config.modResults.push({\n            type: 'property',\n            key: 'Rive_RiveRuntimeAndroidVersion',\n            value: '10.6.0',\n          });\n          return config;\n        });\n\n        return config;\n      },\n    ],\n  },\n};\n```\n\n\u003c/details\u003e\n\n## Error Handling\n\nAll Rive operations can be wrapped in try/catch blocks for error handling, for example, loading a file:\n\n```js\ntry {\n  const riveFile = await RiveFileFactory.fromURL(\n    'https://cdn.rive.app/animations/vehicles.riv'\n  );\n  // Use the riveFile...\n} catch (error) {\n  // Handle any errors that occur during Rive file loading\n  console.error('Error loading Rive file:', error);\n}\n```\n\n### View-Based Errors\n\nThe `RiveView` component provides an `onError` callback prop to handle errors that occur during view configuration or runtime operations:\n\n```js\n\u003cRiveView\n  file={riveFile}\n  onError={(error) =\u003e {\n    // error.type contains the error type enum value\n    // error.message contains a descriptive error message\n    console.error(`Rive Error [${error.type}]: ${error.message}`);\n  }}\n/\u003e\n```\n\n#### Error Types\n\nThe following error types can occur during view operations:\n\n| Error Type                                     | Value | Description                                           |\n| ---------------------------------------------- | ----- | ----------------------------------------------------- |\n| `RiveErrorType.Unknown`                        | 0     | An unknown error occurred                             |\n| `RiveErrorType.FileNotFound`                   | 1     | The specified Rive file could not be found            |\n| `RiveErrorType.MalformedFile`                  | 2     | The Rive file is malformed or corrupted               |\n| `RiveErrorType.IncorrectArtboardName`          | 3     | The specified artboard name does not exist            |\n| `RiveErrorType.IncorrectStateMachineName`      | 4     | The specified state machine name does not exist       |\n| `RiveErrorType.ViewModelInstanceNotFound`      | 6     | The specified view model instance was not found       |\n| `RiveErrorType.IncorrectStateMachineInputName` | 8     | The specified state machine input name does not exist |\n\nYou can use these error types to provide specific error handling:\n\n```js\nimport { RiveView, RiveErrorType } from '@rive-app/react-native';\n\n\u003cRiveView\n  file={riveFile}\n  artboardName=\"MainArtboard\"\n  onError={(error) =\u003e {\n    switch (error.type) {\n      case RiveErrorType.IncorrectArtboardName:\n        console.error('Artboard not found:', error.message);\n        // Handle missing artboard (e.g., use default artboard)\n        break;\n      case RiveErrorType.IncorrectStateMachineName:\n        console.error('State machine not found:', error.message);\n        // Handle missing state machine\n        break;\n      case RiveErrorType.MalformedFile:\n        console.error('Corrupted file:', error.message);\n        // Handle corrupted file (e.g., show error UI)\n        break;\n      default:\n        console.error('Rive error:', error.message);\n    }\n  }}\n  style={{ width: '100%', height: 400 }}\n/\u003e;\n```\n\n\u003e **Note**: If no `onError` handler is provided, errors will be logged to the console by default.\n\n## Feature Support\n\nThis section provides a comprehensive overview of feature availability in `@rive-app/react-native`, comparing it with the [previous Rive React Native runtime](https://github.com/rive-app/rive-react-native) and outlining the development roadmap.\n\n### Runtime Feature Comparison\n\n**Status Legend:** ✅ Supported | ⚠️ Partial | 🚧 In Development | ❌ Not Planned\n\nThe following table compares feature availability with the [previous Rive React Native runtime](https://github.com/rive-app/rive-react-native).\n\n| Feature                           | Status | Description                                                      |\n| --------------------------------- | ------ | ---------------------------------------------------------------- |\n| Artboard selection                | ✅     | Specify artboard to render                                       |\n| State machine selection           | ✅     | Specify a state machine to play                                  |\n| View autoPlay \u0026 play/pause        | ✅     | Control view playback                                            |\n| Fit \u0026 Alignment                   | ✅     | Fit modes supported, alignment coming soon                       |\n| Layout \u0026 Responsiveness           | ✅     | Basic responsive layouts supported                               |\n| Data Binding                      | ✅     | Control data binding through runtime code                        |\n| Asset management                  | ✅     | Load assets out of band (referenced)                             |\n| State machine inputs (Deprecated) | ✅     | Get/Set (nested) state machine inputs (legacy, see data binding) |\n| Text Runs (Deprecated)            | ✅     | Update (nested) text runs (legacy, see data binding)             |\n| Rive Events (Deprecated)          | ✅     | Listen to Rive events                                            |\n| Rive Audio                        | ✅     | Rive audio playback supported                                    |\n| `useRive()` hook                  | ✅     | Convenient hook to access the Rive View ref after load           |\n| `useRiveFile()` hook              | ✅     | Convenient hook to load a Rive file                              |\n| `RiveView` error handling         | ✅     | Error handler for failed view operations                         |\n| `source` .riv file loading        | ✅     | Conveniently load .riv files from JS source                      |\n| Animation selection               | ❌     | Animation playback not planned, use state machines               |\n| Renderer options                  | ❌     | Single renderer option available (Rive)                          |\n\n\u003e **Note**: Several features in the table above (state machine inputs, text runs, and events) represent legacy approaches to runtime control. We recommend using data binding instead, as it provides a more maintainable way to control your Rive graphics (both at edit time and runtime).\n\n### Roadmap\n\n**Status Legend:** ✅ Completed | 🚧 Planned |\n\nThis section tracks new features and improvements planned for this runtime that were not available in the [previous Rive React Native runtime](https://github.com/rive-app/rive-react-native).\n\n| Feature                                                                                               | Status |\n| ----------------------------------------------------------------------------------------------------- | ------ |\n| [Reusable .riv File resources (preloading)](https://github.com/rive-app/rive-react-native/issues/260) | ✅     |\n| [Data Binding - Images](https://github.com/rive-app/rive-nitro-react-native/issues/9)                 | ✅     |\n| [Data Binding - Artboards](https://github.com/rive-app/rive-nitro-react-native/issues/10)             | 🚧     |\n| [Data Binding - Lists](https://github.com/rive-app/rive-nitro-react-native/issues/11)                 | ✅     |\n| [Data Binding - Value props](https://github.com/rive-app/rive-nitro-react-native/pull/24)             | 🚧     |\n| [Suspense](https://github.com/rive-app/rive-nitro-react-native/pull/19)                               | 🚧     |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frive-app%2Frive-nitro-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frive-app%2Frive-nitro-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frive-app%2Frive-nitro-react-native/lists"}