> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Props

> Rive Component Props

<Tabs>
  <Tab title="New Runtime (Recommended)">
    The following are props you can set on the `RiveView` component:

    <ResponseField name="file" type="RiveFile" required>
      The **riv** file to display, loaded via `useRiveFile` or `RiveFileFactory`.
    </ResponseField>

    <ResponseField name="hybridRef" type="HybridView">
      The view reference setter, obtained from `useRive`.
    </ResponseField>

    <ResponseField name="autoPlay" type="boolean" default="true">
      Automatically start playing the state machine.
    </ResponseField>

    <ResponseField name="fit" type="Fit" default="Contain">
      How the Rive graphic should fit within its container.
    </ResponseField>

    <ResponseField name="alignment" type="Alignment" default="Center">
      How the Rive graphic should be aligned within its container.
      <Note>Ignored when using `Fit.Layout`.</Note>
    </ResponseField>

    <ResponseField name="layoutScaleFactor" type="double" default="-1">
      The scale factor to apply to the Rive graphic when using `Fit.Layout`. The default value of `-1` uses the device's DPI.
      <Note>This property has no effect for any other `Fit` type.</Note>
    </ResponseField>

    <ResponseField name="artboardName" type="String">
      The name of the artboard to display.

      *If not set, the default artboard will be used, as configured in the Editor.*
    </ResponseField>

    <ResponseField name="stateMachineName" type="String">
      The name of the state machine to play.

      *If not set, the default state machine will be used, as configured in the Editor.*
    </ResponseField>

    <ResponseField name="dataBind" type="ViewModelInstance | DataBindMode | DataBindByName" default="DataBindMode.Auto">
      The view model instance to bind to the state machine. Can be:

      * A `ViewModelInstance` object (from `useViewModelInstance`)
      * `DataBindMode.Auto` (default) - automatically binds the default view model instance
      * `DataBindMode.None` - no data binding
      * `{ byName: string }` - bind by instance name

      See the [Data Binding](/runtimes/react-native/data-binding) documentation for more details.
    </ResponseField>

    <ResponseField name="onError" type="((error: RiveError) => void)" required>
      Custom error handling callback.
    </ResponseField>
  </Tab>

  <Tab title="Legacy Runtime">
    The following are props you can set on the Rive React component for the legacy runtime:

    * `children` *(optional)* - Can be used to display something positioned `absolutely` on top of the rive animation view.
    * `style` *(optional) -* Style of the rive animation view wrapper.
      * Default: `undefined`
      * Type: `StyleProp<ViewStyle>`
    * `resourceName` *(optional)* - A file name that matches the rive file without `.riv` extension. You should provide either `resourceName` or `url` not both at the same time.
      * Default: `undefined`
      * Type: `string`
    * `url` *(optional)* - A URL that provides a rive file. You should provide either `resourceName` or `url` not both at the same time.
      * Default: `undefined`
      * Type: `string`
    * `autoplay` *(optional)* - Opening a rive animation view or specifying new `resourceName` or `url` will make it automatically play, when it is ready.
      * Default: `true`
      * Type: `boolean`
    * `fit` *(optional)* - Specifies how animation should be displayed inside rive animation view
      * Default: `Fit.Contain`
      * Type: `Fit`
    * `alignment` *(optional)* - Specifies how animation should be aligned inside rive animation view.
      * Default: `Alignment.None`
      * Type: `Alignment`
    * `artboardName` *(optional)* - Specifies which animation artboard should be displayed in rive animation view.
      * Default: `undefined`
      * Type: `string`
    * `animationName` *(optional)* - Specifies which animation should be played when `autoplay` is set to `true`.
      * Default: `undefined`
      * Type: `string`
    * `stateMachineName` *(optional)* - Specifies which stateMachine should be played when `autoplay` is set to `true`.
      * Default: `undefined`
      * Type: `string`
    * `testID` *(optional)* - Specifies testID which could be handy in tests.
      * Default: `undefined`
      * Type: `string`
    * `onPlay` *(optional)* - Callback function that is called when animation or stateMachine has been started.
      * Type: `(animationName: string, isStateMachine: boolean) => void`
    * `onPause` *(optional)* - Callback function that is called when animation or stateMachine has been paused.
      * Type: `(animationName: string, isStateMachine: boolean) => void`
    * `onStop` *(optional)* - Callback function that is called when animation or stateMachine has been stopped.
      * Type: `(animationName: string, isStateMachine: boolean) => void`
    * `onLoopEnd` *(optional)* - Callback function that is called when animation loop has been ended. **Note:** This callback is only invoked if playing individual animations via the `animationName` prop, and does not get invoked if playing a state machine via the `stateMachineName` prop.
      * Type: `(animationName: string, loopMode: LoopMode) => void`
    * `onStateChanged` *(optional)* - Callback function that is called when the internal animation state has been changed. It's tightly coupled with state machines feature.
      * Type: `(stateMachineName: string, stateName: string) => void`
    * `onError` *(optional)* - Callback function that is called when error is thrown. Allows manual handling of thrown errors that are described by `RNRiveError`.
      * Type: `(riveError: RNRiveError) => void`
    * `onRiveEventReceived` *(optional)* - Callback function that is called when the render loop reports a Rive Event.
      * Type: `(event: RiveGeneralEvent | RiveOpenUrlEvent) => void`
  </Tab>
</Tabs>