@rive-app/react-native 0.1.1-beta.0

package/src/specs/RiveFile.nitro.ts

@@ -0,0 +1,57 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+import type { ViewModel } from './ViewModel.nitro';
+import type { ArtboardBy } from './ArtboardBy';
+import type { RiveImage } from './RiveImage.nitro';
+
+export type ResolvedReferencedAsset = {
+  sourceUrl?: string;
+  sourceAsset?: string;
+  /** URL on iOS, URL or resource name on Android (from Image.resolveAssetSource) */
+  sourceAssetId?: string;
+  path?: string;
+  image?: RiveImage;
+};
+
+export type ReferencedAssetsType = {
+  data?: Record<string, ResolvedReferencedAsset>;
+};
+
+/**
+ * A Rive file (.riv) as created in the Rive editor.
+ */
+export interface RiveFile
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  /** The number of view models in the Rive file */
+  readonly viewModelCount?: number;
+  /** Get a view model by index */
+  viewModelByIndex(index: number): ViewModel | undefined;
+  /** Get a view model by name */
+  viewModelByName(name: string): ViewModel | undefined;
+  /** Returns the default view model for the provided artboard */
+  defaultArtboardViewModel(artboardBy?: ArtboardBy): ViewModel | undefined;
+  updateReferencedAssets(referencedAssets: ReferencedAssetsType): void;
+}
+
+export interface RiveFileFactory
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  fromURL(
+    url: string,
+    loadCdn: boolean,
+    referencedAssets?: ReferencedAssetsType
+  ): Promise<RiveFile>;
+  fromFileURL(
+    fileURL: string,
+    loadCdn: boolean,
+    referencedAssets?: ReferencedAssetsType
+  ): Promise<RiveFile>;
+  fromResource(
+    resource: string,
+    loadCdn: boolean,
+    referencedAssets?: ReferencedAssetsType
+  ): Promise<RiveFile>;
+  fromBytes(
+    bytes: ArrayBuffer,
+    loadCdn: boolean,
+    referencedAssets?: ReferencedAssetsType
+  ): Promise<RiveFile>;
+}

package/src/specs/RiveImage.nitro.ts

@@ -0,0 +1,42 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+
+/**
+ * A Rive-compatible image that can be used for:
+ * - Referenced assets (out-of-band asset loading)
+ * - Image data binding (future: ViewModelImageProperty)
+ *
+ * The image stores the raw encoded bytes and is decoded when assigned to an asset.
+ */
+export interface RiveImage
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  /** The size of the image data in bytes */
+  readonly byteSize: number;
+}
+
+/**
+ * Factory for creating RiveImage instances from various sources.
+ * Exposed as `RiveImages` in the public API.
+ */
+export interface RiveImageFactory
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  /**
+   * Load an image from a URL (http/https/file://)
+   * @param url The URL to load the image from
+   * @returns A promise that resolves to the loaded RiveImage
+   */
+  loadFromURLAsync(url: string): Promise<RiveImage>;
+
+  /**
+   * Load an image from a bundled resource
+   * @param resource The resource name (e.g., "image.png")
+   * @returns A promise that resolves to the loaded RiveImage
+   */
+  loadFromResourceAsync(resource: string): Promise<RiveImage>;
+
+  /**
+   * Load an image from raw bytes
+   * @param bytes The image data as an ArrayBuffer
+   * @returns A promise that resolves to the loaded RiveImage
+   */
+  loadFromBytesAsync(bytes: ArrayBuffer): Promise<RiveImage>;
+}

package/src/specs/RiveView.nitro.ts

@@ -0,0 +1,149 @@
+import type {
+  HybridView,
+  HybridViewProps,
+  HybridViewMethods,
+} from 'react-native-nitro-modules';
+import type { RiveFile } from './RiveFile.nitro';
+import { Fit } from '../core/Fit';
+import type { ViewModelInstance } from './ViewModel.nitro';
+import type { Alignment } from '../core/Alignment';
+import type { UnifiedRiveEvent, RiveEvent } from '../core/Events';
+import type { RiveError } from '../core/Errors';
+
+export enum DataBindMode {
+  Auto,
+  None,
+}
+export interface DataBindByName {
+  byName: string;
+}
+
+/**
+ * Props interface for the RiveView component.
+ * Extends HybridViewProps to include Rive-specific properties.
+ */
+export interface RiveViewProps extends HybridViewProps {
+  /** Name of the artboard to display from the Rive file */
+  artboardName?: string;
+  /** Name of the state mgachine to play */
+  stateMachineName?: string;
+  /** Whether to automatically start playing the state machine */
+  autoPlay?: boolean;
+  /** The Rive file to be displayed */
+  file: RiveFile;
+  /** 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;
+  /** The view model instance to bind, to the state machine. Defaults to DataBindMode.Auto */
+  dataBind?: ViewModelInstance | DataBindMode | DataBindByName;
+  /** Callback function that is called when an error occurs */
+  onError: (error: RiveError) => void;
+}
+
+/**
+ * Methods interface for the RiveView component.
+ * Extends HybridViewMethods to include Rive-specific methods.
+ */
+export interface RiveViewMethods extends HybridViewMethods {
+  /**
+   * Waits for the Rive view to be ready
+   * @returns A boolean promise that resolves when the Rive view is ready
+   */
+  awaitViewReady(): Promise<boolean>;
+  /** Binds the view model instance to the Rive view */
+  bindViewModelInstance(viewModelInstance: ViewModelInstance): void;
+  /**
+   * Gets the currently bound view model instance from the Rive view
+   * @returns The bound ViewModelInstance, or null if none is bound
+   */
+  getViewModelInstance(): ViewModelInstance | undefined;
+  /** Starts playing the Rive graphic */
+  play(): Promise<void>;
+  /** Pauses the the Rive graphic */
+  pause(): Promise<void>;
+  /** Resets the Rive graphic to its initial state */
+  reset(): Promise<void>;
+
+  /** play if needed: low overhead function to make sure the rive graphics is playing. Use after property value update, to make sure graphics is updated */
+  playIfNeeded(): void;
+
+  /**
+   * Adds an event listener to the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param onEvent - The function to call when an event is triggered
+   */
+  onEventListener(onEvent: (event: UnifiedRiveEvent) => void): void;
+  /**
+   * Removes all event listeners from the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   */
+  removeEventListeners(): void;
+  /**
+   * Sets a number state machine input on the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the state machine input
+   * @param value - The value to set the state machine input to
+   * @param path - The optional path to the state machine input on a nested artboard
+   */
+  setNumberInputValue(name: string, value: number, path?: string): void;
+  /**
+   * Gets a number state machine input from the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the state machine input
+   * @param path - The optional path to the state machine input on a nested artboard
+   * @returns The value of the state machine input
+   */
+  getNumberInputValue(name: string, path?: string): number;
+  /**
+   * Sets a boolean state machine input on the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the state machine input
+   * @param value - The value to set the state machine input to
+   * @param path - The optional path to the state machine input on a nested artboard
+   */
+  setBooleanInputValue(name: string, value: boolean, path?: string): void;
+  /**
+   * Gets a boolean state machine input from the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the state machine input
+   * @param path - The optional path to the state machine input on a nested artboard
+   * @returns The value of the state machine input
+   */
+  getBooleanInputValue(name: string, path?: string): boolean;
+  /**
+   * Triggers a trigger state machine input on the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the state machine input
+   * @param path - The optional path to the state machine input on a nested artboard
+   */
+  triggerInput(name: string, path?: string): void;
+  /**
+   * Sets the text run value on the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the text run
+   * @param value - The text to set the text run value to
+   * @param path - The optional path to the text run on a nested artboard
+   */
+  setTextRunValue(name: string, value: string, path?: string): void;
+  /**
+   * Gets the text run value from the Rive view
+   * @deprecated Use data binding instead. See https://rive.app/docs/runtimes/data-binding
+   * @param name - The name of the text run
+   * @param path - The optional path to the text run on a nested artboard
+   * @returns The text run value
+   */
+  getTextRunValue(name: string, path?: string): string;
+}
+
+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>;

package/src/specs/ViewModel.nitro.ts

@@ -0,0 +1,126 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+import type { RiveImage } from './RiveImage.nitro';
+
+/**
+ * A Rive View Model as created in the Rive editor.
+ * @see {@link https://rive.app/docs/runtimes/data-binding Rive Data Binding Documentation}
+ */
+export interface ViewModel
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  /** The number of properties in the view model */
+  readonly propertyCount: number;
+  /** The number of view model instances in the view model */
+  readonly instanceCount: number;
+  /** The name of the view model */
+  readonly modelName: string;
+  /** Create a new instance of the view model by index */
+  createInstanceByIndex(index: number): ViewModelInstance | undefined;
+  /** Create a new instance of the view model by name */
+  createInstanceByName(name: string): ViewModelInstance | undefined;
+  /** Create the default instance of the view model */
+  createDefaultInstance(): ViewModelInstance | undefined;
+  /** Create an empty/new view model instance */
+  createInstance(): ViewModelInstance | undefined;
+}
+
+/**
+ * An instance of a Rive {@link ViewModel} that can be used to access and modify properties
+ * in the view model.
+ * @see {@link https://rive.app/docs/runtimes/data-binding Rive Data Binding Documentation}
+ */
+export interface ViewModelInstance
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+  /** The name of the view model instance */
+  readonly instanceName: string;
+  /** Get a number property from the view model instance at the given path */
+  numberProperty(path: string): ViewModelNumberProperty | undefined;
+
+  /** Get a string property from the view model instance at the given path */
+  stringProperty(path: string): ViewModelStringProperty | undefined;
+
+  /** Get a boolean property from the view model instance at the given path */
+  booleanProperty(path: string): ViewModelBooleanProperty | undefined;
+
+  /** Get a color property from the view model instance at the given path */
+  colorProperty(path: string): ViewModelColorProperty | undefined;
+
+  /** Get an enum property from the view model instance at the given path */
+  enumProperty(path: string): ViewModelEnumProperty | undefined;
+
+  /** Get a trigger property from the view model instance at the given path */
+  triggerProperty(path: string): ViewModelTriggerProperty | undefined;
+
+  /** Get an image property from the view model instance at the given path */
+  imageProperty(path: string): ViewModelImageProperty | undefined;
+}
+
+export interface ViewModelProperty
+  extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {}
+
+export interface ObservableProperty {
+  /** Remove all listeners from the view model number property */
+  removeListeners(): void;
+}
+
+export interface ViewModelNumberProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** The value of the view model number property */
+  value: number;
+  /** Add a listener to the view model number property */
+  addListener(onChanged: (value: number) => void): void;
+}
+
+export interface ViewModelStringProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** The value of the view model string property */
+  value: string;
+  /** Add a listener to the view model string property */
+  addListener(onChanged: (value: string) => void): void;
+}
+
+export interface ViewModelBooleanProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** The value of the view model boolean property */
+  value: boolean;
+  /** Add a listener to the view model boolean property */
+  addListener(onChanged: (value: boolean) => void): void;
+}
+
+export interface ViewModelColorProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** The value of the view model color property */
+  value: number;
+  /** Add a listener to the view model color property */
+  addListener(onChanged: (value: number) => void): void;
+}
+
+export interface ViewModelEnumProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** The value of the view model enum property */
+  value: string;
+  /** Add a listener to the view model enum property */
+  addListener(onChanged: (value: string) => void): void;
+}
+
+export interface ViewModelTriggerProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** Add a listener to the view model trigger property */
+  addListener(onChanged: () => void): void;
+  /** Trigger the view model trigger property */
+  trigger(): void;
+}
+
+export interface ViewModelImageProperty
+  extends ViewModelProperty,
+    ObservableProperty {
+  /** Set the image property value */
+  set(image: RiveImage | undefined): void;
+  /** Add a listener to the view model image property */
+  addListener(onChanged: () => void): void;
+}

package/src/types.tsx

@@ -0,0 +1,34 @@
+export interface UseRivePropertyResult<T> {
+  /**
+   * The current value of the property.
+   */
+  value: T | undefined;
+  /**
+   * Set the value of the property.
+   * @param value - The value to set the property to.
+   */
+  setValue: (value: T) => void;
+  /**
+   * The error if the property is not found.
+   */
+  error: Error | null;
+}
+
+export interface UseRiveTriggerResult {
+  /**
+   * Fires the property trigger.
+   */
+  trigger: () => void;
+  /**
+   * The error if the property is not found.
+   */
+  error: Error | null;
+}
+
+/**
+ * Parameters for interacting with trigger properties of a ViewModelInstance
+ * @property onTrigger - Callback that runs when the trigger fires
+ */
+export type UseViewModelInstanceTriggerParameters = {
+  onTrigger?: () => void;
+};