Android: unstable callback references can make `useRiveTrigger` and `onEventReceived` miss events

[edgarrii]

Summary

On Android, after updating @rive-app/react-native from 0.4.2 to 0.4.5, we found a case where Rive trigger/event listeners can silently stop firing if the callback reference changes across React re-renders.

This does not reproduce on iOS with the same .riv files and the same JS logic.

A practical workaround on our side was to make callbacks stable with useEvent / useRef + useCallback([]).

This looks related to listener/property re-subscription timing and may be adjacent to #156, but the repro here does not depend on autoPlay={false}.

Environment

• @rive-app/react-native: 0.4.5
• React Native: 0.84.1
• Platform: Android only
• Previous working version: 0.4.2

Repro pattern

We use ViewModel triggers and event listeners from React components that can re-render multiple times while the screen is mounted.

Problematic shape:

const { instance: riveInstance } = useViewModelInstance(riveFile, {
  instanceName: theme.isDarkTheme ? 'dark' : 'light',
  viewModelName: 'Theme',
});

useRiveTrigger('animationFinish', riveInstance, {
  onTrigger: () => {
    onAnimationEnd();
    wasAnimationPlayed.current = true;
  },
});

and similarly:

<RiveAnimation
  onEventReceived={(event) => {
    if (event.name === 'anim_finish') {
      showButton();
    }
  }}
/>

In our app, these components re-render several times while mounted. On Android, after the update to 0.4.5, the listener may stop receiving the expected trigger/event.

Workaround

Making the callback reference stable fixes the issue for us:

const handleAnimationFinish = useEvent(() => {
  onAnimationEnd();
  wasAnimationPlayed.current = true;
});

useRiveTrigger('animationFinish', riveInstance, {
  onTrigger: handleAnimationFinish,
});

Expected behavior

Changing the JS callback reference between renders should not cause Android trigger/event delivery to become unreliable.

Actual behavior

On Android, useRiveTrigger(..., { onTrigger }) and event listeners passed through component props can miss expected events/triggers when callback references change across renders.

Notes

We noticed this after the hook/runtime changes introduced in the newer 0.4.x line. From reading the runtime code, it looks like listener/property lifecycle may now be more sensitive to option identity changes during re-render.

[mfazekas]

Thanks for the detailed report! We tried to reproduce this with an intentionally unstable callback (new reference on every render, React Compiler disabled via 'use no memo') using useRiveTrigger with a trigger that fires from the Rive state machine. We verified the callback identity changes on every re-render, but triggers kept firing correctly on both iOS and Android (tested on main / v0.4.6).

Reproducer component (click to expand)

Listens for the Button/Pressed trigger in rewards.riv:

import * as React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import {
  RiveView,
  useRiveFile,
  useRiveTrigger,
  useViewModelInstance,
  Fit,
} from '@rive-app/react-native';

export default function Issue230() {
  'use no memo';
  const [renderCount, setRenderCount] = React.useState(0);
  const [triggerCount, setTriggerCount] = React.useState(0);
  const [log, setLog] = React.useState<string[]>([]);

  const addLog = (msg: string) => {
    const ts = new Date().toISOString().slice(11, 19);
    setLog((prev) => [`[${ts}] ${msg}`, ...prev].slice(0, 20));
  };

  const { riveFile } = useRiveFile(require('./rewards.riv'));
  const { instance } = useViewModelInstance(riveFile);

  // Intentionally unstable — new reference every render
  const onTriggerCallback = () => {
    setTriggerCount((c) => c + 1);
    addLog(`Trigger fired! (render #${renderCount})`);
  };

  // Verify callback identity actually changes
  const prevCallbackRef = React.useRef(onTriggerCallback);
  if (prevCallbackRef.current !== onTriggerCallback) {
    console.log(`callback identity CHANGED (render #${renderCount})`);
    prevCallbackRef.current = onTriggerCallback;
  }

  const { error: triggerError } = useRiveTrigger(
    'Button/Pressed',
    instance,
    { onTrigger: onTriggerCallback }
  );

  return (
    <View style={styles.container}>
      <Text>Renders: {renderCount} | Triggers received: {triggerCount}</Text>
      <Pressable onPress={() => {
        setRenderCount((c) => c + 1);
        addLog(`Re-rendered`);
      }}>
        <Text>Force Re-render</Text>
      </Pressable>
      {riveFile && instance && (
        <RiveView
          file={riveFile}
          fit={Fit.Contain}
          style={{ width: '100%', height: 200 }}
          dataBind={instance}
        />
      )}
      {log.map((entry, i) => (
        <Text key={i} style={{ fontSize: 11 }}>{entry}</Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 12 },
});

Steps: tap the button inside the Rive graphic → tap "Force Re-render" several times → tap the Rive button again. Triggers kept arriving on both platforms even with callback identity changing every render.

Could you provide a minimal reproducer component and the .riv file you're using? That would help us figure out if this is specific to certain trigger/event patterns or ViewModel configurations.

[mfazekas]

Was able to reproduce, fix is in progress