### Start Metro Server for Example App

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Starts the Metro bundler, which is required to run the example application.

```sh
yarn example start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/rive-app/rive-react-native/blob/main/example/README.md

Run this command in your project directory to install all necessary dependencies.

```bash
npm install
```

--------------------------------

### Run Example App on Android

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
yarn example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS device or simulator.

```sh
yarn example ios
```

--------------------------------

### Install rive-react-native

Source: https://github.com/rive-app/rive-react-native/blob/main/docs/usage-guide.md

Install the SDK using yarn. For iOS, run pod install.

```sh
yarn add rive-react-native
```

--------------------------------

### Install rive-react-native

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/GUIDE.md

Install the rive-react-native library using npm or yarn.

```bash
npm install rive-react-native
# or
yarn add rive-react-native
```

--------------------------------

### Start the Expo Development Server

Source: https://github.com/rive-app/rive-react-native/blob/main/example/README.md

This command starts the Expo development server, allowing you to preview your app on various platforms.

```bash
npx expo start
```

--------------------------------

### Update Example Project with Pod Update

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

After updating the podspec, run this command in the example folder to fetch the new RiveRuntime dependency.

```sh
pod update RiveRuntime
```

--------------------------------

### Complete Character Controller Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

A comprehensive example demonstrating the use of `useRive`, `useRiveNumber`, `useRiveBoolean`, and `useRiveTrigger` to control a Rive animation character. Includes state display and interactive controls.

```typescript
import { useEffect, useState } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import Rive, {
  useRive,
  useRiveNumber,
  useRiveBoolean,
  useRiveTrigger,
} from 'rive-react-native';

export default function CharacterController() {
  const [setRiveRef, riveRef] = useRive();
  const [speed, setSpeed] = useRiveNumber(riveRef, 'speed');
  const [isJumping, setIsJumping] = useRiveBoolean(riveRef, 'isJumping');
  const jumpTrigger = useRiveTrigger(riveRef, 'jump', () => {
    console.log('Jump completed!');
  });

  return (
    <View style={styles.container}>
      <Rive
        ref={setRiveRef}
        resourceName="character"
        autoplay={true}
        style={styles.animation}
      />
      
      <View style={styles.info}>
        <Text>Speed: {speed?.toFixed(2) || '0.00'}</Text>
        <Text>Jumping: {isJumping ? 'Yes' : 'No'}</Text>
      </View>

      <View style={styles.controls}>
        <Button
          title="Slow"
          onPress={() => setSpeed?.(0.5)}
        />
        <Button
          title="Normal"
          onPress={() => setSpeed?.(1.0)}
        />
        <Button
          title="Fast"
          onPress={() => setSpeed?.(2.0)}
        />
        <Button
          title="Jump"
          onPress={() => jumpTrigger?.()}
          disabled={!jumpTrigger || isJumping}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  animation: { flex: 1 },
  info: { padding: 16, backgroundColor: '#f0f0f0' },
  controls: { flexDirection: 'row', gap: 8, padding: 16, flexWrap: 'wrap' },
});
```

--------------------------------

### Conventional Commits Specification Examples

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Examples of commit message types following the conventional commits specification. Use these to categorize your changes.

```text
fix: bug fixes, e.g. fix crash due to deprecated method.
```

```text
feat: new features, e.g. add new method to the module.
```

```text
refactor: code refactor, e.g. migrate from class components to hooks.
```

```text
docs: changes into documentation, e.g. add usage example for the module..
```

```text
test: adding or updating tests, e.g. add integration tests using detox.
```

```text
chore: tooling changes, e.g. change CI config.
```

--------------------------------

### Rive React Native Fit Examples

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Examples demonstrating different Fit options for Rive animations. Use 'Contain' for default, 'Cover' to fill the view, and 'FitWidth' to scale to viewport width.

```typescript
// Default: fit entire animation in bounds
<Rive fit={Fit.Contain} {...} />
```

```typescript
// Cover entire view, may clip content
<Rive fit={Fit.Cover} {...} />
```

```typescript
// Scale to fit viewport width
<Rive fit={Fit.FitWidth} {...} />
```

```typescript
// Use animation's built-in layout system
<Rive
  fit={Fit.Layout}
  layoutScaleFactor={1.0}
  {...} />
```

--------------------------------

### Example Usage of useRiveTrigger Hook

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

This example demonstrates how to use the useRiveTrigger hook to listen for an animation trigger ('gameOverTrigger') and also provides a button to manually fire the same trigger. It shows how to integrate with the useRive hook and manage state based on trigger events.

```typescript
import { useRive, useRiveTrigger } from 'rive-react-native';
import { Button, Text, View } from 'react-native';
import { useState } from 'react';

export default function TriggerExample() {
  const [setRiveRef, riveRef] = useRive();
  const [triggerCount, setTriggerCount] = useState(0);

  // Listen for trigger events and get a fire function
  const fireTrigger = useRiveTrigger(riveRef, 'gameOverTrigger', () => {
    setTriggerCount(c => c + 1);
    console.log('Game Over event triggered from animation!');
  });

  return (
    <View style={{ flex: 1 }}>
      <Rive
        ref={setRiveRef}
        resourceName="game"
        autoplay={true}
        style={{ flex: 1 }}
      />
      <Text>Trigger fired {triggerCount} times</Text>
      <Button
        title="Fire Game Over"
        onPress={() => fireTrigger?.()}
        disabled={!fireTrigger}
      />
    </View>
  );
}
```

--------------------------------

### Using State Machine Inputs

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/MANIFEST.txt

Demonstrates how to interact with a state machine by setting its inputs. This example shows setting a boolean input and a number input.

```javascript
import React, { useRef } from 'react';
import Rive, { RiveRef } from '@rive-app/react-native';

function StateMachineControl() {
  const riveRef = useRef<RiveRef>(null);

  const toggleBooleanInput = () => {
    riveRef.current?.setInputState('MyBooleanInput', true);
  };

  const setNumberInput = () => {
    riveRef.current?.setInputState('MyNumberInput', 42);
  };

  return (
    <>
      <Rive ref={riveRef} stateMachineName="MyStateMachine" resourceName="my-state-machine-animation" />
      <button onClick={toggleBooleanInput}>Toggle Boolean</button>
      <button onClick={setNumberInput}>Set Number</button>
    </>
  );
}

```

--------------------------------

### FileNotFound Error Example (HTTP)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Demonstrates a FileNotFound error when a URL points to a non-existent or inaccessible animation file. The server returns a 404 or similar error.

```typescript
// HTTP: URL returns 404
<Rive url="https://example.com/missing.riv" {...} />
```

--------------------------------

### Example of Native Error Conversion

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/utilities.md

Shows how to handle errors originating from native code by converting them to RNRiveError and logging unknown errors.

```typescript
const nativeError = {
  type: 'FileNotFound',
  message: 'Could not load animation.riv'
};

const error = convertErrorFromNativeToRN(nativeError);
if (error) {
  handleError(error);
} else {
  console.warn('Unknown error from native:', nativeError);
}
```

--------------------------------

### Set Color Using RiveRGBA

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of how to set a color for an artboard element using the `setColor` method with a `RiveRGBA` object.

```typescript
riveRef.current?.setColor('MainArtboard.fillColor', { r: 255, g: 0, b: 0, a: 255 });
```

--------------------------------

### Basic Rive Component Usage

Source: https://github.com/rive-app/rive-react-native/blob/main/docs/rive-react-native-reference.md

Demonstrates the basic setup of the Rive component by providing a resource name for the animation file. Ensure the resource file is available in your project's assets.

```tsx
import Rive from 'rive-react-native';

function App() {
  return <Rive resourceName="truck_v7" />;
}
```

--------------------------------

### onPlay

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Fired when an animation or state machine starts playing. It provides the animation name and a boolean indicating if it's a state machine.

```APIDOC
## onPlay

### Description
Fired when animation or state machine starts playing.

### Parameters
#### Callback Parameters
- **animationName** (string) - The name of the animation or state machine.
- **isStateMachine** (boolean) - True if the playing entity is a state machine, false otherwise.

### Example
```typescript
<Rive
  onPlay={(animationName, isStateMachine) => {
    console.log(`Playing: ${animationName} (SM: ${isStateMachine})`);
  }}
  {...}
/>
```
```

--------------------------------

### useRiveString Hook Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

This example demonstrates using the useRiveString hook to synchronize a TextInput component with a string property in a Rive animation. Changes in the text input update the animation's text property.

```typescript
import { useRive, useRiveString } from 'rive-react-native';
import { TextInput, View } from 'react-native';

export default function StringExample() {
  const [setRiveRef, riveRef] = useRive();
  const [displayText, setDisplayText] = useRiveString(riveRef, 'MainArtboard.message');

  return (
    <View style={{ flex: 1 }}>
      <Rive
        ref={setRiveRef}
        resourceName="text_animation"
        autoplay={true}
        style={{ flex: 1 }}
      />
      <TextInput
        value={displayText || ''}
        onChangeText={setDisplayText}
        placeholder="Enter text"
        style={{ padding: 10, borderWidth: 1 }}
      />
    </View>
  );
}
```

--------------------------------

### Custom iOS Runtime Version in Podfile.properties.json

Source: https://github.com/rive-app/rive-react-native/blob/main/README.md

Demonstrates how to set a custom RiveRuntimeIOSVersion for iOS projects by creating or editing the ios/Podfile.properties.json file. After modification, run 'pod install'.

```json
{
  "RiveRuntimeIOSVersion": "6.18.2"
}
```

--------------------------------

### IncorrectRiveFileUrl Error Examples

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Illustrates IncorrectRiveFileUrl errors for malformed or unsupported URLs. Ensure the URL is valid HTTP/HTTPS and correctly formatted.

```typescript
// Invalid URL
<Rive url="not-a-valid-url" {...} />
<Rive url="ftp://example.com/animation.riv" {...} />
```

--------------------------------

### Rive React Native Alignment Examples

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Examples showing how to align Rive animations within component bounds. Use 'Center' for default, 'TopLeft' for top-left alignment, and 'BottomRight' for bottom-right alignment.

```typescript
// Center animation in bounds
<Rive alignment={Alignment.Center} {...} />
```

```typescript
// Align to top-left
<Rive alignment={Alignment.TopLeft} {...} />
```

```typescript
// Align to bottom-right
<Rive alignment={Alignment.BottomRight} {...} />
```

--------------------------------

### Handle Animation Playback Start

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Use the onPlay callback to detect when an animation or state machine begins playing. It provides the animation name and a boolean indicating if it's a state machine.

```typescript
<Rive
  onPlay={(animationName, isStateMachine) => {
    console.log(`Playing: ${animationName} (SM: ${isStateMachine})`);
  }}
  {...}
/>
```

--------------------------------

### Using Rive with require() Asset Source

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of using the Rive component with an animation file imported using require().

```typescript
import animationFile from './animations/my-animation.riv';

<Rive source={animationFile} {...} />
```

--------------------------------

### Complete Rive Component Configuration

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Demonstrates a full configuration of the Rive component with animation, fit, alignment, and event handlers. Use this for complex setups requiring precise control over animation playback and display.

```typescript
import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Rive, {
  RiveRef,
  Fit,
  Alignment,
  AutoBind,
  LoopMode,
  Direction,
} from 'rive-react-native';

export default function ConfiguredRive() {
  const riveRef = useRef<RiveRef>(null);

  return (
    <View style={styles.container}>
      <Rive
        ref={riveRef}
        resourceName="character"
        animationName="idle"
        autoplay={true}
        fit={Fit.Contain}
        alignment={Alignment.Center}
        layoutScaleFactor={1.5}
        dataBinding={AutoBind(true)}
        style={styles.animation}
        onPlay={(name, isSM) => console.log(`Playing: ${name}`)}
        onError={(error) => console.error(`Error: ${error.message}`)}
      />
      <Button
        title="Play Walk"
        onPress={() => riveRef.current?.play('walk', LoopMode.Loop)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  animation: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
});
```

--------------------------------

### Using Rive with Packaged Asset Source (No Path)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of using the Rive component with a packaged animation file, specifying only the file name.

```typescript
<Rive source={{ fileName: 'my-animation' }} {...} />
```

--------------------------------

### Handle Rive Events (General or Open URL)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of handling different Rive event types. It checks if the event has a 'url' property to determine if it's an RiveOpenUrlEvent and opens the URL.

```typescript
const handleEvent = (event: RiveGeneralEvent | RiveOpenUrlEvent) => {
  if ('url' in event) {
    Linking.openURL((event as RiveOpenUrlEvent).url || '');
  }
};
```

--------------------------------

### Example Usage of isEnum

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how to use the isEnum type guard with RNRiveErrorType to ensure type safety when checking enum values.

```typescript
import { RNRiveErrorType, isEnum } from './helpers';

const value = 'FileNotFound';
if (isEnum(RNRiveErrorType, value)) {
  // TypeScript knows value is RNRiveErrorType
  const error: RNRiveErrorType = value;
}
```

--------------------------------

### FileNotFound Error Example (iOS)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Illustrates a FileNotFound error when an animation file is not correctly bundled on iOS. Ensure 'animation.riv' is included in Build Phases > Copy Bundle Resources.

```typescript
// iOS: animation.riv not in Build Phases > Copy Bundle Resources
<Rive resourceName="animation" {...} />
```

--------------------------------

### Set JAVA_HOME for Android Development

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Ensure the JAVA_HOME environment variable is correctly set for the Android SDK, especially after installing a new JDK version. This is crucial for Android development.

```shell
export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
```

--------------------------------

### Using Rive with URI Asset Source

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of using the Rive component with a remote or local animation file specified by a URI.

```typescript
<Rive source={{ uri: 'https://public.rive.app/animation.riv' }} {...} />
```

--------------------------------

### Basic useRive Hook Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

Demonstrates the basic usage of the useRive hook to attach a ref to a Rive component. The riveRef is initially null and populated once the animation is ready.

```typescript
import { useRive } from 'rive-react-native';

export default function MyComponent() {
  const [setRiveRef, riveRef] = useRive();

  // riveRef is null until the animation loads
  // Once loaded, you can call all RiveRef methods
  
  return (
    <Rive
      ref={setRiveRef}
      resourceName="my_animation"
      autoplay={true}
    />
  );
}
```

--------------------------------

### IncorrectStateMachineName Error Example (Prop)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Demonstrates an IncorrectStateMachineName error when the 'stateMachineName' prop does not match any state machine in the Rive file. Names are case-sensitive.

```typescript
// File has state machines: ["PlayerState", "EnemyState"]
<Rive
  resourceName="game"
  stateMachineName="BossState" // doesn't exist
  {...}
/>
```

--------------------------------

### Play Animation or State Machine

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Use this to start playing an animation or state machine. You can specify the animation name, loop mode, direction, and whether it's a state machine.

```typescript
const riveRef = useRef<RiveRef>(null);

// Play default animation
riveRef.current?.play();

// Play specific animation
riveRef.current?.play('walk', LoopMode.Loop, Direction.Forwards);

// Play state machine
riveRef.current?.play('StateMachine1', LoopMode.Loop, Direction.Forwards, true);
```

--------------------------------

### Play Specific Animation

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Use the `animationName` prop to play a specific animation. Set `autoplay={true}` to start playback on mount.

```typescript
<Rive
  resourceName="character"
  animationName="walk"
  autoplay={true}
  {...}
/>
```

--------------------------------

### Using Rive with Packaged Asset Source (With Path)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of using the Rive component with a packaged animation file, specifying both the file name and the Android asset path.

```typescript
<Rive source={{ fileName: 'animation.riv', path: 'raw/' }} {...} />
```

--------------------------------

### Manual Animation Control

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Set `autoplay={false}` to manually control playback using a ref. Call `play()` on the ref to start playback.

```typescript
<Rive
  resourceName="animation"
  autoplay={false}
  ref={riveRef}
  {...}
/>
<Button onPress={() => riveRef.current?.play()} title="Play" />
```

--------------------------------

### Error Recovery Strategy with Retries

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Implement an error recovery mechanism by providing fallback content or retry logic. This example demonstrates retrying the animation load up to three times for FileNotFound errors.

```typescript
const [hasError, setHasError] = useState(false);
const [retryCount, setRetryCount] = useState(0);

const handleError = (error: RNRiveError) => {
  if (error.type === RNRiveErrorType.FileNotFound && retryCount < 3) {
    // Retry after delay
    setTimeout(() => setRetryCount(c => c + 1), 1000);
  } else {
    setHasError(true);
  }
};

return hasError ? (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Failed to load animation</Text>
  </View>
) : (
  <Rive
    key={retryCount}
    resourceName="animation"
    onError={handleError}
    {...}
  />
);
```

--------------------------------

### Load Rive Animation by Bundled Resource Name

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/configuration.md

Use `resourceName` to load animations bundled directly with your application. Follow platform-specific setup instructions to ensure the .riv file is correctly included in the build.

```typescript
<Rive
  resourceName="my_animation"
  {...}
/>
```

--------------------------------

### State Machine Control

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Control Rive animations using state machines. This example shows how to toggle a boolean input and trigger a one-shot event. Ensure the `resourceName` and `stateMachineName` props match your Rive file.

```typescript
import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import Rive, { RiveRef } from 'rive-react-native';

export default function StateControl() {
  const riveRef = useRef<RiveRef>(null);

  const toggleMovement = async () => {
    const currentValue = await riveRef.current?.getBooleanState('isMoving');
    riveRef.current?.setInputState('MyStateMachine', 'isMoving', !currentValue);
  };

  const jump = () => {
    riveRef.current?.fireState('MyStateMachine', 'jump');
  };

  return (
    <View style={{ flex: 1 }}>
      <Rive
        ref={riveRef}
        resourceName="character"
        stateMachineName="MyStateMachine"
        autoplay={true}
        style={{ flex: 1 }}
      />
      <Button title="Toggle Movement" onPress={toggleMovement} />
      <Button title="Jump" onPress={jump} />
    </View>
  );
}
```

--------------------------------

### Example Usage of XOR Type for Mutually Exclusive Props

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/utilities.md

Illustrates the XOR type utility for defining props where only one of a set of properties can be provided, preventing invalid combinations.

```typescript
// Either url or resourceName, but not both
type Props = XOR<
  { url: string },
  { resourceName: string }
>;

const valid1: Props = { url: 'https://...' };     // ✓
const valid2: Props = { resourceName: 'anim' };   // ✓
const invalid: Props = {                          // ✗
  url: 'https://...',
  resourceName: 'anim'
};
```

--------------------------------

### Reset Project to a Starter State

Source: https://github.com/rive-app/rive-react-native/blob/main/example/README.md

Use this command to reset your project to its initial starter code, moving existing code to an 'app-example' directory.

```bash
npm run reset-project
```

--------------------------------

### useRiveBoolean Hook Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

This example demonstrates how to use the useRiveBoolean hook to subscribe to and control a boolean property of a Rive animation. It includes a button to toggle the boolean state.

```typescript
import { useRive, useRiveBoolean } from 'rive-react-native';
import { Button } from 'react-native';

export default function BooleanExample() {
  const [setRiveRef, riveRef] = useRive();
  const [isEnabled, setIsEnabled] = useRiveBoolean(riveRef, 'MainArtboard.isEnabled');

  return (
    <>
      <Rive
        ref={setRiveRef}
        resourceName="my_animation"
        autoplay={true}
      />
      <Button
        title={isEnabled ? 'Disable' : 'Enable'}
        onPress={() => setIsEnabled(!isEnabled)}
      />
    </>
  );
}
```

--------------------------------

### Basic Rive Component Usage

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/MANIFEST.txt

Demonstrates how to use the main Rive component to load and display an animation from a resource name. Ensure the animation file is correctly placed and named.

```javascript
import Rive from '@rive-app/react-native';

function MyRiveAnimation() {
  return (
    <Rive resourceName="my-animation" />
  );
}

```

--------------------------------

### useRiveNumber Hook Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

This example shows how to use the useRiveNumber hook to bind a Slider component to a numeric property of a Rive animation. It allows real-time updates to the animation's numeric state.

```typescript
import { useRive, useRiveNumber } from 'rive-react-native';
import { Slider, View, Text } from 'react-native';

export default function NumberExample() {
  const [setRiveRef, riveRef] = useRive();
  const [health, setHealth] = useRiveNumber(riveRef, 'health');

  return (
    <View style={{ flex: 1 }}>
      <Rive
        ref={setRiveRef}
        resourceName="character"
        autoplay={true}
        style={{ flex: 1 }}
      />
      <View style={{ padding: 20 }}>
        <Text>Health: {health || 0}</Text>
        <Slider
          style={{ width: '100%', height: 40 }}
          minimumValue={0}
          maximumValue={100}
          value={health || 50}
          onValueChange={setHealth}
        />
      </View>
    </View>
  );
}
```

--------------------------------

### Run Unit Tests with Yarn

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Execute unit tests to verify the functionality of your changes. Add new tests for any new features or bug fixes.

```sh
yarn test
```

--------------------------------

### Import Data Binding Utilities

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Import utilities for data binding, including AutoBind, BindByIndex, BindByName, and BindEmpty.

```typescript
// Data binding
import { AutoBind, BindByIndex, BindByName, BindEmpty } from 'rive-react-native';
```

--------------------------------

### Stop Animation

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Stops the currently playing animation and resets it to its starting state.

```typescript
riveRef.current?.stop();
```

--------------------------------

### Handle RNRiveError Callback

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/types.md

Example of how to handle errors received in the onError callback. Logs the error type and message to the console.

```typescript
const handleError = (error: RNRiveError) => {
  console.error(`[${error.type}]: ${error.message}`);
};
```

--------------------------------

### Playback Methods

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Control the playback of animations and state machines.

```APIDOC
## Playback (RiveRef)

### Description
Methods to control animation playback.

### Methods
- `play(animationName?, loop?, direction?, isStateMachine?) => void`: Start animation/state machine.
- `pause() => void`: Pause current playback.
- `stop() => void`: Stop animation.
- `reset() => void`: Reset to initial state.
```

--------------------------------

### Basic Animation from URL

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/GUIDE.md

Load and display a Rive animation directly from a URL. Ensure the component has flex: 1 style for proper rendering.

```typescript
import Rive, { Fit, Alignment } from 'rive-react-native';

export default function MyAnimation() {
  return (
    <Rive
      url="https://public.rive.app/community/runtime-files/2195-4346-avatar.riv"
      fit={Fit.Contain}
      alignment={Alignment.Center}
      autoplay={true}
      style={{ flex: 1 }}
    />
  );
}
```

--------------------------------

### IncorrectStateMachineInput Error Examples

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Illustrates IncorrectStateMachineInput errors when using non-existent input names for setInputState() or fireState(). Input names are case-sensitive.

```typescript
// State machine "PlayerState" has inputs: ["isMoving", "isJumping"]
riveRef.current?.setInputState('PlayerState', 'isFalling', true); // doesn't exist
riveRef.current?.fireState('PlayerState', 'dance'); // trigger doesn't exist
```

--------------------------------

### IncorrectArtboardName Error Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Shows an IncorrectArtboardName error when the 'artboardName' prop does not match any artboard in the Rive file. Artboard names are case-sensitive.

```typescript
// File has artboards: ["Main", "Background", "UI"]
<Rive
  resourceName="animation"
  artboardName="GameOver" // doesn't exist
  {...}
/>
```

--------------------------------

### IncorrectAnimationName Error Example (Prop)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Demonstrates an IncorrectAnimationName error when the 'animationName' prop does not match any animation in the Rive file. Names are case-sensitive.

```typescript
// Animation file has animations: ["walk", "run", "idle"]
<Rive
  resourceName="character"
  animationName="sprint" // doesn't exist
  {...}
/>
```

--------------------------------

### State Machine Methods

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Interact with state machines by firing triggers and setting input values.

```APIDOC
## State Machine (RiveRef)

### Description
Methods for interacting with state machines.

### Methods
- `fireState(stateMachineName, inputName) => void`: Fire trigger input.
- `setInputState(stateMachineName, inputName, value) => void`: Set boolean/number input.
- `getBooleanState(inputName) => Promise<boolean | null>`: Get boolean input value.
- `getNumberState(inputName) => Promise<number | null>`: Get number input value.
```

--------------------------------

### Utilities Methods

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Access utility functions for Rive integration.

```APIDOC
## Utilities (RiveRef)

### Description
Utility methods for Rive integration.

### Methods
- `internalNativeEmitter() => RiveNativeEventEmitter`: Access native event emitter.
- `viewTag() => number | null`: Get React Native view tag.
```

--------------------------------

### File Structure Overview

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/START_HERE.md

This snippet outlines the directory structure of the Rive React Native project, indicating the purpose of key files and directories.

```text
output/
├── START_HERE.md                          ← You are here
├── README.md                              ← Overview & quick links
├── GUIDE.md                               ← Developer guide with examples (15KB)
├── INDEX.md                               ← Complete API index (12KB)
├── types.md                               ← Type system reference (10KB)
├── configuration.md                       ← Configuration reference (14KB)
├── errors.md                              ← Error handling (9KB)
└── api-reference/
    ├── Rive.md                            ← Component & methods (35KB)
    ├── hooks.md                           ← All hooks (20KB)
    ├── RiveNativeEventEmitter.md          ← Event system (6KB)
    └── utilities.md                       ← Helper functions (7KB)
```

--------------------------------

### Touch Methods

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Handle touch events for interactive Rive animations.

```APIDOC
## Touch (RiveRef)

### Description
Methods for handling touch events.

### Methods
- `touchBegan(x, y) => void`: Notify touch start.
- `touchEnded(x, y) => void`: Notify touch end.
```

--------------------------------

### Import Main Component and Hooks

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Import the main Rive component and commonly used hooks like useRive, useRiveNumber, and useRiveString.

```typescript
// Main component and hooks
import Rive, { useRive, useRiveNumber, useRiveString } from 'rive-react-native';
```

--------------------------------

### Get Property Type String

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/utilities.md

Converts a PropertyType enum value into its lowercase string representation. Useful for displaying or logging property types.

```typescript
function getPropertyTypeString(propertyType: PropertyType): string
```

```typescript
getPropertyTypeString(PropertyType.Number)   // 'number'
getPropertyTypeString(PropertyType.Boolean)  // 'boolean'
getPropertyTypeString(PropertyType.Color)    // 'color'
getPropertyTypeString(PropertyType.Trigger)  // 'trigger'
```

--------------------------------

### Example Usage of Without Type

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how the Without utility type can be used to exclude properties from a type, resulting in a type with optional 'never' properties.

```typescript
type A = { a: string; b: number };
type B = { b: number };
type Result = Without<A, B>; // { a?: never }
```

--------------------------------

### Import Renderer Configuration

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Import Rive renderer configurations for different platforms (iOS and Android).

```typescript
// Renderer configuration
import { RiveRenderer, RiveRendererIOS, RiveRendererAndroid } from 'rive-react-native';
```

--------------------------------

### Implementing Touch Interaction with Rive Artboards

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/GUIDE.md

Enable touch interactions on Rive artboards by capturing touch events and translating them into Rive's touchBegan and touchEnded methods. This requires measuring the view's position to correctly map touch coordinates.

```typescript
import { useRef } from 'react';
import Rive, { RiveRef, Fit } from 'rive-react-native';
import { GestureResponderEvent, View } from 'react-native';

export default function TouchInteractive() {
  const riveRef = useRef<RiveRef>(null);
  const viewRef = useRef<View>(null);

  const handlePress = (event: GestureResponderEvent) => {
    viewRef.current?.measure((x, y, width, height, pageX, pageY) => {
      const touchX = event.nativeEvent.pageX - pageX;
      const touchY = event.nativeEvent.pageY - pageY;
      
      riveRef.current?.touchBegan(touchX, touchY);
    });
  };

  const handlePressEnd = (event: GestureResponderEvent) => {
    viewRef.current?.measure((x, y, width, height, pageX, pageY) => {
      const touchX = event.nativeEvent.pageX - pageX;
      const touchY = event.nativeEvent.pageY - pageY;
      
      riveRef.current?.touchEnded(touchX, touchY);
    });
  };

  return (
    <View
      ref={viewRef}
      onStartShouldSetResponder={() => true}
      onResponderGrant={handlePress}
      onResponderRelease={handlePressEnd}
      style={{ flex: 1 }}
    >
      <Rive
        ref={riveRef}
        resourceName="interactive"
        fit={Fit.Contain}
        autoplay={true}
        style={{ flex: 1 }}
      />
    </View>
  );
}
```

--------------------------------

### Get Number State at Path

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Retrieves the value of a number input from a nested artboard. Returns a Promise resolving to the number value or null on error.

```typescript
const value = await riveRef.current?.getNumberStateAtPath('health', 'Main.Player');
```

--------------------------------

### Get Boolean State at Path

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Retrieves the value of a boolean input from a nested artboard. Returns a Promise resolving to the boolean value or null on error.

```typescript
const value = await riveRef.current?.getBooleanStateAtPath('isEnabled', 'Main.Nested');
```

--------------------------------

### useRiveEnum Hook Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/hooks.md

Subscribe to an enum property and get/set its value. This hook is useful for controlling animation states or other enumerated properties within your Rive animations.

```typescript
import { useRive, useRiveEnum } from 'rive-react-native';
import { Button, View } from 'react-native';

export default function EnumExample() {
  const [setRiveRef, riveRef] = useRive();
  const [state, setState] = useRiveEnum(riveRef, 'MainArtboard.animationState');

  return (
    <View style={{ flex: 1 }}>
      <Rive
        ref={setRiveRef}
        resourceName="state_animation"
        autoplay={true}
        style={{ flex: 1 }}
      />
      <Button title="Idle" onPress={() => setState('idle')} />
      <Button title="Walk" onPress={() => setState('walk')} />
      <Button title="Run" onPress={() => setState('run')} />
    </View>
  );
}
```

--------------------------------

### UnsupportedRuntimeVersion Error Example

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Shows an UnsupportedRuntimeVersion error when the Rive file's runtime version is newer than the supported version in rive-react-native. Update the library to resolve.

```typescript
// rive-react-native has runtime 6.18.2 but .riv requires 7.0.0+
<Rive resourceName="animation" {...} />
```

--------------------------------

### Setting Nested Artboard Properties

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/MANIFEST.txt

Demonstrates how to manipulate properties (like boolean inputs or text runs) on nested artboards within a Rive file using `setInputStateAtPath` and `setTextRunValueAtPath`.

```javascript
import React, { useRef } from 'react';
import Rive, { RiveRef } from '@rive-app/react-native';

function NestedArtboardControl() {
  const riveRef = useRef<RiveRef>(null);

  const setNestedBoolean = () => {
    riveRef.current?.setInputStateAtPath('NestedArtboardName', 'MyBooleanInput', true);
  };

  const setNestedText = () => {
    riveRef.current?.setTextRunValueAtPath('NestedArtboardName', 'MyTextRun', 'New Text');
  };

  return (
    <>
      <Rive ref={riveRef} resourceName="nested-animation" />
      <button onClick={setNestedBoolean}>Set Nested Boolean</button>
      <button onClick={setNestedText}>Set Nested Text</button>
    </>
  );
}

```

--------------------------------

### Utilities

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/MANIFEST.txt

Helper functions for working with Rive data and types.

```APIDOC
## Utilities

### Description
Helper functions for working with Rive data and types.

### Available Utilities
- **parseColor(hex: string)**: Parses a hex color string into an RGBA object.
- **intToRiveRGBA(color: number)**: Converts an integer color representation to an RGBA object.
- **parsePossibleSources(sources: any)**: Parses various source formats for Rive assets.
- **getPropertyTypeString(type: PropertyType)**: Returns the string name of a property type.
- **isEnum(value: any)**: Type guard to check if a value is an enum.
- **convertErrorFromNativeToRN(error: any)**: Converts native errors to React Native error format.
```

--------------------------------

### MalformedFile Error Examples

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Illustrates MalformedFile errors for corrupted or invalid Rive files. This can occur with incomplete downloads or manual file corruption. Regenerate or re-download the file.

```typescript
// Downloaded incomplete .riv file
<Rive url="https://example.com/animation.riv" {...} />

// Renamed JPG to .riv
<Rive resourceName="notReally" {...} />
```

--------------------------------

### Get Number State

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Retrieves the current value of a root-level number input from a state machine. Returns a Promise resolving to the number value or null if an error occurs.

```typescript
const speed = await riveRef.current?.getNumberState('speed');
console.log('Speed:', speed);
```

--------------------------------

### Verify Code Quality with Yarn Commands

Source: https://github.com/rive-app/rive-react-native/blob/main/CONTRIBUTING.md

Run these commands to ensure your code adheres to TypeScript and ESLint standards. Use the `--fix` flag to automatically correct formatting issues.

```sh
yarn typescript
yarn lint
```

```sh
yarn lint --fix
```

--------------------------------

### Get Boolean State

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Retrieves the current value of a root-level boolean input from a state machine. Returns a Promise resolving to the boolean value or null if an error occurs.

```typescript
const isMoving = await riveRef.current?.getBooleanState('isMoving');
console.log('Moving:', isMoving);
```

--------------------------------

### Basic Animation with URL

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/api-reference/Rive.md

Load and play a Rive animation from a URL. Ensure the Rive component fills its container using the `style` prop.

```typescript
import React, { useRef } from 'react';
import Rive, { RiveRef, Fit, Alignment } from 'rive-react-native';

export default function BasicAnimation() {
  const riveRef = useRef<RiveRef>(null);

  return (
    <Rive
      ref={riveRef}
      url="https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv"
      fit={Fit.Contain}
      alignment={Alignment.Center}
      autoplay={true}
      style={{ flex: 1 }}
    />
  );
}
```

--------------------------------

### Properties Methods

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/INDEX.md

Set various types of properties on Rive elements.

```APIDOC
## Properties (RiveRef)

### Description
Methods for setting properties on Rive elements.

### Methods
- `setBoolean(path, value) => void`: Set boolean property.
- `setString(path, value) => void`: Set string property.
- `setNumber(path, value) => void`: Set number property.
- `setColor(path, color) => void`: Set color property.
- `setEnum(path, value) => void`: Set enum property.
- `trigger(path) => void`: Fire trigger property.
- `setTextRunValue(name, value) => void`: Set text run content.
- `setTextRunValueAtPath(name, value, path) => void`: Set nested text run.
```

--------------------------------

### IncorrectStateMachineName Error Example (Ref)

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/errors.md

Shows an IncorrectStateMachineName error when calling fireState() with a non-existent state machine name via a ref. Ensure the state machine name is correct.

```typescript
// Or via ref
riveRef.current?.fireState('InvalidSM', 'trigger'); // state machine doesn't exist
```

--------------------------------

### Handling Rive Events

Source: https://github.com/rive-app/rive-react-native/blob/main/_autodocs/MANIFEST.txt

Demonstrates how to listen for and handle various events emitted by the Rive component, such as animation completion or state changes.

```javascript
import Rive from '@rive-app/react-native';

function EventHandlingRive() {
  const handleStateChanged = (event: any) => {
    console.log('State changed:', event);
  };

  const handleRiveEvent = (event: any) => {
    console.log('Rive event received:', event);
  };

  return (
    <Rive
      resourceName="my-animation"
      onStateChanged={handleStateChanged}
      onRiveEventReceived={handleRiveEvent}
    />
  );
}

```