Loading in Rive Files
How to use Rive files with the Rive React Native runtime
There are two 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
When you render the
<Rive />component, you must supply the
resourceNameprop respectively to the options above, or your component will fail to load.
Read more below to see more on each of the options.
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
urlparameter when instantiating the
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/folder of your React Native project, open the
.xcodeprojfile 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
.rivfile 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.
weather_app.rivto the iOS project
android/folder of your React Native project, open the whole folder in Android Studio. This will open up the Android project.
/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
rawfrom the resource type dropdown. Drop your
.rivfile into this new folder; this ensures that the Rive file gets included in the bundle resources.
weather_app.rivto 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
.rivextension) when creating the
<Rive />component, using that