fix(ios): fix memory leak in custom asset loader closure

[mfazekas]

Summary

Fix retain cycle causing memory leak when using custom asset loaders. The customLoader closure was strongly capturing self, preventing RiveReactNativeView from being deallocated.

Fixes: https://community.rive.app/c/bug-reports/memory-leak-in-rive-react-native-native-rive-instances-persist-in-memory-after-component-unmount-causing-app-crashes

Before fix: Memory grew to 500MB+ after repeated mount/unmount cycles
After fix: Memory stabilizes around 308MB

Changes

Added weakCustomLoader computed property that wraps the asset loader in a closure capturing self weakly, breaking the retain cycle:

RiveFile → customAssetLoader → [weak self] → no retain cycle

Test component to reproduce the issue

import * as React from 'react';
import {
  Alert,
  Button,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Rive, { Fit, Alignment } from 'rive-react-native';

declare const global: {
  gc?: () => void;
};

function triggerGC(): boolean {
  if (typeof global.gc === 'function') {
    console.log('[MEMORY-TEST] Triggering JavaScript GC...');
    global.gc();
    console.log('[MEMORY-TEST] GC triggered');
    return true;
  } else {
    console.log('[MEMORY-TEST] global.gc() not available');
    return false;
  }
}

const TOTAL_ITERATIONS = 100;
const MOUNT_DURATION_MS = 50;
const UNMOUNT_DURATION_MS = 50;

function RiveInstance({ iteration }: { iteration: number }) {
  React.useEffect(() => {
    console.log(`[MEMORY-TEST] Rive mounted (iteration ${iteration})`);
    return () => {
      console.log(`[MEMORY-TEST] Rive unmounting (iteration ${iteration})`);
    };
  }, [iteration]);

  return (
    <Rive
      fit={Fit.Contain}
      alignment={Alignment.Center}
      style={styles.rive}
      resourceName="truck_v7"
      autoplay={true}
    />
  );
}

export default function MemoryLeakTest() {
  const [showRive, setShowRive] = React.useState(false);
  const [testRunning, setTestRunning] = React.useState(false);
  const [currentIteration, setCurrentIteration] = React.useState(0);
  const [completedCycles, setCompletedCycles] = React.useState(0);

  const runTest = React.useCallback(async () => {
    setTestRunning(true);
    setCompletedCycles(0);

    for (let i = 0; i < TOTAL_ITERATIONS; i++) {
      setCurrentIteration(i + 1);
      setShowRive(true);
      await new Promise((resolve) => setTimeout(resolve, MOUNT_DURATION_MS));
      setShowRive(false);
      await new Promise((resolve) => setTimeout(resolve, UNMOUNT_DURATION_MS));
      setCompletedCycles(i + 1);
    }

    setTestRunning(false);
    setCurrentIteration(0);
  }, []);

  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.container}>
        <View style={styles.riveContainer}>
          {showRive && <RiveInstance iteration={currentIteration} />}
        </View>
        <Button
          title={testRunning ? 'Running...' : 'Start Test'}
          onPress={runTest}
          disabled={testRunning}
        />
        <Button title="Trigger GC" onPress={() => triggerGC()} />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: '#fff' },
  container: { flexGrow: 1, padding: 16 },
  riveContainer: { height: 300, backgroundColor: '#f5f5f5', marginBottom: 16 },
  rive: { width: '100%', height: '100%' },
});

Run the test, then use Xcode's "Debug Memory Graph" to inspect RiveReactNativeView instances.

[HayesGordon]

LGTM! Thanks