Terminated due to memory issue

[yahya-valus]

📝 Description

I am building a React Native application that uses ViroReact for an Augmented Reality (AR) coin collection feature. The core AR view is wrapped in a within a child component (Viro.tsx/ObjectDetectionAR). This component is conditionally rendered in the parent component (SearchingForCoins.tsx) based on a state variable (isNearby), which simulates a WebSocket response indicating proximity to a coin.

The issue is that every time the AR view is unmounted and then re-mounted (i.e., isNearby changes from truthy to falsy and back), memory consumption increases by approximately 200MB on iOS (observed via Xcode Memory Debugger). After 10-12 such state changes/re-renders, the memory usage reaches around 2GB, and the OS terminates the app.

This strongly suggests that the underlying native ViroARSceneNavigator view is not being completely destroyed or cleaned up when its React Native component unmounts, leading to a cumulative memory leak.

💻 Environment

React Native version: 0.81.1

ViroReact version: 2.44.2

Target Platform: iOS and Android

Development OS: MacOS 26.1 (25B78)

🔄 Reproduction

• Parent Component (SearchingForCoins.tsx)

// SearchingForCoins.tsx
import React, { useState } from 'react';
import ViroARSceneComponent from './Viro'; // Assumes the child component is Viro.tsx

const SearchingForCoins = () => {
  const [isNearby, setIsNearby] = useState(false); // Initially false

  // Simulate proximity change (e.g., from a WebSocket event)
  const toggleProximity = () => {
    setIsNearby(prev => !prev);
  };

  return (
    <>
      <button onClick={toggleProximity}>
        {isNearby ? "Hide AR" : "Show AR"}
      </button>
      
      {isNearby && <ViroARSceneComponent />} 
    </>
  );
};

export default SearchingForCoins;

• Child Component (Viro.tsx - Simplified)

// Viro.tsx
import React from 'react';
import { ViroARSceneNavigator, ViroARScene } from '@virojs/react-viro';

// Dummy scene
const ObjectDetectionAR = () => {
  return (
    <ViroARScene>
      {/* AR elements go here */}
    </ViroARScene>
  );
};

const ViroARSceneComponent = () => {
  return (
    <ViroARSceneNavigator
      initialScene={{
        scene: ObjectDetectionAR,
      }}
      // Other props
      style={{ flex: 1 }}
    />
  );
};

export default ViroARSceneComponent;

• Steps to Reproduce

  1. Launch the application.
  2. Open Xcode and monitor the memory usage for the application process.
  3. Click the "Show AR" button to set isNearby to true, mounting the . Observe memory spike (~200MB).
  4. Click the "Hide AR" button to set isNearby to false, unmounting the . Observe memory drop, but the baseline remains elevated.
  5. Repeat steps 3 and 4 approximately 10-12 times.
  6. The app will be killed by the OS due to excessive memory usage.

💡 Expected Behavior

When the component is unmounted (i.e., isNearby becomes false), all associated native resources and memory (including the AR session, camera feed, and Viro framework state) should be completely released, and the baseline memory usage should return to its initial state.

❓ Potential Cause

The issue is likely that the native VRTARSceneNavigator view is not being properly deallocated, or its underlying ARSession is not being paused/destroyed, when the React Native component's lifecycle componentWillUnmount (or equivalent in functional components) is triggered.

Any guidance or potential workarounds to force the destruction of the native AR session upon unmount would be greatly appreciated.