feat: allow RiveView to be called with a file argument

Author: mfazekas

src/core/RiveView.tsx

@@ -0,0 +1,75 @@
+import type { HybridViewProps } from 'react-native-nitro-modules';
+import type { RiveFile } from '../specs/RiveFile.nitro';
+import '../specs/RiveView.nitro';
+import type { Alignment } from './Alignment';
+import type { Fit } from './Fit';
+import { NitroRiveView } from 'react-native-rive';
+import type { ReferencedAssets } from '../hooks/useRiveFile';
+import type { RiveFileInput } from '../../lib/typescript/src';
+import { useRiveFile } from '../hooks/useRiveFile';
+import { ActivityIndicator, Text } from 'react-native';
+import type { ComponentProps } from 'react';
+
+export interface RiveViewProps
+  extends Omit<ComponentProps<typeof NitroRiveView>, 'file'> {
+  /** Name of the artboard to display from the Rive file */
+  artboardName?: string;
+  /** Name of the state machine to play */
+  stateMachineName?: string;
+  /** Whether to automatically bind the state machine and artboard */
+  autoBind?: boolean;
+  /** Whether to automatically start playing the state machine */
+  autoPlay?: boolean;
+  /** The Rive file to be displayed */
+  file: RiveFile | RiveFileInput;
+  /** How the Rive graphic should be aligned within its container */
+  alignment?: Alignment;
+  /** How the Rive graphic should fit within its container */
+  fit?: Fit;
+  /** The scale factor to apply to the Rive graphic when using Fit.Layout */
+  layoutScaleFactor?: number;
+  /** Referenced assets for out-of-band asset loading */
+  referencedAssets?: ReferencedAssets;
+}
+
+function isNitroFile(file: RiveFile | RiveFileInput): file is RiveFile {
+  return (
+    typeof file === 'object' &&
+    '__type' in file &&
+    file.__type === 'HybridObject<RiveFile>'
+  );
+}
+
+function RiveViewWithFileInput(
+  props: Omit<RiveViewProps, 'file'> & {
+    file: RiveFileInput;
+    referencedAssets?: ReferencedAssets;
+  }
+) {
+  const { file, referencedAssets, ...rest } = props;
+  const { riveFile, isLoading, error } = useRiveFile(file, referencedAssets);
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  } else if (error != null) {
+    return <Text>{error}</Text>;
+  } else {
+    return <NitroRiveView {...rest} file={riveFile} />;
+  }
+}
+
+export function RiveView(props: RiveViewProps) {
+  const { file, referencedAssets, ...rest } = props;
+
+  if (isNitroFile(file)) {
+    return <NitroRiveView {...rest} file={file} />;
+  } else {
+    return (
+      <RiveViewWithFileInput
+        {...rest}
+        file={file}
+        referencedAssets={referencedAssets}
+      />
+    );
+  }
+}

src/index.tsx

@@ -46,7 +46,7 @@ export function multiply(a: number, b: number): number {
  * - play(): Starts playing the animation
  * - pause(): Pauses the animation
  */
-export const RiveView = getHostComponent<RiveViewProps, RiveViewMethods>(
+export const NitroRiveView = getHostComponent<RiveViewProps, RiveViewMethods>(
   'RiveView',
   () => RiveViewConfig
 ) as ReactNativeView<RiveViewProps, RiveViewTSMethods>;
@@ -78,3 +78,4 @@ export { useRiveColor } from './hooks/useRiveColor';
 export { useRiveTrigger } from './hooks/useRiveTrigger';
 export { useRiveFile } from './hooks/useRiveFile';
 export { type RiveFileInput } from './hooks/useRiveFile';
+export { RiveView } from './core/RiveView';

src/specs/RiveView.nitro.ts

@@ -105,8 +105,4 @@ export type RiveViewTSMethods = Exclude<RiveViewMethods, 'onEventListener'> & {
   onEventListener(onEvent: (event: RiveEvent) => void): void;
 };
 
-/**
- * Type definition for the RiveView component.
- * Combines RiveViewProps and RiveViewMethods with the HybridView type.
- */
 export type RiveView = HybridView<RiveViewProps, RiveViewMethods>;