Memory not reclaimed after unmounting a screen with many components, across repeated navigations (New Architecture / Fabric, 0.86.0-rc.3)

/**
 * Minimal reproduction: memory not reclaimed after unmounting a screen
 * with many components, across repeated navigations (New Architecture / Fabric).
 *
 * Manual navigation: a single piece of state decides which screen is mounted,
 * so going "back" fully unmounts the heavy screen.
 */
import React, { Fragment } from 'react';
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  type GestureResponderEvent,
} from 'react-native';

const ITEM_COUNT = 1000;

type Item = { id: string; index: number; label: string };
const DATA: Item[] = Array.from({ length: ITEM_COUNT }, (_, index) => ({
  id: `two-${index}`,
  index,
  label: `Screen Two Item ${index}`,
}));

/** A deliberately multi-layered row so 1000 of them is a real amount of tree. */
function ComplexButtonBase({
  index,
  label,
  onPress,
}: {
  index: number;
  label: string;
  onPress: (index: number) => void;
}) {
  const handlePress = React.useCallback(
    (_e: GestureResponderEvent) => onPress(index),
    [index, onPress],
  );
  const hue = (index * 37) % 360;
  const progress = `${(index * 13) % 100}%` as const;
  const initials = label.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase();
  return (
    <Pressable onPress={handlePress} style={({ pressed }) => [styles.button, pressed && styles.pressed]}>
      <View style={[styles.badge, { backgroundColor: `hsl(${hue}, 70%, 55%)` }]}>
        <Text style={styles.badgeText}>{initials}</Text>
      </View>
      <View style={styles.body}>
        <Text style={styles.title} numberOfLines={1}>{label}</Text>
        <Text style={styles.subtitle} numberOfLines={1}>Tap to interact with item #{index}</Text>
        <View style={styles.track}><View style={[styles.fill, { width: progress }]} /></View>
      </View>
      <View style={styles.meta}><Text style={styles.metaValue}>#{index}</Text></View>
    </Pressable>
  );
}
const ComplexButton = React.memo(ComplexButtonBase);

function HeavyScreen({ onBack }: { onBack: () => void }) {
  const onPress = React.useCallback((i: number) => {}, []);
  return (
    <View style={styles.flex}>
      <Text style={styles.link} onPress={onBack}>← Back to Home</Text>
      <ScrollView>
        {DATA.map(item => (
          <Fragment key={item.id}>
            <ComplexButton index={item.index} label={item.label} onPress={onPress} />
          </Fragment>
        ))}
      </ScrollView>
    </View>
  );
}

function HomeScreen({ onOpen }: { onOpen: () => void }) {
  return (
    <View style={[styles.flex, styles.center]}>
      <Text style={styles.h1}>Home</Text>
      {/* Optional in-app measurement: works when the runtime exposes globalThis.gc */}
      <Text style={styles.link} onPress={measureLiveHeap}>Measure live JS heap (logcat)</Text>
      <Text style={styles.link} onPress={onOpen}>Open Heavy Screen →</Text>
    </View>
  );
}

/** Forces GC (if available) and logs Hermes live-heap-after-GC. */
function measureLiveHeap() {
  const g: any = globalThis as any;
  for (let k = 0; k < 4 && typeof g.gc === 'function'; k++) g.gc();
  const s = g.HermesInternal?.getInstrumentedStats?.();
  console.log('[leak] js_allocatedBytes =', s?.js_allocatedBytes, ' js_heapSize =', s?.js_heapSize);
}

export default function App() {
  const [heavy, setHeavy] = React.useState(false);
  return (
    <View style={[styles.flex, styles.top]}>
      {heavy ? (
        <HeavyScreen onBack={() => setHeavy(false)} />
      ) : (
        <HomeScreen onOpen={() => setHeavy(true)} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
  top: { paddingTop: 50 },
  center: { alignItems: 'center', justifyContent: 'center' },
  h1: { fontSize: 28, fontWeight: '700', marginBottom: 24 },
  link: { fontSize: 17, fontWeight: '600', color: '#4c8bf5', paddingVertical: 12 },
  button: {
    flexDirection: 'row', alignItems: 'center', padding: 12, marginHorizontal: 12,
    marginVertical: 6, backgroundColor: '#fff', borderRadius: 14, borderWidth: 1, borderColor: '#e2e2e8',
  },
  pressed: { backgroundColor: '#f1f1f6' },
  badge: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', marginRight: 12 },
  badgeText: { color: '#fff', fontSize: 16, fontWeight: '700' },
  body: { flex: 1 },
  title: { fontSize: 15, fontWeight: '600', color: '#1c1c1e' },
  subtitle: { fontSize: 12, color: '#8e8e93', marginTop: 2 },
  track: { height: 4, borderRadius: 2, backgroundColor: '#ececf1', marginTop: 8, overflow: 'hidden' },
  fill: { height: 4, borderRadius: 2, backgroundColor: '#4c8bf5' },
  meta: { alignItems: 'flex-end', marginLeft: 12 },
  metaValue: { fontSize: 13, fontWeight: '600', color: '#3a3a3c' },
});