Re-use Animation _nativeIds (#45109)

Summary:
Pull Request resolved: #45109

Re-using _nativeIds should be perfectly safe. Tracking animations already re-use animation IDs when the value being tracked is updated. This change is in preparation for an exploratory API for triggering Animated actions on events (e.g., starting an animation on hover).

Differential Revision: D58770465

Author: rozele

packages/react-native/Libraries/Animated/animations/Animation.js

@@ -14,6 +14,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedProps from '../nodes/AnimatedProps';
 
@@ -92,7 +93,12 @@ export default class Animation {
     try {
       const config = this.__getNativeAnimationConfig();
       animatedValue.__makeNative(config.platformConfig);
-      this._nativeId = NativeAnimatedHelper.generateNewAnimationId();
+      if (
+        !this._nativeId ||
+        !ReactNativeFeatureFlags.animatedShouldUsePermanentAnimationId()
+      ) {
+        this._nativeId = NativeAnimatedHelper.generateNewAnimationId();
+      }
       NativeAnimatedHelper.API.startAnimatingNode(
         this._nativeId,
         animatedValue.__getNativeTag(),

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -167,6 +167,11 @@ const definitions: FeatureFlagDefinitions = {
       description:
         'Enables an experimental flush-queue debouncing in Animated.js.',
     },
+    animatedShouldUsePermanentAnimationId: {
+      defaultValue: false,
+      description:
+        'Enables an experimental option to reuse the native ID for an animation.',
+    },
     animatedShouldUseSingleOp: {
       defaultValue: false,
       description:

packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<522f11a571457cb932f451cf81bd384a>>
+ * @generated SignedSource<<3ff3985c50d0b1abc5116a657e148938>>
  * @flow strict-local
  */
 
@@ -28,6 +28,7 @@ import {
 export type ReactNativeFeatureFlagsJsOnly = {
   jsOnlyTestFlag: Getter<boolean>,
   animatedShouldDebounceQueueFlush: Getter<boolean>,
+  animatedShouldUsePermanentAnimationId: Getter<boolean>,
   animatedShouldUseSingleOp: Getter<boolean>,
   enableAccessToHostTreeInFabric: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
@@ -78,6 +79,11 @@ export const jsOnlyTestFlag: Getter<boolean> = createJavaScriptFlagGetter('jsOnl
  */
 export const animatedShouldDebounceQueueFlush: Getter<boolean> = createJavaScriptFlagGetter('animatedShouldDebounceQueueFlush', false);
 
+/**
+ * Enables an experimental option to reuse the native ID for an animation.
+ */
+export const animatedShouldUsePermanentAnimationId: Getter<boolean> = createJavaScriptFlagGetter('animatedShouldUsePermanentAnimationId', false);
+
 /**
  * Enables an experimental mega-operation for Animated.js that replaces many calls to native with a single call into native, to reduce JSI/JNI traffic.
  */