feat: add source prop

Author: alextoudic

example/app/(examples)/SourceProp.tsx

@@ -0,0 +1,57 @@
+import { SafeAreaView, StyleSheet, ScrollView, Text } from 'react-native';
+import Rive, { Alignment, Fit } from 'rive-react-native';
+
+export default function SourceProp() {
+  return (
+    <SafeAreaView style={styles.safeAreaViewContainer}>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text>Require</Text>
+        <Rive
+          fit={Fit.Contain}
+          alignment={Alignment.Center}
+          style={styles.animation}
+          artboardName={'Avatar 3'}
+          autoplay={true}
+          source={require('../../assets/rive/avatars.riv')}
+        />
+        <Text>HTTP URI</Text>
+        <Rive
+          fit={Fit.Contain}
+          alignment={Alignment.Center}
+          style={styles.animation}
+          artboardName={'Avatar 3'}
+          autoplay={true}
+          source={{
+            uri: 'https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv',
+          }}
+        />
+        <Text>Resource name URI</Text>
+        <Rive
+          fit={Fit.Contain}
+          alignment={Alignment.Center}
+          style={styles.animation}
+          artboardName={'Avatar 3'}
+          autoplay={true}
+          source={{
+            uri: 'avatars',
+          }}
+        />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeAreaViewContainer: {
+    flex: 1,
+  },
+  container: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  animation: {
+    width: '100%',
+    height: 300,
+  },
+});

example/app/_layout.tsx

@@ -116,6 +116,10 @@ function RootLayoutNav() {
             name="(examples)/ErrorHandledManually"
             options={{ title: 'Error Handled Manually' }}
           />
+          <Stack.Screen
+            name="(examples)/SourceProp"
+            options={{ title: 'SourceProp' }}
+          />
         </Stack>
       </ThemeProvider>
     </GestureHandlerRootView>

example/app/index.tsx

@@ -48,6 +48,7 @@ export default function Home() {
       <StyledLink href="/(examples)/ErrorHandledManually">
         Error Handled Manually
       </StyledLink>
+      <StyledLink href="/(examples)/SourceProp">SourceProp</StyledLink>
     </ScrollView>
   );
 }

example/assets/rive/avatars.riv

@@ -16,6 +16,8 @@ config.resolver.nodeModulesPaths = [
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
+config.resolver.assetExts.push('riv');
+
 module.exports = config;
 
 // const path = require('path');

example/metro.config.js

@@ -1,4 +1,12 @@
-import React, { useCallback, useImperativeHandle, useRef } from 'react';
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+// This import path isn't handled by @types/react-native
+// @ts-ignore
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import {
   requireNativeComponent,
   UIManager,
@@ -116,7 +124,10 @@ type Props = {
   stateMachineName?: string;
   autoplay?: boolean;
   children?: React.ReactNode;
-} & XOR<{ resourceName: string }, { url: string }>;
+} & XOR<
+  XOR<{ resourceName: string }, { url: string }>,
+  { source: number | { uri: string } }
+>;
 
 export const RiveViewManager = requireNativeComponent<RiveProps>(VIEW_NAME);
 
@@ -133,19 +144,59 @@ const RiveContainer = React.forwardRef<RiveRef, Props>(
       onError,
       style,
       autoplay = true,
-      resourceName,
-      url,
+      resourceName: resourceNameProp,
+      url: urlProp,
       alignment = Alignment.Center,
       fit = Fit.Contain,
       layoutScaleFactor,
       artboardName,
       referencedAssets: referencedAssets,
       animationName,
+      source,
       stateMachineName,
       testID,
     },
     ref
   ) => {
+    const assetID = typeof source === 'number' ? source : null;
+    const sourceURI = typeof source === 'object' ? source.uri : null;
+    const { resourceName, url } = useMemo(() => {
+      if (resourceNameProp) {
+        return { resourceName: resourceNameProp };
+      }
+
+      if (urlProp) {
+        return { url: urlProp };
+      }
+
+      const assetURI = assetID ? resolveAssetSource(assetID)?.uri : sourceURI;
+
+      if (!assetURI) {
+        return {};
+      }
+
+      // handle http address and dev server
+      if (assetURI.match(/https?:\/\//)) {
+        return { url: assetURI };
+      }
+
+      // handle iOS bundled asset
+      if (assetURI.match(/file:\/\//)) {
+        // strip resource name from file path
+        return { resourceName: assetURI.match(/file:\/\/(.*\/)+(.*)\.riv/)[2] };
+      }
+
+      // handle Android bundled asset or resource name uri
+      return {
+        resourceName: assetURI,
+      };
+    }, [assetID, sourceURI, resourceNameProp, urlProp]);
+    if (!resourceName && !url) {
+      throw new Error(
+        'Invalid Rive resource. Please provide a valid resource.'
+      );
+    }
+
     const riveRef = useRef(null);
 
     const isUserHandlingErrors = onError !== undefined;