Props

This article is out of date! Find the new version here.

Rive Component Props

The following are props you can set on the Rive React component for this 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