From 87ec0965a2e6b6903a76231878d6cd7977bfab3a Mon Sep 17 00:00:00 2001 From: Zeya Peng Date: Fri, 6 Dec 2024 02:40:30 -0800 Subject: [PATCH] Allow setting debugID on AnimatedValue and TimingAnimation (#48106) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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 --- .../Libraries/Animated/animations/Animation.js | 5 +++++ .../Libraries/Animated/animations/TimingAnimation.js | 1 + .../Libraries/Animated/nodes/AnimatedNode.js | 2 ++ .../Libraries/Animated/nodes/AnimatedValue.js | 11 +++++++++-- .../__tests__/__snapshots__/public-api-test.js.snap | 4 ++++ 5 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/react-native/Libraries/Animated/animations/Animation.js b/packages/react-native/Libraries/Animated/animations/Animation.js index 7d26ce2617b..c4fb8faac79 100644 --- a/packages/react-native/Libraries/Animated/animations/Animation.js +++ b/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( diff --git a/packages/react-native/Libraries/Animated/animations/TimingAnimation.js b/packages/react-native/Libraries/Animated/animations/TimingAnimation.js index 4d606e5c6e0..7b325c0f429 100644 --- a/packages/react-native/Libraries/Animated/animations/TimingAnimation.js +++ b/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, }; } diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedNode.js b/packages/react-native/Libraries/Animated/nodes/AnimatedNode.js index a3dd2123639..42272e8eb73 100644 --- a/packages/react-native/Libraries/Animated/nodes/AnimatedNode.js +++ b/packages/react-native/Libraries/Animated/nodes/AnimatedNode.js @@ -197,4 +197,6 @@ export default class AnimatedNode { toJSON(): mixed { return this.__getValue(); } + + __debugID: ?string = undefined; } diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js b/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js index 76a984fe4f1..2aeb97e3fd6 100644 --- a/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js +++ b/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, }; } } diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 68f5d000ef8..ec3015362ca 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -424,6 +424,7 @@ export type AnimationConfig = $ReadOnly<{ onComplete?: ?EndCallback, iterations?: number, isLooping?: boolean, + debugID?: ?string, ... }>; declare export default class Animation { @@ -431,6 +432,7 @@ declare export default class Animation { __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 {