feat: add out of band assets

Author: HayesGordon

src/Rive.tsx

@@ -21,10 +21,13 @@ import {
   RiveGeneralEvent,
   RiveOpenUrlEvent,
   RiveRendererInterface,
+  FilesHandledMapping,
+  RiveAssetPropType,
 } from './types';
 import { convertErrorFromNativeToRN, XOR } from './helpers';
 
 import { Alignment, Fit } from './types';
+import { parsePossibleSources } from './utils';
 
 const { RiveReactNativeRendererModule } = NativeModules;
 
@@ -79,6 +82,7 @@ type RiveProps = {
   layoutScaleFactor?: number;
   alignment: Alignment;
   artboardName?: string;
+  assetsHandled?: FilesHandledMapping;
   animationName?: string;
   stateMachineName?: string;
   ref: any;
@@ -104,6 +108,10 @@ type Props = {
   testID?: string;
   alignment?: Alignment;
   artboardName?: string;
+  /**
+   * @experimental This is an experimental feature and may change without a major version update (breaking change).
+   */
+  assetsHandled?: FilesHandledMapping;
   animationName?: string;
   stateMachineName?: string;
   autoplay?: boolean;
@@ -131,6 +139,7 @@ const RiveContainer = React.forwardRef<RiveRef, Props>(
       fit = Fit.Contain,
       layoutScaleFactor,
       artboardName,
+      assetsHandled: assetsHandled,
       animationName,
       stateMachineName,
       testID,
@@ -416,6 +425,28 @@ const RiveContainer = React.forwardRef<RiveRef, Props>(
       ]
     );
 
+    function transformFilesHandledMapping(
+      mapping?: FilesHandledMapping
+    ): FilesHandledMapping | undefined {
+      const transformedMapping: FilesHandledMapping = {};
+      if (mapping === undefined) {
+        return undefined;
+      }
+
+      Object.keys(mapping).forEach((key) => {
+        const option = mapping[key];
+        transformedMapping[key] = {
+          ...option,
+          source: parsePossibleSources(option.source as RiveAssetPropType),
+        };
+      });
+
+      return transformedMapping;
+    }
+
+    const convertedAssetHandledSources =
+      transformFilesHandledMapping(assetsHandled);
+
     return (
       <View style={[styles.container, style]} ref={ref as any} testID={testID}>
         <View style={styles.children}>{children}</View>
@@ -445,6 +476,7 @@ const RiveContainer = React.forwardRef<RiveRef, Props>(
             onError={onErrorHandler}
             alignment={alignment}
             artboardName={artboardName}
+            assetsHandled={convertedAssetHandledSources}
             animationName={animationName}
             stateMachineName={stateMachineName}
           />

src/types.ts

@@ -135,3 +135,34 @@ export interface RiveRendererInterface {
     androidRenderer: RiveRendererAndroid
   ): void;
 }
+
+export interface FileAssetSource {
+  sourceUrl?: string;
+  sourceAsset?: string;
+  sourceAssetId?: string;
+  path?: string;
+}
+
+export interface FileHandlerOptions {
+  source: RiveAssetPropType | FileAssetSource;
+}
+
+export type RiveAssetPropType =
+  | RiveAssetRequireSource
+  | RiveAssetUriSource
+  | RiveAssetPackagedSource;
+
+export type RiveAssetRequireSource = number;
+
+export interface RiveAssetUriSource {
+  uri: string;
+}
+
+export interface RiveAssetPackagedSource {
+  fileName: string;
+  path?: string; // only needed for Android assets
+}
+
+export interface FilesHandledMapping {
+  [assetName: string]: FileHandlerOptions;
+}

src/utils.ts

@@ -0,0 +1,36 @@
+import { Image } from 'react-native';
+import type { FileAssetSource, RiveAssetPropType } from './types';
+
+function parsePossibleSources(source: RiveAssetPropType): FileAssetSource {
+  if (typeof source === 'number') {
+    const resolvedAsset = Image.resolveAssetSource(source);
+    console.log(resolvedAsset);
+    if (resolvedAsset && resolvedAsset.uri) {
+      return { sourceAssetId: resolvedAsset.uri };
+    } else {
+      throw new Error('Invalid asset source provided.');
+    }
+  }
+
+  const uri = (source as any).uri;
+  if (typeof source === 'object' && uri) {
+    return { sourceUrl: uri };
+  }
+
+  const asset = (source as any).fileName;
+  const path = (source as any).path;
+
+  if (typeof source === 'object' && asset) {
+    const result: FileAssetSource = { sourceAsset: asset };
+
+    if (path) {
+      result.path = path;
+    }
+
+    return result;
+  }
+
+  throw new Error('Invalid source provided.');
+}
+
+export { parsePossibleSources };