Adding Rive to Expo

To use Rive with Expo, you’ll need to install the Rive React Native package. Because this package contains custom native code, it’s not compatible with Expo Go. Instead, you’ll need to use a development build, which gives you full access to native modules.

Development builds are the recommended setup for production apps.

This guide will walk you through integrating Rive into your Expo project, including installing dependencies, configuring your build, and testing your graphics.

Initial Setup

If you don’t already have a project, create a new Expo app:

npx create-expo-app MyRiveApp

Install the Expo development client:

npx expo install expo-dev-client

Then install the Rive package:

New Runtime (Recommended)
Legacy Runtime

npx expo install @rive-app/react-native

npx expo install rive-react-native

iOS Minimum Version

New Runtime (Recommended)
Legacy Runtime

The new runtime requires iOS 15.1 or later.If you’re using Expo SDK 52 or later, it already requires 15.1 or later.If you’re using an older SDK, you’ll need to update your iOS deployment target manually or via configuration.

Option 1: Using `expo-build-properties` (Recommended)

Continuous Native Generation (CNG) simplifies app maintenance and configuration by automatically generating your iOS and Android native projects using Prebuild.If you’re using CNG, you can set the minimum iOS deployment target directly in your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "15.1"
          }
        }
      ]
    ]
  }
}

Option 2: Manual Configuration

If you’re not using Prebuild, update the target directly in your ios/Podfile:

platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'

The legacy runtime requires iOS 14.0 or later.If you’re using Expo SDK 52 or later, you can skip this step as it has a higher default.If you’re using an older SDK, you’ll need to update your iOS deployment target manually or via configuration.

Option 1: Using `expo-build-properties` (Recommended)

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "14.0"
          }
        }
      ]
    ]
  }
}

Option 2: Manual Configuration

If you’re not using Prebuild, update the target directly in your ios/Podfile:

platform :ios, podfile_properties['ios.deploymentTarget'] || '14.0'

Creating a Development Build

To run your app with the Rive runtime, you’ll need to create a development build. Since there are several ways to do this, refer to the Expo development builds guide to choose the method that best suits your needs.

Running Your App

Once you’ve created a development build and installed it on your device or simulator, start your app with:

npx expo start

You can use the following component to test Rive:

New Runtime (Recommended)
Legacy Runtime

import { View, ActivityIndicator, Text } from "react-native";
import { RiveView, useRiveFile, Fit } from "@rive-app/react-native";

export default function RiveDemo() {
  const { riveFile, isLoading, error } = useRiveFile(
    "https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv"
  );

  if (isLoading) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (error || !riveFile) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Error loading Rive file: {error || "Unknown error"}</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <RiveView
        file={riveFile}
        artboardName="Avatar 1"
        stateMachineName="avatar"
        fit={Fit.Contain}
        style={{ width: 400, height: 400 }}
        autoPlay={true}
      />
    </View>
  );
}

If you encounter errors loading the Rive file, make sure you’re running in a development build and not Expo Go.

import { View } from "react-native";
import Rive from "rive-react-native";

export default function RiveDemo() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <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 }}
      />
    </View>
  );
}

If you encounter this error: Invariant Violation: requireNativeComponent: "RiveReactNativeView" was not found in the UIManager, it usually means the app is running in Expo Go. Press s in your terminal and select the development build instead.

Adding Local Assets

The example above loads a .riv file from a remote URL. To use local .riv files, they must be bundled into your native build. See Loading in Rive Files for instructions on working with local assets.

Runtime Fundamentals

App Runtimes

Adding Rive to Expo

Initial Setup

iOS Minimum Version

Option 1: Using `expo-build-properties` (Recommended)

Option 2: Manual Configuration

Option 1: Using `expo-build-properties` (Recommended)

Option 2: Manual Configuration

Creating a Development Build

Running Your App

Adding Local Assets

Runtime Fundamentals

App Runtimes

​Initial Setup

​iOS Minimum Version

​Option 1: Using expo-build-properties (Recommended)

​Option 2: Manual Configuration

​Option 1: Using expo-build-properties (Recommended)

​Option 2: Manual Configuration

​Creating a Development Build

​Running Your App

​Adding Local Assets

Initial Setup

iOS Minimum Version

Option 1: Using `expo-build-properties` (Recommended)

Option 2: Manual Configuration

Option 1: Using `expo-build-properties` (Recommended)

Option 2: Manual Configuration

Creating a Development Build

Running Your App

Adding Local Assets