feat: add useRiveFile hook

Author: HayesGordon

README.md

@@ -92,15 +92,15 @@ The following runtime features are currently supported:
 | Animation selection        | ❌     | Animation playback not planned, use state machines               |
 | View autoPlay & play/pause | ✅     | Control view playback                                            |
 | Fit & Alignment            | ✅     | Fit modes supported, alignment coming soon                       |
-| Layout & Responsiveness    | ⚠️     | Basic responsive layouts supported                               |
+| Layout & Responsiveness    | ✅     | Basic responsive layouts supported                               |
 | Data Binding               | ⚠️     | Control data binding through runtime code                        |
 | Asset management           | 🚧     | Out-of-band assets not yet supported                             |
 | State machine inputs       | ✅     | Get/Set (nested) state machine inputs (legacy, see data binding) |
 | Text Runs                  | ✅     | Update (nested) text runs (legacy, see data binding)             |
 | Rive Events                | ✅     | Listen to Rive events                                            |
 | 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                              |
+| `useRiveFile()` hook       | ✅     | Convenient hook to load a Rive file                              |
 | `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)                          |

example/src/pages/RiveDataBindingExample.tsx

@@ -3,61 +3,66 @@ import { useState, useEffect } from 'react';
 import {
   Fit,
   RiveView,
-  RiveFileFactory,
   useRive,
   useRiveNumber,
-  type RiveFile,
   type ViewModelInstance,
   useRiveString,
   useRiveColor,
   useRiveTrigger,
+  useRiveFile,
 } from 'react-native-rive';
 
 export default function DataBindingExample() {
   const { riveViewRef, setHybridRef } = useRive();
-  const [riveFile, setRiveFile] = useState<RiveFile | null>(null);
   const [viewModelInstance, setViewModelInstance] =
     useState<ViewModelInstance | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [viewModelError, setViewModelError] = useState<string | null>(null);
 
-  // Load Rive file immediately
+  const { riveFile, isLoading, error } = useRiveFile(
+    require('../../assets/rive/rewards_source.riv')
+  );
+
+  // Create view model instance when Rive file is loaded
   useEffect(() => {
-    const initializeRiveFileAndData = async () => {
+    if (riveFile) {
       try {
-        const file = await RiveFileFactory.fromSource(
-          require('../../assets/rive/rewards_source.riv')
-        );
-        setRiveFile(file);
-        const viewModel = file.defaultArtboardViewModel();
-        setViewModelInstance(viewModel?.createDefaultInstance() ?? null);
-        setIsLoading(false);
-        setError(null);
+        const viewModel = riveFile.defaultArtboardViewModel();
+        if (!viewModel) {
+          throw new Error('No default artboard view model found');
+        }
+        const instance = viewModel.createDefaultInstance();
+        if (!instance) {
+          throw new Error('Failed to create view model instance');
+        }
+        setViewModelInstance(instance);
+        setViewModelError(null);
       } catch (err) {
-        setError(
-          err instanceof Error ? err.message : 'Failed to load Rive file'
+        setViewModelError(
+          err instanceof Error
+            ? err.message
+            : 'Failed to create view model instance'
         );
-        setIsLoading(false);
+        setViewModelInstance(null);
       }
-    };
-
-    initializeRiveFileAndData();
-  }, []);
+    }
+  }, [riveFile]);
 
-  // Release the Rive file when the component unmounts
+  // Cleanup view model instance when component unmounts or the view model instance changes
   useEffect(() => {
     return () => {
-      if (riveFile) {
-        riveFile.release(); // IMPORTANT: This ensures that the native resources are deleted
-      }
+      viewModelInstance?.dispose();
     };
-  }, [riveFile]);
+  }, [viewModelInstance]);
 
   // Bind the view model instance to the RiveView
   useEffect(() => {
     if (viewModelInstance && riveViewRef) {
-      console.log('Binding the instance');
-      riveViewRef?.bindViewModelInstance(viewModelInstance);
+      try {
+        console.log('Binding the instance');
+        riveViewRef.bindViewModelInstance(viewModelInstance);
+      } catch (err) {
+        console.error('Failed to bind view model instance:', err);
+      }
     }
   }, [viewModelInstance, riveViewRef]);
 
@@ -67,7 +72,9 @@ export default function DataBindingExample() {
     viewModelInstance
   );
   useEffect(() => {
-    console.log('coinValue', coinValue);
+    if (coinValue !== undefined) {
+      console.log('coinValue', coinValue);
+    }
   }, [coinValue]);
 
   if (coinValueError) {
@@ -118,17 +125,20 @@ export default function DataBindingExample() {
   // Set the initial values of the properties
   useEffect(() => {
     if (viewModelInstance) {
-      setButtonText("Let's go!");
-      setBarColor('#0000FF');
-      // setBarColor({ r: 0, g: 255, b: 0, a: 255 });
+      try {
+        setButtonText("Let's go!");
+        setBarColor('#0000FF');
+      } catch (err) {
+        console.error('Failed to set initial values:', err);
+      }
     }
   }, [setBarColor, setButtonText, viewModelInstance]);
 
   return (
     <View style={styles.container}>
       <View style={styles.riveContainer}>
-        {error ? (
-          <Text style={styles.errorText}>{error}</Text>
+        {error || viewModelError ? (
+          <Text style={styles.errorText}>{error || viewModelError}</Text>
         ) : isLoading ? (
           <ActivityIndicator size="large" color="#0000ff" />
         ) : (

example/src/pages/RiveEventsExample.tsx

@@ -3,50 +3,19 @@ import { useState, useEffect } from 'react';
 import {
   Fit,
   RiveView,
-  RiveFileFactory,
   useRive,
-  type RiveFile,
-  RiveEventType,
+  useRiveFile,
   type RiveEvent,
+  RiveEventType,
 } from 'react-native-rive';
 
 export default function EventsExample() {
   const { riveViewRef, setHybridRef } = useRive();
-  const [riveFile, setRiveFile] = useState<RiveFile | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { riveFile, isLoading, error } = useRiveFile(
+    require('../../assets/rive/rating.riv')
+  );
   const [lastEvent, setLastEvent] = useState<RiveEvent | null>(null);
 
-  useEffect(() => {
-    let currentFile: RiveFile | null = null;
-
-    const loadRiveFile = async () => {
-      try {
-        const file = await RiveFileFactory.fromSource(
-          require('../../assets/rive/rating.riv')
-        );
-        currentFile = file;
-        setRiveFile(file);
-        setIsLoading(false);
-        setError(null);
-      } catch (err) {
-        setError(
-          err instanceof Error ? err.message : 'Failed to load Rive file'
-        );
-        setIsLoading(false);
-      }
-    };
-
-    loadRiveFile();
-
-    // Cleanup function to release the Rive file when component unmounts
-    return () => {
-      if (currentFile) {
-        currentFile.release();
-      }
-    };
-  }, []);
-
   const handleRiveEvent = (event: any) => {
     console.log('Rive Event:', event);
     if (event.type === RiveEventType.General) {