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