Clear AnimatedPropsRegistry on surface stop

Summary:
## Changelog:

[Internal] [Fixed] - Clear AnimatedPropsRegistry on surface stop

When `useSharedAnimatedBackend` is enabled, the `AnimatedPropsRegistry` accumulates
`SurfaceContext` entries (containing `shared_ptr<ShadowNodeFamily>` and `PropsSnapshot`
data) for each surface that has animated views. These entries are never cleaned up when
a surface is destroyed via `UIManager::stopSurface()`, because that method only calls
the legacy `stopSurfaceForAnimationDelegate()` — the shared backend's registry is untouched.

We also see increased `RetryableMountingLayerException` errors in production which stack trace
shows there are mount items committing to surface that no longer exists.

This change:
1. Adds `animationBackend_->clearRegistry(surfaceId)` to `UIManager::stopSurface()`
2. Changes `AnimatedPropsRegistry::clear()` to fully erase the `surfaceContexts_` map
   entry instead of just clearing its contents

Differential Revision: D101354994

Author: zeyap

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.cpp

@@ -93,10 +93,7 @@ AnimatedPropsRegistry::getMap(SurfaceId surfaceId) {
 
 void AnimatedPropsRegistry::clear(SurfaceId surfaceId) {
   auto lock = std::lock_guard(mutex_);
-
-  auto& surfaceContext = surfaceContexts_[surfaceId];
-  surfaceContext.families.clear();
-  surfaceContext.map.clear();
+  surfaceContexts_.erase(surfaceId);
 }
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/uimanager/UIManager.cpp

@@ -272,9 +272,13 @@ void UIManager::setSurfaceProps(
 ShadowTree::Unique UIManager::stopSurface(SurfaceId surfaceId) const {
   TraceSection s("UIManager::stopSurface");
 
-  // Stop any ongoing animations.
+  // Stop any ongoing layout animations.
   stopSurfaceForAnimationDelegate(surfaceId);
 
+  if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    animationBackend_->clearRegistry(surfaceId);
+  }
+
   // Waiting for all concurrent commits to be finished and unregistering the
   // `ShadowTree`.
   auto shadowTree = getShadowTreeRegistry().remove(surfaceId);

packages/rn-tester/js/examples/Animated/AnimatedIndex.js

@@ -10,6 +10,7 @@
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
+import AnimatedMemoryLeakExample from './AnimatedMemoryLeakExample';
 import ColorStylesExample from './ColorStylesExample';
 import CombineExample from './CombineExample';
 import ComposeAnimationsWithEasingExample from './ComposeAnimationsWithEasingExample';
@@ -35,6 +36,7 @@ export default {
     'build and maintain.',
   showIndividualExamples: true,
   examples: [
+    AnimatedMemoryLeakExample,
     TransformStylesExample,
     ColorStylesExample,
     FadeInViewExample,

packages/rn-tester/js/examples/Animated/AnimatedMemoryLeakExample.js

@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import RNTesterButton from '../../components/RNTesterButton';
+import * as React from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {Animated, ScrollView, StyleSheet, Text, View} from 'react-native';
+
+/**
+ * A single animated item that fades in and pulses opacity.
+ * Each instance creates animated nodes and connects them to a view
+ * via the native animated driver.
+ */
+function AnimatedItem({id}: {id: number}) {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    // Fade in then loop a pulse animation
+    Animated.sequence([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(opacity, {
+            toValue: 0.3,
+            duration: 1000,
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: true,
+          }),
+        ]),
+      ),
+    ]).start();
+
+    return () => {
+      opacity.stopAnimation();
+    };
+  }, [opacity]);
+
+  return (
+    <Animated.View style={[styles.item, {opacity}]}>
+      <Text style={styles.itemText}>Item #{id}</Text>
+    </Animated.View>
+  );
+}
+
+/**
+ * A "page" of animated items. Each page simulates a surface with many
+ * animated views (like a feed screen with animated like buttons, images, etc.)
+ */
+function AnimatedPage({pageId, itemCount}: {pageId: number, itemCount: number}) {
+  const items = [];
+  for (let i = 0; i < itemCount; i++) {
+    items.push(<AnimatedItem key={`${pageId}-${i}`} id={pageId * 1000 + i} />);
+  }
+  return (
+    <View style={styles.page}>
+      <Text style={styles.pageTitle}>
+        Page {pageId} ({itemCount} animated views)
+      </Text>
+      <ScrollView style={styles.scrollView}>{items}</ScrollView>
+    </View>
+  );
+}
+
+/**
+ * Memory Leak Reproduction:
+ *
+ * This example simulates the pattern that causes the AnimatedPropsRegistry
+ * memory leak. It creates and destroys "pages" of animated views, mimicking
+ * navigation between screens in FB4A.
+ *
+ * When useSharedAnimatedBackend is enabled, each page's animated views get
+ * entries in the AnimatedPropsRegistry (shared_ptr<ShadowNodeFamily> +
+ * PropsSnapshot). When the page is unmounted, these entries should be cleaned
+ * up via clearRegistry() in UIManager::stopSurface().
+ *
+ * To test:
+ * 1. Open Android Studio profiler and attach to the Catalyst app
+ * 2. Click "Auto-cycle pages" to start creating/destroying animated pages
+ * 3. Watch native memory (C++ heap) in the profiler
+ * 4. With the leak: native memory grows monotonically
+ * 5. With the fix (D101354994): native memory stays stable
+ *
+ * You can also use "Add 50 items" to increase animated view count per page,
+ * then cycle to amplify the leak.
+ */
+function AnimatedMemoryLeakRepro() {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [itemsPerPage, setItemsPerPage] = useState(20);
+  const [totalPagesCreated, setTotalPagesCreated] = useState(0);
+  const [autoCycling, setAutoCycling] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const nextPage = useCallback(() => {
+    setCurrentPage(prev => prev + 1);
+    setTotalPagesCreated(prev => prev + 1);
+  }, []);
+
+  const toggleAutoCycle = useCallback(() => {
+    if (autoCycling) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setAutoCycling(false);
+    } else {
+      intervalRef.current = setInterval(() => {
+        setCurrentPage(prev => prev + 1);
+        setTotalPagesCreated(prev => prev + 1);
+      }, 2000); // New page every 2 seconds
+      setAutoCycling(true);
+    }
+  }, [autoCycling]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.controls}>
+        <Text style={styles.stats}>
+          Current page: {currentPage} | Total created: {totalPagesCreated} |
+          Items/page: {itemsPerPage}
+        </Text>
+        <View style={styles.buttonRow}>
+          <RNTesterButton onPress={nextPage}>
+            Next Page
+          </RNTesterButton>
+          <RNTesterButton onPress={toggleAutoCycle}>
+            {autoCycling ? 'Stop auto-cycle' : 'Auto-cycle pages (2s)'}
+          </RNTesterButton>
+        </View>
+        <View style={styles.buttonRow}>
+          <RNTesterButton onPress={() => setItemsPerPage(prev => prev + 50)}>
+            Add 50 items/page
+          </RNTesterButton>
+          <RNTesterButton
+            onPress={() => setItemsPerPage(prev => Math.max(5, prev - 50))}>
+            Remove 50 items/page
+          </RNTesterButton>
+        </View>
+      </View>
+      {/* Key forces full unmount/remount on page change */}
+      <AnimatedPage
+        key={`page-${currentPage}`}
+        pageId={currentPage}
+        itemCount={itemsPerPage}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  controls: {
+    padding: 10,
+    backgroundColor: '#f0f0f0',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+  stats: {
+    fontSize: 12,
+    marginBottom: 8,
+    fontFamily: 'monospace',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 4,
+  },
+  page: {
+    flex: 1,
+  },
+  pageTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    padding: 10,
+    backgroundColor: '#e0e0ff',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  item: {
+    backgroundColor: 'deepskyblue',
+    borderWidth: 1,
+    borderColor: 'dodgerblue',
+    padding: 12,
+    marginHorizontal: 10,
+    marginVertical: 4,
+    borderRadius: 8,
+  },
+  itemText: {
+    color: 'white',
+    fontWeight: '600',
+  },
+});
+
+export default ({
+  title: 'Memory Leak Repro (AnimatedPropsRegistry)',
+  name: 'animatedMemoryLeak',
+  description:
+    'Simulates surface transitions with animated views to reproduce ' +
+    'AnimatedPropsRegistry memory leak. Use with profiler to measure native ' +
+    'memory growth. Auto-cycle creates/destroys pages every 2s.',
+  render: (): React.Node => <AnimatedMemoryLeakRepro />,
+}: RNTesterModuleExample);