Rive Ref Methods

Search…
Rive Ref Methods
Once you have access to the Rive ref object, there are a number of methods available to invoke for controlling animations and state machines.
.play()
A reference method that will play animation/animations. For an animation currently playing it is a no-op.
Type: (animationNames?: string | string[], loop?: LoopMode, direction?: Direction, areStateMachines?: boolean) => void
animationNames - Specifies which animations should be played. A string can be passed in the case of a single animation. If this argument hasn't been passed the first animation will be played.
Default: []
loop - Specifies which LoopMode should be used for playing the animations.
Default: LoopMode.Auto
direction - Specifies which Direction should be used for playing the animations.
Default: Direction.Auto
areStateMachines - Specifies whether passed animationNames are state machines or just animations.
Default: false
Example:
1
import Rive, { RiveRef } from 'rive-react-native';
2
​
3
const resourceName = 'truck_v7'
4
​
5
function App() {
6
  const riveRef = React.useRef<RiveRef>(null);
7
​
8
  const handlePlay = () => { riveRef.current?.play() };
9
​
10
  return (
11
    <>
12
      <Rive ref={riveRef} resourceName={resourceName} autoplay={false} />
13
      <Button onPress={handlePlay} title="Play">
14
    </>
15
  );
16
}
Copied!
.pause()
A reference method that will pause animation/animations. For the animations currently stopped/paused it is no-op.
Type: (animationNames?: string | string[], areStateMachines?: boolean) => void
animationNames - Specifies which animations should be paused. A string can be passed in the case of a single animation. If this argument hasn't been passed all currently playing animations will be played.
Default: []
areStateMachines - Specifies whether passed animationNames are state machines or just animations.
Default: false
Example:
1
import Rive, { RiveRef } from 'rive-react-native';
2
​
3
const resourceName = 'truck_v7'
4
​
5
function App() {
6
  const riveRef = React.useRef<RiveRef>(null);
7
​
8
  const handlePause = () => { riveRef.current?.pause() };
9
​
10
  return (
11
    <>
12
      <Rive ref={riveRef} resourceName={resourceName} />
13
      <Button onPress={handlePause} title="Pause">
14
    </>
15
  );
16
}
Copied!
.stop()
A reference method that will stop animation/animations. For the animations currently stopped/paused it is no-op.
Type: (animationNames?: string | string[], areStateMachines?: boolean) => void
animationNames - Specifies which animations should be stopped. A string can be passed in the case of a single animation. If this argument hasn't been passed the whole artboard will be reset and paused.
Default: []
areStateMachines - Specifies whether passed animationNames are state machines or just animations.
Default: false
Example:
1
import Rive, { RiveRef } from 'rive-react-native';
2
​
3
const resourceName = 'truck_v7'
4
​
5
function App() {
6
  const riveRef = React.useRef<RiveRef>(null);
7
​
8
  const handleStop = () => { riveRef.current?.stop() };
9
​
10
  return (
11
    <>
12
      <Rive ref={riveRef} resourceName={resourceName} />
13
      <Button onPress={handleStop} title="Stop">
14
    </>
15
  );
16
}
Copied!
.reset()
A reference method that will reset the whole artboard. It will play animationName or the first animation (if animationName hasn't been passed) immediately if autoplay hasn't been set to false explicitly.
Type: () => void
1
import Rive, { RiveRef } from 'rive-react-native';
2
​
3
const resourceName = 'truck_v7'
4
​
5
function App() {
6
  const riveRef = React.useRef<RiveRef>(null);
7
​
8
  const handleReset = () => { riveRef.current?.reset() };
9
​
10
  return (
11
    <>
12
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
13
      <Button onPress={handleReset} title="Reset">
14
    </>
15
  );
16
}
Copied!
.fireState()
A reference method that will fire trigger identified by the inputName on all active matching state machines.
Type: (stateMachineName: string, inputName: string) => void
stateMachineName - Specifies state machine name which will be matched against all active state machines.
inputName - Specifies the name of the trigger that should be fired.
Example
1
import Rive, { RiveRef } from 'rive-react-native';
2
​
3
const resourceName = 'ui_swipe_left_to_delete'
4
​
5
function App() {
6
  const riveRef = React.useRef<RiveRef>(null);
7
​
8
  const handleFireState = () => { riveRef.current?.fireState('Swipe to delete', 'Trigger Delete') };
9
​
10
  return (
11
    <>
12
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
13
      <Button onPress={handleFireState} title="FireState">
14
    </>
15
  );
16
}
Copied!
.setInputState()
A reference method that will set input state identified by the inputName on all active matching state machines to the given value.
Type: (stateMachineName: string, inputName: string, value: boolean | number) => void
stateMachineName - Specifies state machine name which will be matched against all active state machines.
inputName - Specifies name of the input which state should be updated.
value - Specifies a value that the input state should be set to.
Example:
1
import Rive, { RiveRef } from 'rive-react-native';
2
​
3
const resourceName = 'ui_swipe_left_to_delete'
4
const threshold = 50
5
​
6
function App() {
7
  const riveRef = React.useRef<RiveRef>(null);
8
​
9
  const handleFireState = () => {
10
    riveRef.current?.setInputState(
11
      'Swipe to delete',
12
      'Swipe Threshold',
13
      threshold
14
    );
15
  };
16
​
17
  return (
18
    <>
19
      <Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
20
      <Button onPress={handleFireState} title="FireState">
21
    </>
22
  );
23
}
Copied!
​
Props
Vue
Last modified 2mo ago
Copy link
Contents
`.play()`

`.pause()`

`.stop()`

`.reset()`

`.fireState()`

`.setInputState()`
