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