Rive Events

⚠️ DEPRECATED: Use Data Binding instead of Events

DEPRECATION NOTICE: This entire page documents the legacy Events system. For new projects: Use Data Binding instead. For existing projects: Plan to migrate from Events to Data Binding as soon as possible. This content is provided for legacy support only.

With Rive events, you have the ability to subscribe to meaningful signals that get reported from animations, state machines, and Rive listeners, all created at design time from the Rive editor. These signals can be subscribed to at runtime and have a specific name, type, and various custom metadata that may accompany the event to help inform the context surrounding its meaning.

For more on the Events feature in general, check out the Events page in the editor section of the docs. The Event system has also been expanded to support Audio Events to trigger audio to play in the editor and at runtime.

For example, in a Rive graphic simulating a loader, there may be an event named LoadComplete fired when transitioning from a complete timeline animation state to an idle state. You can subscribe to Rive events with a callback that the runtime may invoke, and from there, your callback can handle extra functionality at just the right moment when the event fired.

Other practical use cases for events:

• Coordinating audio playback at specific moments in an animation, see Audio Events
• Opening a URL when specific interactions have occurred
• Adding haptic feedback on meaningful touch interactions
• Implementing functionality on Buttons and other UI elements
• Send semantic information
• Communicate any information your runtime needs at the right moment

Subscribing to Events

When you subscribe to Rive events at runtime, you subscribe to all Rive events that may be emitted from a state machine, and you can parse through each event by name or type to execute conditional logic.

Let’s use a 5-star rater Rive example to set any text supplied with events and open a URL if one is given.

New Runtime (Recommended)

Adding a Rive Event Listener

This functionality is deprecated. We recommend using Data Binding.

export default function EventsExample() {
    const { riveViewRef, setHybridRef } = useRive();
    const { riveFile } = useRiveFile(require('path/to/file.riv'));

    const handleRiveEvent = (event: any) => {
    console.log('Rive Event:', event);
    };

    // Add event listener when the ref is available
    useEffect(() => {
    if (riveViewRef) {
        riveViewRef.onEventListener(handleRiveEvent);
    }
    return () => {
        if (riveViewRef) {
        riveViewRef.removeEventListeners();
        }
    };
    }, [riveViewRef]);

    return (
    <View style={styles.container}>
        <View style={styles.riveContainer}>
        {riveFile ? (
            <RiveView
            style={styles.rive}
            autoPlay={true}
            fit={Fit.Contain}
            file={riveFile}
            hybridRef={setHybridRef}
            />
        ) : null}
        </View>
    </View>
    );
}

Legacy Runtime

Adding a Rive Event Listener

Similar to other callback functions you can provide on the <Rive> component, such as onPlay or onStateChange, you can now provide an onRiveEventReceived callback which will be invoked any time a Rive Event gets reported during the render loop.

The API signature is as follows:

onRiveEventReceived?: (event: RiveGeneralEvent | RiveOpenUrlEvent) => void;

Example Usage

import React, { useRef, useState } from 'react';
import {
SafeAreaView,
ScrollView,
Linking,
Text,
} from 'react-native';
import Rive, { Fit, RiveOpenUrlEvent, RiveRef } from 'rive-react-native';

export default function Events() {
const riveRef = useRef<RiveRef>(null);
const [eventMessage, setEventMessage] = useState('');

return (
    <SafeAreaView>
    <ScrollView>
        <Rive
        ref={riveRef}
        autoplay={true}
        fit={Fit.Cover}
        resourceName={'rating'}
        stateMachineName="State Machine 1"
        onRiveEventReceived={(event) => {
            // These are properties added to the event at Design Time in the
            // Rive editor
            const eventProperties = event.properties;
            if (eventProperties?.message) {
            setEventMessage(eventProperties.message as string);
            }

            // If an event has an accompanying URL, open it
            if ('url' in event) {
            Linking.openURL((event as RiveOpenUrlEvent).url || '');
            }
        }}
        />
        <Text>{eventMessage}</Text>
    </ScrollView>
    </SafeAreaView>
);
}

Additional Resources