Skip to content

Update Expo related doc #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Expo related doc #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 73 additions & 68 deletions runtimes/react-native/adding-rive-to-expo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,110 +3,115 @@ title: 'Adding Rive to Expo'
description: 'Rive React Native Expo. '
---

To enable your Expo application to run Rive animations you'll need to include the native Android and iOS libraries.
To use Rive with Expo, you'll need to install the `rive-react-native` package.

To achieve this you can make use of [development builds](https://docs.expo.dev/develop/development-builds/introduction/) or by [generating the native projects with prebuild](https://docs.expo.dev/workflow/customizing/#generate-native-projects-with-prebuild). A development build can be seen as your own version of the Expo Go client that includes custom native libraries. We suggest reading [Expo's documentation](https://docs.expo.dev/workflow/customizing/#generate-native-projects-with-prebuild) for more information.
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.

### Setup
> **Note:**
> Development builds are the [recommended setup for production apps](https://github.com/expo/fyi/blob/main/expo-go-usage.md).

This guide will demonstrate how you can make use of prebuild to generate the required native code.
This guide will walk you through integrating Rive into your Expo project, including installing dependencies, configuring your build, and testing your animations.

Start by creating a new expo app (or use an existing project):
## Initial Setup

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

```bash
npx create-expo-app MyRiveApp
```

Add the Rive React Native package:
Install the Expo development client:

```bash
npx expo install rive-react-native
npx expo install expo-dev-client
```

Add a Rive animation to a view:
Then install the Rive package:

```javascript
import Rive from 'rive-react-native';
import { StyleSheet, Text, View } from 'react-native';

function RiveDemo() {
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}}
/>;
}
```bash
npx expo install rive-react-native
```

export default function App() {
return (
<View style={styles.container}>
<RiveDemo />
</View>
);
}
## iOS Minimum Version

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
```
Rive for iOS requires a minimum deployment target of `14.0`.

> Running `npx expo start` will not work as Expo Go does not include the native libraries needed to run Rive. If you were to run this command you'll see the following error: `Invariant Violation: requireNativeComponent: "RiveReactNativeView" was not found in the UIManager.`
If you’re using Expo SDK 52 or later, you can skip this step as `14.0` is already the default.

Before running your app, you first need to generate the iOS and Android native projects to take ownership of them. You can do this by running `npx expo prebuild`, or `npx expo run:[ios|android]` (which will run `prebuild` automatically).
If you're using an older SDK, you’ll need to update your iOS deployment target manually or via configuration.

- `npx expo run:android` requires Android Studio and the Android SDK to be installed. See the [setup environment guide](https://reactnative.dev/docs/environment-setup).
- `npx expo run:ios` requires Xcode (macOS only) installed on your computer. See the [setup environment guide](https://reactnative.dev/docs/environment-setup).
### Option 1: Using `expo-build-properties` (Recommended)

Generate the build folders for both Android and iOS:
[Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/) simplifies app maintenance and configuration by automatically generating your iOS and Android native projects using [Prebuild](https://docs.expo.dev/workflow/continuous-native-generation/#usage).

```bash
npx expo prebuild
If you're using CNG, you can set the minimum iOS deployment target directly in your `app.json` or `app.config.js`:

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

You'll be prompted to enter an **Android package** and **iOS Bundle Identifier**.
### Option 2: Manual Configuration

This command will generate `android` and `ios` build folders in your project directory. These projects allow you to configure your iOS and Android application as you would for a traditional native application.
If you’re not using Prebuild, update the target directly in your `ios/Podfile`:

<Note>
You may get the following error: `Something went wrong running pod install in the ios directory.`
<br/>
Which is likely due to the minimum target iOS version not being high enough.
</Note>
```ruby
platform :ios, podfile_properties['ios.deploymentTarget'] || '14.0'
```

Ensure that your apps minimum iOS version is at least `14.0` (this is the minimum version that Rive iOS supports). Open `ios/Podfile` and look for the `platform :ios` version. It should look something like this:
## Creating a Development Build

```bash
platform :ios, podfile_properties['ios.deploymentTarget'] || '13.0'
```
To run your app with the Rive runtime, you’ll need to create a development build.

Change `13.0` to `14.0`:
Since there are several ways to do this, refer to the [Expo development builds guide](https://docs.expo.dev/develop/development-builds/create-a-build/) to choose the method that best suits your needs.

```bash
platform :ios, podfile_properties['ios.deploymentTarget'] || '14.0'
```
## Running Your App

You can now run on iOS:
Once you've created a development build and installed it on your device or simulator, start your app with:

```bash
# Build your native iOS project
npx expo run:ios
npx expo start
```

and Android:
You can use the following component to test Rive:

```bash
# Build your native Android project
npx expo run:android
```js
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>
);
}
```

### Local Assets
> **Note:**
> 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.

The example above demonstrates how to load a `riv` file as a network asset. To load files from the asset bundle they need to be included in Android Studio and XCode as assets, see [Loading in Rive Files](/runtimes/react-native/loading-rive-to-expo).
## Adding Local Assets

You can also see [this Github Issue](https://github.com/rive-app/rive-react-native/issues/185) for an alternative approach to load 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](loading-rive-to-expo) for instructions on working with local assets.
51 changes: 48 additions & 3 deletions runtimes/react-native/loading-rive-to-expo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ title: 'Loading in Rive Files'
description: 'How to use Rive files with the Rive React Native runtime. '
---

There are two ways to include Rive files in your React Native projects:
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.

Expand All @@ -20,7 +22,7 @@ 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 `url` parameter when instantiating the `<Rive />` component.
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

Expand Down Expand Up @@ -50,4 +52,47 @@ Under the `/app/src/main/res/` directory, create a new *Android Resource Directo

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.
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

```javascript
<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)](https://docs.expo.dev/workflow/continuous-native-generation/), you can use the [expo-asset plugin](https://docs.expo.dev/versions/latest/sdk/asset/) 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:

```json
{
"expo": {
"plugins": [
[
"expo-asset",
{
"assets": ["path/to/file.riv", "path/to/directory"]
}
]
]
}
}
```

Then run `npx expo prebuild` to get your Rive files bundled into your development builds before restarting your project.

If you're using an earlier version of Expo, you can find an alternative approach in [this Github Issue](https://github.com/rive-app/rive-react-native/issues/185).

### Option 4: Source Prop with Require

```javascript
<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.
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.