Skip to content

Commit 1d32b5f

Browse files
committed
docs: readme usage and feature support
1 parent 06bfc34 commit 1d32b5f

File tree

1 file changed

+77
-5
lines changed

1 file changed

+77
-5
lines changed

README.md

Lines changed: 77 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-native-rive
22

3-
Rive React Native
3+
Rive React Native 2.0
44

55
## Installation
66

@@ -12,15 +12,87 @@ npm install react-native-rive react-native-nitro-modules
1212

1313
## Usage
1414

15-
1615
```js
17-
import { multiply } from 'react-native-rive';
16+
import {
17+
Fit,
18+
RiveView,
19+
type RiveFile,
20+
type RiveViewMethods,
21+
type RiveViewProps,
22+
RiveFileFactory,
23+
} from 'react-native-rive';
24+
import type { HybridView } from 'react-native-nitro-modules';
25+
import { useRef } from 'react';
26+
27+
// Load Rive files using different methods:
28+
// 1. From URL
29+
const riveFile: RiveFile = await RiveFileFactory.fromURL('https://cdn.rive.app/animations/vehicles.riv');
30+
31+
// 2. From Resource (local file)
32+
const riveFile: RiveFile = await RiveFileFactory.fromResource('rewards');
33+
34+
// 3. From ArrayBuffer
35+
const arrayBuffer: ArrayBuffer = await downloadFileAsArrayBuffer(url);
36+
const riveFile: RiveFile = await RiveFileFactory.fromBytes(arrayBuffer);
37+
38+
// Create a ref for the RiveView
39+
const riveRef = useRef<HybridView<RiveViewProps, RiveViewMethods>>(null);
40+
41+
// Create a RiveView component
42+
<RiveView
43+
autoBind={false}
44+
autoPlay={true}
45+
fit={Fit.Layout}
46+
file={riveFile}
47+
hybridRef={{
48+
f: (ref) => {
49+
if (ref) {
50+
riveRef.current = ref;
51+
}
52+
},
53+
}}
54+
/>
55+
```
56+
57+
## Error Handling
1858

19-
// ...
59+
All Rive operations can be wrapped in try/catch blocks for error handling:
2060

21-
const result = multiply(3, 7);
61+
```js
62+
try {
63+
const riveFile = await RiveFileFactory.fromURL('https://cdn.rive.app/animations/vehicles.riv');
64+
// Use the riveFile...
65+
} catch (error) {
66+
// Handle any errors that occur during Rive operations
67+
console.error('Error loading Rive file:', error);
68+
}
2269
```
2370

71+
## Feature Support
72+
73+
The following runtime features are currently supported:
74+
75+
✅ Supported | ⚠️ Partial | 🚧 In Development | ❌ Not Planned
76+
77+
| Feature | Status | Description |
78+
|----------------------------------|--------|-------------|
79+
| Playing state machines || Specify a state machine to play |
80+
| Playing animation timelines || Direct timeline playback not planned, use state machines |
81+
| Fit & Alignment | ⚠️ | Fit modes supported, alignment coming soon |
82+
| Layout & Responsiveness | ⚠️ | Basic responsive layouts supported |
83+
| Data Binding | 🚧 | Control data binding through runtime code |
84+
| Asset management | 🚧 | Out-of-band assets not yet supported |
85+
| State machine inputs | 🚧 | Get/Set (nested) state machine inputs (legacy, see data binding) |
86+
| Text Runs | 🚧 | Update (nested) text runs (legacy, see data binding) |
87+
| Rive Events | 🚧 | Listen to Rive events |
88+
| Rive Audio || Full Rive audio playback supported |
89+
| `useRiveFile()` hook | 🚧 | Convenient hook to load a Rive file |
90+
| `RiveView` error handling | 🚧 | Error handler for failed view operations |
91+
| `source` .riv file loading | 🚧 | Conveniently load .riv files from JS source |
92+
| Renderer options || Single renderer option available (Rive) |
93+
94+
> **Note**: Several features in the table above (state machine inputs, text runs, and events) represent legacy approaches to runtime control. We recommend using data binding instead, as it provides a more maintainable way to control your Rive graphics (both at edit time and runtime).
95+
2496

2597
## Contributing
2698

0 commit comments

Comments
 (0)