rive-react-native
rive-react-native copied to clipboard
Inconsistent end-of-animation callback between iOS (`onPause`) and Android (`onStop`)
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
onPausewhen animation finishes;onStopdoes not fire. - Android triggers
onStopwhen animation finishes;onPausedoes not fire.
Workaround:
Register both onPause and onStop and call the same handler.
Source .riv/.rev file
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