feat: add RiveFile.fromSource method

Author: HayesGordon

example/assets/rive/ios_android_layouts_demo_v01.riv

@@ -4,13 +4,15 @@ const { getConfig } = require('react-native-builder-bob/metro-config');
 
 const root = path.resolve(__dirname, '..');
 
+const config = getDefaultConfig(__dirname);
+config.resolver.assetExts = [...config.resolver.assetExts, 'riv'];
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
  *
  * @type {import('metro-config').MetroConfig}
  */
-module.exports = getConfig(getDefaultConfig(__dirname), {
+module.exports = getConfig(config, {
   root,
   project: __dirname,
 });

example/assets/rive/rating.riv

@@ -16,7 +16,7 @@ import {
 } from 'react-native-rive';
 import { useRef, useState, useEffect } from 'react';
 
-type LoadingMethod = 'URL' | 'Resource' | 'ArrayBuffer';
+type LoadingMethod = 'URL' | 'Resource' | 'ArrayBuffer' | 'Source';
 
 interface CustomRiveViewProps {
   loadingMethod: LoadingMethod;
@@ -60,26 +60,31 @@ const CustomRiveView = ({ loadingMethod, title }: CustomRiveViewProps) => {
 
     const loadRiveFile = async () => {
       try {
-        let riveFile: RiveFile | null = null;
+        let file: RiveFile | null = null;
 
         switch (loadingMethod) {
           case 'URL':
-            riveFile = await RiveFileFactory.fromURL(networkGraphicURL);
+            file = await RiveFileFactory.fromURL(networkGraphicURL);
             break;
           case 'Resource':
-            riveFile = await RiveFileFactory.fromResource('rewards');
+            file = await RiveFileFactory.fromResource('rewards');
             break;
           case 'ArrayBuffer':
             const arrayBuffer =
               await downloadFileAsArrayBuffer(networkGraphicURL);
             if (arrayBuffer) {
-              riveFile = await RiveFileFactory.fromBytes(arrayBuffer);
+              file = await RiveFileFactory.fromBytes(arrayBuffer);
             }
             break;
+          case 'Source':
+            file = await RiveFileFactory.fromSource(
+              require('../assets/rive/rating.riv')
+            );
+            break;
         }
 
-        if (riveFile) {
-          setRiveFile(riveFile);
+        if (file) {
+          setRiveFile(file);
         }
       } catch (error) {
         console.error(`Error loading Rive file from ${loadingMethod}:`, error);
@@ -99,7 +104,7 @@ const CustomRiveView = ({ loadingMethod, title }: CustomRiveViewProps) => {
           style={styles.rive}
           autoBind={false}
           autoPlay={true}
-          fit={Fit.Cover}
+          fit={Fit.Contain}
           file={riveFile}
           hybridRef={{
             f: (ref) => {
@@ -115,13 +120,14 @@ const CustomRiveView = ({ loadingMethod, title }: CustomRiveViewProps) => {
 };
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState<LoadingMethod>('URL');
+  const [activeTab, setActiveTab] = useState<LoadingMethod>('Source');
 
   const renderContent = () => {
     const titles = {
       URL: 'Loading from URL',
       Resource: 'Loading from Resource',
       ArrayBuffer: 'Loading from ArrayBuffer',
+      Source: 'Loading from Source',
     };
 
     return (
@@ -133,6 +139,19 @@ export default function App() {
     <View style={styles.container}>
       {renderContent()}
       <View style={styles.tabBar}>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 'Source' && styles.activeTab]}
+          onPress={() => setActiveTab('Source')}
+        >
+          <Text
+            style={[
+              styles.tabText,
+              activeTab === 'Source' && styles.activeTabText,
+            ]}
+          >
+            Source
+          </Text>
+        </TouchableOpacity>
         <TouchableOpacity
           style={[styles.tab, activeTab === 'URL' && styles.activeTab]}
           onPress={() => setActiveTab('URL')}

example/metro.config.js

@@ -4,6 +4,10 @@ import type {
   RiveFileFactory as RiveFileFactoryInternal,
 } from '../specs/RiveFile.nitro';
 
+// This import path isn't handled by @types/react-native
+// @ts-ignore
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
 const RiveFileInternal =
   NitroModules.createHybridObject<RiveFileFactoryInternal>('RiveFileFactory');
 
@@ -50,4 +54,65 @@ export namespace RiveFileFactory {
   ): Promise<RiveFile> {
     return RiveFileInternal.fromBytes(bytes, loadCdn);
   }
+
+  /**
+   * Creates a RiveFile instance from a source that can be either a resource ID or a URI object.
+   * @param source - Either a number representing a resource ID or an object with a uri property
+   * @param loadCdn - Whether to load from CDN (default: true)
+   * @returns Promise that resolves to a RiveFile instance
+   * @throws Error if the source is invalid or cannot be resolved
+   * @example
+   * // Using a resource ID
+   * const riveFile1 = await RiveFileFactory.fromSource(require('./animation.riv'));
+   *
+   * // Using a URI object
+   * const riveFile2 = await RiveFileFactory.fromSource({ uri: 'https://example.com/animation.riv' });
+   *
+   * // Using a local file URI
+   * const riveFile3 = await RiveFileFactory.fromSource({ uri: 'file:///path/to/animation.riv' });
+   *
+   * @note To use .riv files with require(), you need to add 'riv' to the asset extensions in your metro.config.js:
+   * ```js
+   * const config = getDefaultConfig(__dirname);
+   * config.resolver.assetExts = [...config.resolver.assetExts, 'riv'];
+   * ```
+   */
+  export async function fromSource(
+    source: number | { uri: string },
+    loadCdn: boolean = true
+  ): Promise<RiveFile> {
+    const assetID = typeof source === 'number' ? source : null;
+    const sourceURI = typeof source === 'object' ? source.uri : null;
+
+    const assetURI = assetID ? resolveAssetSource(assetID)?.uri : sourceURI;
+
+    if (!assetURI) {
+      throw new Error(
+        `Invalid source provided, ${source} is not a valid asset ID or URI`
+      );
+    }
+
+    try {
+      // handle http address and dev server
+      if (assetURI.match(/https?:\/\//)) {
+        return RiveFileFactory.fromURL(assetURI, loadCdn);
+      }
+
+      // handle iOS bundled asset
+      if (assetURI.match(/file:\/\//)) {
+        const match = assetURI.match(/file:\/\/(.*\/)+(.*)\.riv/);
+        if (!match) {
+          throw new Error(`Invalid iOS asset path format: ${assetURI}`);
+        }
+        return RiveFileFactory.fromResource(match[2], loadCdn);
+      }
+
+      // handle Android bundled asset or resource name uri
+      return RiveFileFactory.fromResource(assetURI, loadCdn);
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      throw new Error(`Failed to load Rive file from source: ${errorMessage}`);
+    }
+  }
 }