Comment on page
React Native
React Native runtime for Rive
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
Follow the steps below for a quick start on integrating Rive into your React Native app.
npm install rive-react-native
# or for Yarn
yarn add rive-react-native
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.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')
...
}
App.js
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.
Last modified 3mo ago