rive-react-native

rive-react-native

This package implements native binding for Rive Runtime for iOS and Android. Expo CLI is not supported by this lib.

Further runtime documentation can be found in Rive's help center.

Installation

• install rive-react-native dependency using yarn or npm

npm install rive-react-native

or

yarn add rive-react-native

• install pods for your ios project. Go to the project ios directory and run

pod install

• Add empty swift file in order to create Bridging-Header file if it doesn't exist. (optional)

• add this dependency to your project inside android/app/build.gradle

dependencies {
  implementation "androidx.startup:startup-runtime:1.0.0"
}

More info here.

Put .riv files inside your project:

• raw directory on Android
• Assets directory on iOS

Expo

Since rive-react-native has native bindings to iOS and Android, you need to generate a native project in order to run you app. This can be done with expo run:android or expo run:ios. See https://docs.expo.dev/workflow/customizing/ for more information.

Usage

import Rive from 'rive-react-native';

const resourceName = 'truck_v7'; // file truck_v7.riv

function App() {
  return <Rive resourceName={resourceName} />;
}

You can download the truck_v7.riv file from the example/ios/Assets folder. A more detailed guide about usage can be found here

Rive component

Rive is a component that can render a native rive animation.

• Props documentation
• Ref methods documentation

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.