Skip to content

Commit 014f713

Browse files
mfazekasmfazekas
committed
doc: update readme and rename podfile name
1 parent 592b189 commit 014f713

6 files changed

Lines changed: 79 additions & 163 deletions

File tree

‎CONTRIBUTING.md‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ We want this community to be friendly and respectful to each other. Please follo
99
This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
1010

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

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

@@ -21,26 +22,26 @@ yarn
2122
2223
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/).
2324

24-
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.
25+
You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project.
2526

26-
Run **Nitrogen** in following cases:
27-
28-
- When you make changes to any `*.nitro.ts` files.
29-
- When running the project for the first time (since the generated files are not committed to the repository).
30-
31-
To invoke **Nitrogen**, use the following command:
27+
Run **Nitrogen** when you make changes to any `*.nitro.ts` files:
3228

3329
```sh
3430
yarn nitrogen
3531
```
3632

37-
The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.
33+
This also runs automatically via the `prepare` script when you run `yarn`.
34+
35+
The example apps demonstrate usage of the library. You need to run one to test any changes you make.
3836

39-
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.
37+
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.
4038

41-
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`.
39+
To edit native code in Xcode or Android Studio, you can use:
4240

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

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

@@ -62,14 +63,6 @@ To run the example app on iOS:
6263
yarn example ios
6364
```
6465

65-
To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:
66-
67-
```sh
68-
Running "RiveExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
69-
```
70-
71-
Note the `"fabric":true` and `"concurrentRoot":true` properties.
72-
7366
Make sure your code passes TypeScript and ESLint. Run the following to verify:
7467

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

135128
### Sending a pull request
136129

137-
> **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).
138-
139130
When you're sending a pull request:
140131

141132
- Prefer small pull requests focused on one change.

‎README.md‎

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,50 @@ Rive React Native 2.0
44

55
## Requirements
66

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

1015
## Known Issues
1116

12-
- 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
17+
- 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
1318

1419
## Installation
1520

1621
```sh
1722
npm install react-native-rive react-native-nitro-modules
23+
```
1824

1925
> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
20-
```
2126
2227
## Usage
2328

2429
```js
25-
import {
26-
Fit,
27-
RiveView,
28-
type RiveFile,
29-
type RiveViewMethods,
30-
type RiveViewProps,
31-
RiveFileFactory,
32-
} from 'react-native-rive';
33-
import type { HybridView } from 'react-native-nitro-modules';
34-
import { useRef } from 'react';
35-
36-
// Load Rive files using different methods:
37-
// 1. From URL
38-
const riveFile: RiveFile = await RiveFileFactory.fromURL('https://cdn.rive.app/animations/vehicles.riv');
39-
40-
// 2. From Resource (local file)
41-
const riveFile: RiveFile = await RiveFileFactory.fromResource('rewards');
42-
43-
// 3. From ArrayBuffer
44-
const arrayBuffer: ArrayBuffer = await downloadFileAsArrayBuffer(url);
45-
const riveFile: RiveFile = await RiveFileFactory.fromBytes(arrayBuffer);
46-
47-
// Create a ref for the RiveView
48-
const riveRef = useRef<HybridView<RiveViewProps, RiveViewMethods>>(null);
49-
50-
// Create a RiveView component
51-
<RiveView
52-
autoBind={false}
53-
autoPlay={true}
54-
fit={Fit.Layout}
55-
file={riveFile}
56-
hybridRef={{
57-
f: (ref) => {
58-
if (ref) {
59-
riveRef.current = ref;
60-
}
61-
},
62-
}}
63-
/>
30+
import { Fit, RiveView, useRiveFile } from 'react-native-rive';
31+
32+
function App() {
33+
const { riveFile } = useRiveFile({
34+
url: 'https://cdn.rive.app/animations/vehicles.riv',
35+
});
36+
37+
if (!riveFile) {
38+
return null;
39+
}
40+
41+
return (
42+
<RiveView
43+
autoPlay={true}
44+
fit={Fit.Layout}
45+
file={riveFile}
46+
onError={(error) => console.error('Rive error:', error.message)}
47+
style={{ width: '100%', height: 400 }}
48+
/>
49+
);
50+
}
6451
```
6552

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

‎example/README.md‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ First, you will need to run **Metro**, the JavaScript build tool for React Nativ
1111
To start the Metro dev server, run the following command from the root of your React Native project:
1212

1313
```sh
14-
# Using npm
15-
npm start
16-
17-
# OR using Yarn
1814
yarn start
1915
```
2016

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

2723
```sh
28-
# Using npm
29-
npm run android
30-
31-
# OR using Yarn
3224
yarn android
3325
```
3426

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

5345
```sh
54-
# Using npm
55-
npm run ios
56-
57-
# OR using Yarn
5846
yarn ios
5947
```
6048

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

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

65-
## Step 3: Modify your app
66-
67-
Now that you have successfully run the app, let's make changes!
68-
69-
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).
70-
71-
When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
72-
73-
- **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).
74-
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
75-
76-
## Congratulations! :tada:
77-
78-
You've successfully run and modified your React Native App. :partying_face:
79-
80-
### Now what?
81-
82-
- 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).
83-
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
84-
8553
# Troubleshooting
8654

8755
If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
88-
89-
# Learn More
90-
91-
To learn more about React Native, take a look at the following resources:
92-
93-
- [React Native Website](https://reactnative.dev) - learn more about React Native.
94-
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
95-
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
96-
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
97-
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

‎example/ios/Podfile.lock‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1357,6 +1357,32 @@ PODS:
13571357
- React-jsiexecutor
13581358
- React-RCTFBReactNativeSpec
13591359
- ReactCommon/turbomodule/core
1360+
- react-native-rive (0.1.0):
1361+
- DoubleConversion
1362+
- glog
1363+
- hermes-engine
1364+
- NitroModules
1365+
- RCT-Folly (= 2024.11.18.00)
1366+
- RCTRequired
1367+
- RCTTypeSafety
1368+
- React-Core
1369+
- React-debug
1370+
- React-Fabric
1371+
- React-featureflags
1372+
- React-graphics
1373+
- React-hermes
1374+
- React-ImageManager
1375+
- React-jsi
1376+
- React-NativeModulesApple
1377+
- React-RCTFabric
1378+
- React-renderercss
1379+
- React-rendererdebug
1380+
- React-utils
1381+
- ReactCodegen
1382+
- ReactCommon/turbomodule/bridging
1383+
- ReactCommon/turbomodule/core
1384+
- RiveRuntime (= 6.12.0)
1385+
- Yoga
13601386
- react-native-safe-area-context (5.6.2):
13611387
- DoubleConversion
13621388
- glog
@@ -1754,32 +1780,6 @@ PODS:
17541780
- React-logger (= 0.79.2)
17551781
- React-perflogger (= 0.79.2)
17561782
- React-utils (= 0.79.2)
1757-
- Rive (0.1.0):
1758-
- DoubleConversion
1759-
- glog
1760-
- hermes-engine
1761-
- NitroModules
1762-
- RCT-Folly (= 2024.11.18.00)
1763-
- RCTRequired
1764-
- RCTTypeSafety
1765-
- React-Core
1766-
- React-debug
1767-
- React-Fabric
1768-
- React-featureflags
1769-
- React-graphics
1770-
- React-hermes
1771-
- React-ImageManager
1772-
- React-jsi
1773-
- React-NativeModulesApple
1774-
- React-RCTFabric
1775-
- React-renderercss
1776-
- React-rendererdebug
1777-
- React-utils
1778-
- ReactCodegen
1779-
- ReactCommon/turbomodule/bridging
1780-
- ReactCommon/turbomodule/core
1781-
- RiveRuntime (= 6.12.0)
1782-
- Yoga
17831783
- RiveRuntime (6.12.0)
17841784
- RNCPicker (2.11.4):
17851785
- DoubleConversion
@@ -1874,6 +1874,7 @@ DEPENDENCIES:
18741874
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
18751875
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
18761876
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
1877+
- react-native-rive (from `../..`)
18771878
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
18781879
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
18791880
- React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
@@ -1906,7 +1907,6 @@ DEPENDENCIES:
19061907
- ReactAppDependencyProvider (from `build/generated/ios`)
19071908
- ReactCodegen (from `build/generated/ios`)
19081909
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
1909-
- Rive (from `../..`)
19101910
- "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
19111911
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
19121912
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -1996,6 +1996,8 @@ EXTERNAL SOURCES:
19961996
:path: "../node_modules/react-native/ReactCommon"
19971997
React-microtasksnativemodule:
19981998
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
1999+
react-native-rive:
2000+
:path: "../.."
19992001
react-native-safe-area-context:
20002002
:path: "../node_modules/react-native-safe-area-context"
20012003
React-NativeModulesApple:
@@ -2060,8 +2062,6 @@ EXTERNAL SOURCES:
20602062
:path: build/generated/ios
20612063
ReactCommon:
20622064
:path: "../node_modules/react-native/ReactCommon"
2063-
Rive:
2064-
:path: "../.."
20652065
RNCPicker:
20662066
:path: "../node_modules/@react-native-picker/picker"
20672067
RNGestureHandler:
@@ -2109,6 +2109,7 @@ SPEC CHECKSUMS:
21092109
React-logger: 368570a253f00879a1e4fea24ed4047e72e7bbf3
21102110
React-Mapbuffer: c04fcda1c6281fc0a6824c7dcc1633dd217ac1ec
21112111
React-microtasksnativemodule: ca2804a25fdcefffa0aa942aa23ab53b99614a34
2112+
react-native-rive: 7e008c7a01eba3d71d98813f77b4221699290990
21122113
react-native-safe-area-context: bc59472155ffb889a1ffe16c19a04c0cd451562b
21132114
React-NativeModulesApple: 452b86b29fae99ed0a4015dca3ad9cd222f88abf
21142115
React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c
@@ -2141,7 +2142,6 @@ SPEC CHECKSUMS:
21412142
ReactAppDependencyProvider: d5dcc564f129632276bd3184e60f053fcd574d6b
21422143
ReactCodegen: fda99a79c866370190e162083a35602fdc314e5d
21432144
ReactCommon: 4d0da92a5eb8da86c08e3ec34bd23ab439fb2461
2144-
Rive: b83a5c913ae79218b9e33f22bbe77d860de54eec
21452145
RiveRuntime: 8d819993126145fbf5a73089e7634b14b9aa577f
21462146
RNCPicker: 83c74db2de8274d8a8f3e18d91dea174a708f8c4
21472147
RNGestureHandler: bff91bb5ab5688265c70f74180ef718b94f33fe3

0 commit comments

Comments
 (0)