Allow setting debugID on AnimatedValue and TimingAnimation (#48106)

Summary:
Pull Request resolved: #48106

This could make it easier to locate and debug AnimatedValue and driver from native - so far on the native side of animated, the only way to identify an Animation driver or AnimatedNode is integer IDs and the type, which made it difficult to debug when surface gets complicated

Here I only enabled it for AnimatedValue and TimingAnimation, because
* TimingAnimation is most commonly used
* all the animation drivers (frames, spring, decay) can only drive Value type of AnimatedNode on the native side, so it's the primitive component of AnimatedNode

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D66790298

fbshipit-source-id: ddd64a5728120f061aa902f25c93b1701617031b

Author: zeyap

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

@@ -26,6 +26,7 @@ export type AnimationConfig = $ReadOnly<{
   onComplete?: ?EndCallback,
   iterations?: number,
   isLooping?: boolean,
+  debugID?: ?string,
   ...
 }>;
 
@@ -43,6 +44,7 @@ export default class Animation {
   __isInteraction: boolean;
   __isLooping: ?boolean;
   __iterations: number;
+  __debugID: ?string;
 
   constructor(config: AnimationConfig) {
     this.#useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
@@ -51,6 +53,9 @@ export default class Animation {
     this.__isInteraction = config.isInteraction ?? !this.#useNativeDriver;
     this.__isLooping = config.isLooping;
     this.__iterations = config.iterations ?? 1;
+    if (__DEV__) {
+      this.__debugID = config.debugID;
+    }
   }
 
   start(

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

@@ -99,6 +99,7 @@ export default class TimingAnimation extends Animation {
       toValue: this._toValue,
       iterations: this.__iterations,
       platformConfig: this._platformConfig,
+      debugID: __DEV__ ? this.__debugID : undefined,
     };
   }
 

packages/react-native/Libraries/Animated/nodes/AnimatedNode.js

@@ -197,4 +197,6 @@ export default class AnimatedNode {
   toJSON(): mixed {
     return this.__getValue();
   }
+
+  __debugID: ?string = undefined;
 }

packages/react-native/Libraries/Animated/nodes/AnimatedValue.js

@@ -22,6 +22,7 @@ import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedValueConfig = $ReadOnly<{
   useNativeDriver: boolean,
+  debugID?: string,
 }>;
 
 const NativeAnimatedAPI = NativeAnimatedHelper.API;
@@ -97,8 +98,13 @@ export default class AnimatedValue extends AnimatedWithChildren {
     this._startingValue = this._value = value;
     this._offset = 0;
     this._animation = null;
-    if (config && config.useNativeDriver) {
-      this.__makeNative();
+    if (config) {
+      if (config.useNativeDriver) {
+        this.__makeNative();
+      }
+      if (__DEV__) {
+        this.__debugID = config.debugID;
+      }
     }
   }
 
@@ -298,6 +304,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
       type: 'value',
       value: this._value,
       offset: this._offset,
+      debugID: __DEV__ ? this.__debugID : undefined,
     };
   }
 }

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -424,13 +424,15 @@ export type AnimationConfig = $ReadOnly<{
   onComplete?: ?EndCallback,
   iterations?: number,
   isLooping?: boolean,
+  debugID?: ?string,
   ...
 }>;
 declare export default class Animation {
   __active: boolean;
   __isInteraction: boolean;
   __isLooping: ?boolean;
   __iterations: number;
+  __debugID: ?string;
   constructor(config: AnimationConfig): void;
   start(
     fromValue: number,
@@ -959,6 +961,7 @@ exports[`public API should not change unintentionally Libraries/Animated/nodes/A
   __getPlatformConfig(): ?PlatformConfig;
   __setPlatformConfig(platformConfig: ?PlatformConfig): void;
   toJSON(): mixed;
+  __debugID: ?string;
 }
 "
 `;
@@ -1107,6 +1110,7 @@ declare export default class AnimatedTransform extends AnimatedWithChildren {
 exports[`public API should not change unintentionally Libraries/Animated/nodes/AnimatedValue.js 1`] = `
 "export type AnimatedValueConfig = $ReadOnly<{
   useNativeDriver: boolean,
+  debugID?: string,
 }>;
 declare export function flushValue(rootNode: AnimatedNode): void;
 declare export default class AnimatedValue extends AnimatedWithChildren {