Skip to main content
There are several ways to include Rive files in your React Native projects:
  • Option 1: URL where a Rive file is hosted
  • Option 2: Add the asset to the asset bundles of the native iOS and Android projects
  • Option 3: Add the asset to the asset bundles in an Expo project using expo-asset
  • Option 4: Source prop and require
When you render the <Rive /> component, you must supply the url or resourceName prop respectively to the options above, or your component will fail to load. Read more below to see more on each of the options.

​
Option 1: URL

<Rive
  url="https://cdn.rive.app/animations/vehicles.riv"
/>;
When using the Rive React Native runtime to load in a Rive file, one option is to reference the URL where the Rive file may be hosted (i.e AWS S3 bucket, Google Storage, etc.). This can be done via the url parameter when instantiating the <Rive /> component.

​
Option 2: Asset Bundle

<Rive
  resourceName="weather_app" // weather_app.riv
/>;
Another alternative to loading in a Rive file for the <Rive /> component is to reference the name of the resource/asset in the respective ios/ and android/ projects.

​
Adding to iOS

In the ios/ folder of your React Native project, open the .xcodeproj file in XCode. This will open up the native iOS project. Create a New Group under the root of this project and name it whatever asset folder name you’d like to give it (i.e., Assets). Drop your .riv file into this group, and when prompted by XCode, add it to the Target of your app. This ensures that the Rive file gets included in the bundle resources. Image

​
Adding to Android

In the android/ folder of your React Native project, open the whole folder in Android Studio. This will open up the Android project. Under the /app/src/main/res/ directory, create a new Android Resource Directory, which is where you’ll store Rive file assets, and when prompted to select a name for the folder and resource type, select raw from the resource type dropdown. Drop your .riv file into this new folder; this ensures that the Rive file gets included in the bundle resources. Image Adding weather_app.riv to the Android project Once the Rive files are added to the asset/resource bundles of the iOS and Android projects in the React Native app, you should be free to start referencing the name of the file (without the .riv extension) when creating the <Rive /> component, using that resourceName prop.

​
Option 3: Using expo-asset with Expo CNG

<Rive
  resourceName="weather_app" // weather_app.riv
/>;
If you’re using Expo SDK 53 or later and want to take advantage of Expo CNG (Continuous Native Generation), you can use the expo-asset plugin to bundle your .riv files into your native builds. In your app.json or app.config.js, add the expo-asset plugin and specify your .riv files or asset directories: 
{
  "expo": {
    "plugins": [
      [
        "expo-asset",
        {
          "assets": ["path/to/file.riv", "path/to/directory"]
        }
      ]
    ]
  }
}
To enable support for Rive files in Metro, update your metro.config.js. If you don’t already have this file, generate it with: 
npx expo customize metro.config.js
Then edit it as follows: 
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// Add support for `.riv` files
config.resolver.assetExts.push('riv');

module.exports = config;
Then regenerate your development build, just remember to run npx expo prebuild first if you’re using any expo run:* commands. If you’re using an earlier version of Expo, you can find an alternative approach in this Github Issue.

​
Option 4: Source Prop with Require

<Rive
  source={require('./flying_car.riv')}
/>;
If you prefer to keep your Rive files in the same folder as your component code, you can use the source prop with require() to load the Rive file by referencing its path. To make this work, ensure your metro.config.js supports .riv files. If you’re using Expo and don’t already have this file, you can generate it with: 
npx expo customize metro.config.js
Then add: 
// Add support for `.riv` files
config.resolver.assetExts.push('riv');
An additional advantage of this method is that during development, the file is served by the Metro development server, allowing you to update it without rebuilding your app. When you build your app, the file is automatically bundled into the app’s assets.