Potential memory retention issue in `@rive-app/react-native` on iOS during repeated `RiveView` mount/unmount

[edgarrii]

Description

I’m observing what looks like a potential memory retention/leak pattern on iOS when a screen with RiveView is repeatedly mounted and unmounted. Also it's better to doublecheck on Android as well.

I cannot yet provide a full retain-chain proof, but profiling consistently shows that persistent Rive-related instances increase after repeated navigation cycles and do not return close to baseline.

Environment

• @rive-app/react-native: 0.2.3
• iOS Simulator (Apple Silicon)
• React Native app with navigation (screen open/close flow)

Reproduction steps

1. Render a screen that contains RiveView (file loaded via useRiveFile).
2. Navigate to that screen and back.
3. Repeat 20-50 times.
4. Profile with Instruments -> Allocations and compare generations.

Observed behavior

Across repeated cycles, persistent instance counts for Rive-related classes increase, including:

• RiveReactNativeView
• HybridRiveView
• HybridRiveFile
• RiveRuntime.RiveView

This appears to indicate that some objects are retained longer than expected after unmount.

Expected behavior

After screen unmount (and short idle/GC period), Rive-related instances should be released and persistent counts should not keep increasing across cycles.

Minimal example

import { View, StyleSheet } from 'react-native';
import { RiveView, useRiveFile } from '@rive-app/react-native';

const FILE_INPUT = require('../assets/animation.riv');

export function RiveLeakTestScreen() {
  const { riveFile, isLoading, error } = useRiveFile(FILE_INPUT);

  if (!riveFile || isLoading || error) return null;

  return (
    <View style={styles.container}>
      <RiveView file={riveFile} style={styles.rive} autoPlay />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  rive: { width: '100%', height: '100%' },
});

[mfazekas]

Thanks for reporting this — we've been able to reproduce the memory leak and are actively working on a fix.

Reproducer

import { useState, useRef, useEffect } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { RiveView, useRiveFile, Fit } from '@rive-app/react-native';

function RiveScreen() {
  const { riveFile } = useRiveFile(require('./your-file.riv'));
  if (!riveFile) return null;
  return <RiveView file={riveFile} fit={Fit.Contain} style={styles.rive} autoPlay />;
}

export default function MemoryLeakReproducer() {
  const [mounted, setMounted] = useState(true);
  const [cycleCount, setCycleCount] = useState(0);
  const [running, setRunning] = useState(false);
  const runningRef = useRef(false);

  const runNCycles = async (n: number) => {
    for (let i = 0; i < n; i++) {
      setMounted(false);
      await new Promise((r) => setTimeout(r, 300));
      setMounted(true);
      setCycleCount((prev) => prev + 1);
      await new Promise((r) => setTimeout(r, 700));
    }
    setMounted(false);
  };

  const runAutoLoop = async () => {
    if (runningRef.current) {
      runningRef.current = false;
      setRunning(false);
      return;
    }
    runningRef.current = true;
    setRunning(true);
    while (runningRef.current) {
      setMounted(false);
      await new Promise((r) => setTimeout(r, 300));
      if (!runningRef.current) break;
      setMounted(true);
      setCycleCount((prev) => prev + 1);
      await new Promise((r) => setTimeout(r, 700));
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Memory Leak Reproducer</Text>
      <Text style={styles.stat}>Cycles: {cycleCount} | {mounted ? 'MOUNTED' : 'UNMOUNTED'}</Text>
      <View style={styles.row}>
        <Pressable style={styles.button} onPress={() => runNCycles(10)}>
          <Text style={styles.buttonText}>10 Cycles</Text>
        </Pressable>
        <Pressable style={[styles.button, running && { backgroundColor: '#FF3B30' }]} onPress={runAutoLoop}>
          <Text style={styles.buttonText}>{running ? 'Stop' : 'Auto'}</Text>
        </Pressable>
      </View>
      <View style={styles.riveContainer}>
        {mounted ? <RiveScreen /> : <Text style={{ color: '#999' }}>Unmounted</Text>}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 18, fontWeight: 'bold', textAlign: 'center' },
  stat: { textAlign: 'center', marginVertical: 8, fontVariant: ['tabular-nums'] },
  row: { flexDirection: 'row', justifyContent: 'center', gap: 12, marginBottom: 12 },
  button: { paddingHorizontal: 20, paddingVertical: 10, backgroundColor: '#007AFF', borderRadius: 8 },
  buttonText: { color: '#fff', fontWeight: '600' },
  riveContainer: { flex: 1, backgroundColor: '#f5f5f5', borderRadius: 8, justifyContent: 'center', alignItems: 'center' },
  rive: { width: '100%', height: '100%' },
});

[mfazekas]

Rive iOS ticket: rive-app/rive-ios#427

FWIW: I see this issue on android as well: