Skip to content

doc: update readme and rename podfile from Rive to react-native-rive #26

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

Merged
mfazekas merged 2 commits into from
Nov 19, 2025
Merged

doc: update readme and rename podfile from Rive to react-native-rive #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
014f713
doc: update readme and rename podfile name
mfazekas Nov 19, 2025
dc97c85
Update README.md
mfazekas Nov 19, 2025
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
35 changes: 13 additions & 22 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ We want this community to be friendly and respectful to each other. Please follo
This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:

- The library package in the root directory.
- An example app in the `example/` directory.
- A vanilla React Native example app in the `example/` directory.
- An Expo example app in the `expo-example/` directory.

To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:

Expand All @@ -21,26 +22,26 @@ yarn

This project uses Nitro Modules. If you're not familiar with how Nitro works, make sure to check the [Nitro Modules Docs](https://nitro.margelo.com/).

You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project. The example app will not build without this step.
You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project.

Run **Nitrogen** in following cases:

- When you make changes to any `*.nitro.ts` files.
- When running the project for the first time (since the generated files are not committed to the repository).

To invoke **Nitrogen**, use the following command:
Run **Nitrogen** when you make changes to any `*.nitro.ts` files:

```sh
yarn nitrogen
```

The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.
This also runs automatically via the `prepare` script when you run `yarn`.

The example apps demonstrate usage of the library. You need to run one to test any changes you make.

It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
Both are configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example apps. Changes to the library's JavaScript code will be reflected without a rebuild, but native code changes will require a rebuild.

If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/RiveExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-rive`.
To edit native code in Xcode or Android Studio, you can use:

To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-rive` under `Android`.
```sh
yarn dev:ios # Opens iOS project in Xcode
yarn dev:android # Opens Android project in Android Studio
```

You can use various commands from the root directory to work with the project.

Expand All @@ -62,14 +63,6 @@ To run the example app on iOS:
yarn example ios
```

To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:

```sh
Running "RiveExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

Note the `"fabric":true` and `"concurrentRoot":true` properties.

Make sure your code passes TypeScript and ESLint. Run the following to verify:

```sh
Expand Down Expand Up @@ -134,8 +127,6 @@ The `package.json` file contains various scripts for common tasks:

### Sending a pull request

> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).

When you're sending a pull request:

- Prefer small pull requests focused on one change.
Expand Down
75 changes: 31 additions & 44 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,63 +4,50 @@ Rive React Native 2.0

## Requirements

- React Native 0.79 or later
- Xcode 16.0 or later
- **React Native**: 0.78 or later (0.79+ recommended for better Android error messages)
- **Expo SDK**: 53 or later (for Expo users)
- **iOS**: 15.1 or later
- **Android**: SDK 24 (Android 7.0) or later
- **Xcode**: 16.4 or later
- **JDK**: 17 or later
- **Nitro Modules**: 0.25.2 or later

## Known Issues

- Error message on Android will not have descriptive messages, this is a [known issue](https://github.com/mrousavy/nitro/issues/382) in React Native and is fixed in RN 0.80
- Error messages on Android in React Native 0.78-0.79 may not be descriptive, this is a [known issue](https://github.com/mrousavy/nitro/issues/382) in React Native and is fixed in RN 0.80

## Installation

```sh
npm install react-native-rive react-native-nitro-modules
```

> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
```

## Usage

```js
import {
Fit,
RiveView,
type RiveFile,
type RiveViewMethods,
type RiveViewProps,
RiveFileFactory,
} from 'react-native-rive';
import type { HybridView } from 'react-native-nitro-modules';
import { useRef } from 'react';

// Load Rive files using different methods:
// 1. From URL
const riveFile: RiveFile = await RiveFileFactory.fromURL('https://cdn.rive.app/animations/vehicles.riv');

// 2. From Resource (local file)
const riveFile: RiveFile = await RiveFileFactory.fromResource('rewards');

// 3. From ArrayBuffer
const arrayBuffer: ArrayBuffer = await downloadFileAsArrayBuffer(url);
const riveFile: RiveFile = await RiveFileFactory.fromBytes(arrayBuffer);

// Create a ref for the RiveView
const riveRef = useRef<HybridView<RiveViewProps, RiveViewMethods>>(null);

// Create a RiveView component
<RiveView
autoBind={false}
autoPlay={true}
fit={Fit.Layout}
file={riveFile}
hybridRef={{
f: (ref) => {
if (ref) {
riveRef.current = ref;
}
},
}}
/>
import { Fit, RiveView, useRiveFile } from 'react-native-rive';

function App() {
const { riveFile } = useRiveFile({
url: 'https://cdn.rive.app/animations/vehicles.riv',
});

if (!riveFile) {
return null;
}

return (
<RiveView
autoPlay={true}
fit={Fit.Contain}
file={riveFile}
onError={(error) => console.error('Rive error:', error.message)}
Copy link
Copy Markdown
Contributor

@HayesGordon HayesGordon Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have onError? Or is this forward looking

Copy link
Copy Markdown
Collaborator Author

@mfazekas mfazekas Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #25 has onError

style={{ width: '100%', height: 400 }}
/>
);
}
```

## Native SDK Version Customization
Expand Down Expand Up @@ -158,7 +145,7 @@ The following runtime features are currently supported:
| Rive Audio | ✅ | Full Rive audio playback supported |
| `useRive()` hook | ✅ | Convenient hook to access the Rive View ref after load |
| `useRiveFile()` hook | ✅ | Convenient hook to load a Rive file |
| `RiveView` error handling | 🚧 | Error handler for failed view operations |
| `RiveView` error handling | ✅ | Error handler for failed view operations |
| `source` .riv file loading | ✅ | Conveniently load .riv files from JS source |
| Renderer options | ❌ | Single renderer option available (Rive) |

Expand Down
42 changes: 0 additions & 42 deletions example/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ First, you will need to run **Metro**, the JavaScript build tool for React Nativ
To start the Metro dev server, run the following command from the root of your React Native project:

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

Expand All @@ -25,10 +21,6 @@ With Metro running, open a new terminal window/pane from the root of your React
### Android

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

Expand All @@ -51,47 +43,13 @@ bundle exec pod install
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

## Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
60 changes: 30 additions & 30 deletions example/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1357,6 +1357,32 @@ PODS:
- React-jsiexecutor
- React-RCTFBReactNativeSpec
- ReactCommon/turbomodule/core
- react-native-rive (0.1.0):
- DoubleConversion
- glog
- hermes-engine
- NitroModules
- RCT-Folly (= 2024.11.18.00)
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-hermes
- React-ImageManager
- React-jsi
- React-NativeModulesApple
- React-RCTFabric
- React-renderercss
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RiveRuntime (= 6.12.0)
- Yoga
- react-native-safe-area-context (5.6.2):
- DoubleConversion
- glog
Expand Down Expand Up @@ -1754,32 +1780,6 @@ PODS:
- React-logger (= 0.79.2)
- React-perflogger (= 0.79.2)
- React-utils (= 0.79.2)
- Rive (0.1.0):
- DoubleConversion
- glog
- hermes-engine
- NitroModules
- RCT-Folly (= 2024.11.18.00)
- RCTRequired
- RCTTypeSafety
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-hermes
- React-ImageManager
- React-jsi
- React-NativeModulesApple
- React-RCTFabric
- React-renderercss
- React-rendererdebug
- React-utils
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RiveRuntime (= 6.12.0)
- Yoga
- RiveRuntime (6.12.0)
- RNCPicker (2.11.4):
- DoubleConversion
Expand Down Expand Up @@ -1874,6 +1874,7 @@ DEPENDENCIES:
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
- react-native-rive (from `../..`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
- React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
Expand Down Expand Up @@ -1906,7 +1907,6 @@ DEPENDENCIES:
- ReactAppDependencyProvider (from `build/generated/ios`)
- ReactCodegen (from `build/generated/ios`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- Rive (from `../..`)
- "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
Expand Down Expand Up @@ -1996,6 +1996,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon"
React-microtasksnativemodule:
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
react-native-rive:
:path: "../.."
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
React-NativeModulesApple:
Expand Down Expand Up @@ -2060,8 +2062,6 @@ EXTERNAL SOURCES:
:path: build/generated/ios
ReactCommon:
:path: "../node_modules/react-native/ReactCommon"
Rive:
:path: "../.."
RNCPicker:
:path: "../node_modules/@react-native-picker/picker"
RNGestureHandler:
Expand Down Expand Up @@ -2109,6 +2109,7 @@ SPEC CHECKSUMS:
React-logger: 368570a253f00879a1e4fea24ed4047e72e7bbf3
React-Mapbuffer: c04fcda1c6281fc0a6824c7dcc1633dd217ac1ec
React-microtasksnativemodule: ca2804a25fdcefffa0aa942aa23ab53b99614a34
react-native-rive: 7e008c7a01eba3d71d98813f77b4221699290990
react-native-safe-area-context: bc59472155ffb889a1ffe16c19a04c0cd451562b
React-NativeModulesApple: 452b86b29fae99ed0a4015dca3ad9cd222f88abf
React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c
Expand Down Expand Up @@ -2141,7 +2142,6 @@ SPEC CHECKSUMS:
ReactAppDependencyProvider: d5dcc564f129632276bd3184e60f053fcd574d6b
ReactCodegen: fda99a79c866370190e162083a35602fdc314e5d
ReactCommon: 4d0da92a5eb8da86c08e3ec34bd23ab439fb2461
Rive: b83a5c913ae79218b9e33f22bbe77d860de54eec
RiveRuntime: 8d819993126145fbf5a73089e7634b14b9aa577f
RNCPicker: 83c74db2de8274d8a8f3e18d91dea174a708f8c4
RNGestureHandler: bff91bb5ab5688265c70f74180ef718b94f33fe3
Expand Down
Loading
Loading