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.
A reference method that will play a singular animation or state machine. For an animation currently playing it is a no-op.
Type:
(animationName?: string, loop?: LoopMode, direction?: Direction, isStateMachine?: boolean) => void
animationName
- Specifies which singular animation should be played. We highly recommend passing a value here- Default:
""
- Default:
LoopMode.Auto
- Default:
Direction.Auto
isStateMachine
- Specifies whether the passed inanimationName
is a state machine or just a linear animation.- Default:
false
Example:
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'truck_v7'
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handlePlay = () => { riveRef.current?.play() };
return (
<>
<Rive ref={riveRef} resourceName={resourceName} autoplay={false} />
<Button onPress={handlePlay} title="Play">
</>
);
}
A reference method that will pause any playing animation/state machine. For the animations currently stopped/paused it is no-op.
Type:
() => void
Example:
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'truck_v7'
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handlePause = () => { riveRef.current?.pause() };
return (
<>
<Rive ref={riveRef} resourceName={resourceName} />
<Button onPress={handlePause} title="Pause">
</>
);
}
A reference method that will stop an animation/state machine. For the animations currently stopped/paused it is no-op.
Type:
() => void
Example:
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'truck_v7'
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handleStop = () => { riveRef.current?.stop() };
return (
<>
<Rive ref={riveRef} resourceName={resourceName} />
<Button onPress={handleStop} title="Stop">
</>
);
}
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
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'truck_v7'
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handleReset = () => { riveRef.current?.reset() };
return (
<>
<Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
<Button onPress={handleReset} title="Reset">
</>
);
}
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 thetrigger
that should be fired.
Example
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'ui_swipe_left_to_delete'
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handleFireState = () => { riveRef.current?.fireState('Swipe to delete', 'Trigger Delete') };
return (
<>
<Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
<Button onPress={handleFireState} title="FireState">
</>
);
}
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 theinput
which state should be updated.value
- Specifies a value that theinput
state should be set to.
Example:
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'ui_swipe_left_to_delete'
const threshold = 50
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handleFireState = () => {
riveRef.current?.setInputState(
'Swipe to delete',
'Swipe Threshold',
threshold
);
};
return (
<>
<Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
<Button onPress={handleFireState} title="FireState">
</>
);
}
A reference method that will set a text run value (via
value
) on a given text run (via textRunName
). Type:
setTextRunValue: (textRunName: string, value: string) => void
value
- Specifies a new text value that should be set on the text run
Example:
import Rive, { RiveRef } from 'rive-react-native';
const resourceName = 'ui_swipe_left_to_delete'
const threshold = 50
function App() {
const riveRef = React.useRef<RiveRef>(null);
const handleSetText = () => {
riveRef.current?.setTextRunValue(
'MyRunName',
'New Text',
);
};
return (
<>
<Rive ref={riveRef} resourceName={resourceName} autoplay={true} />
<Button onPress={handleSetText} title="SetText">
</>
);
}
Last modified 1mo ago