Skip to main content
Note that certain Rive features may not be supported yet for a particular runtime, or may require using the Rive Renderer.For more details, refer to the feature support and choosing a renderer pages.
🚀 The new Rive React Native runtime is now public and ready for testing!Try it now: https://github.com/rive-app/rive-nitro-react-nativeCurrent Status:: The new package is in development preview. While it’s functional and actively maintained, the API may change in future releases. We recommend testing thoroughly before using in production applications.Migration Timeline:
  • Short term: Complete the new runtime and unblock production usage
  • Medium term: Address major concerns in the legacy package while supporting migration
  • Long term: Full migration to the new package
We’re actively gathering feedback to improve the new runtime. Please share your thoughts and report any issues you encounter.Additional information:
  • The new package will eventually be distributed on NPM under the name @rive-app/react-native.
  • The documentation on this site has not yet been updated to show the new API. Please see the example app for usage information.
  • See the feature comparison and roadmap.

​
Overview

This guide documents how to get started using the React Native runtime library. Rive runtime libraries are open-source. The source is available in its GitHub repository. This library contains an API for React Native apps to easily integrate Rive assets. The minimum iOS target is 14.0
See our documentation to add Rive to an Expo app.

​
Getting Started

Follow the steps below for a quick start on integrating Rive into your React Native app.
1

Install the dependency

npm install rive-react-native
# or for Yarn
yarn add rive-react-native
2

iOS - Pod Install

cd inside the ios folder and run pod install (if deploying to iOS)
If you run into issues here, you may need to bump the ios deployment version target to at least 14.0. You can find this version in the Podfile of the ios/ folder.
3

Android - Set Kotlin Dependency Resolution

This step may be optional - however, if your Android setup in the React Native project does not have Kotlin v1.8.0+ set up, you may run into duplicate class issues when building the project. To mitigate these issues, as suggested by Kotlin docs, add the following to your dependencies in your application’s build.gradle file to deal with version alignment:
dependencies {
    implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')
    ...
}
4

Add the Rive component

import Rive from 'rive-react-native';

function App() {
  return <Rive
      url="https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv"
      artboardName="Avatar 1"
      stateMachineName="avatar"
      style={{width: 400, height: 400}}
  />;
}
See subsequent runtime pages to learn how to control animation playback, state machines, and more.

​
Resources

Github: https://github.com/rive-app/rive-react-native Examples: