Props

Rive Component Props

New Runtime (Recommended)

The following are props you can set on the RiveView component:

file · RiveFile · required

The riv file to display, loaded via useRiveFile or RiveFileFactory.

hybridRef · HybridView

The view reference setter, obtained from useRive.

autoPlay · boolean · default: "true"

Automatically start playing the state machine.

fit · Fit · default: "Contain"

How the Rive graphic should fit within its container.

alignment · Alignment · default: "Center"

How the Rive graphic should be aligned within its container.

layoutScaleFactor · 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.

artboardName · String

The name of the artboard to display.

If not set, the default artboard will be used, as configured in the Editor.

stateMachineName · String

The name of the state machine to play.

If not set, the default state machine will be used, as configured in the Editor.

dataBind · 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 documentation for more details.

onError · ((error: RiveError) => void) · required

Custom error handling callback.

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