Skip to main content
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