rive-react-native icon indicating copy to clipboard operation
rive-react-native copied to clipboard

Inconsistent end-of-animation callback between iOS (`onPause`) and Android (`onStop`)

Open glopez-askit opened this issue 1 month ago • 0 comments

Description

On React Native + Expo, the end-of-animation callback is inconsistent across platforms.

  • On iOS, the animation “end” can only be detected via onPause.
  • On Android, it fires via onStop.

This forces platform-specific handling when all I need is a single “animation finished” signal.

Provide a Repro

Minimal example (Expo, React Native 0.81):

import { StyleSheet, View } from 'react-native';
import { router } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import Rive from 'rive-react-native';

import { STORAGE } from '@/core/config/constants';
import { storage } from '@/core/lib/react-native-mmkv';
import '@/core/lib/tailwind.css';

SplashScreen.preventAutoHideAsync();
SplashScreen.setOptions({ fade: true });

export default function RootScreen() {
  const onLayout = async () => {
    await SplashScreen.hideAsync();
  };

  const onContinue = () => {
    const completed = !!storage.getBoolean(STORAGE.ONBOARDING.COMPLETED);
    router.replace(completed ? '/(tabs)/home' : '/onboarding');
  };

  return (
    <View style={styles.container} onLayout={onLayout}>
      <Rive
        resourceName="splash"
        style={styles.animation}
        // iOS seems to signal end via onPause
        onPause={onContinue}
        // Android seems to signal end via onStop
        onStop={onContinue}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', backgroundColor: '#E4002B' },
  animation: { width: '100%' },
});

Observed behavior:

  • iOS triggers onPause when animation finishes; onStop does not fire.
  • Android triggers onStop when animation finishes; onPause does not fire.

Workaround:

Register both onPause and onStop and call the same handler.

Source .riv/.rev file

splash.riv.zip

Expected behavior

A single, cross-platform callback (e.g., onStop or a dedicated onEnd) should consistently fire when the animation finishes, so platform conditionals aren’t required.

Device & Versions (please complete the following information)

  • Device: iPhone 13 Pro (physical), Google Pixel 9 (emulator).
  • OS: TBD (e.g., iOS 18.x, Android API level XX)
  • NPM Version: 10.9.2

glopez-askit avatar Nov 05 '25 19:11 glopez-askit