react-native-tvos 0.77.0-0rc5 → 0.78.0-0

package/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(
@@ -74,7 +79,16 @@ export default class Animation {
 
   stop(): void {
     if (this.#nativeID != null) {
-      NativeAnimatedHelper.API.stopAnimation(this.#nativeID);
+      const nativeID = this.#nativeID;
+      const identifier = `${nativeID}:stopAnimation`;
+      try {
+        // This is only required when singleOpBatching is used, as otherwise
+        // we flush calls immediately when there's no pending queue.
+        NativeAnimatedHelper.API.setWaitingForIdentifier(identifier);
+        NativeAnimatedHelper.API.stopAnimation(nativeID);
+      } finally {
+        NativeAnimatedHelper.API.unsetWaitingForIdentifier(identifier);
+      }
     }
     this.__active = false;
   }
@@ -168,4 +182,11 @@ export default class Animation {
       callback(result);
     }
   }
+
+  __getDebugID(): ?string {
+    if (__DEV__) {
+      return this.__debugID;
+    }
+    return undefined;
+  }
 }

package/Libraries/Animated/animations/DecayAnimation.js

@@ -66,6 +66,7 @@ export default class DecayAnimation extends Animation {
       velocity: this._velocity,
       iterations: this.__iterations,
       platformConfig: this._platformConfig,
+      debugID: this.__getDebugID(),
     };
   }
 

package/Libraries/Animated/animations/SpringAnimation.js

@@ -194,6 +194,7 @@ export default class SpringAnimation extends Animation {
       toValue: this._toValue,
       iterations: this.__iterations,
       platformConfig: this._platformConfig,
+      debugID: this.__getDebugID(),
     };
   }
 

package/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: this.__getDebugID(),
     };
   }
 

package/Libraries/Animated/nodes/AnimatedAddition.js

@@ -13,6 +13,7 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedValue from './AnimatedValue';
@@ -22,8 +23,12 @@ export default class AnimatedAddition extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
-  constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
-    super();
+  constructor(
+    a: AnimatedNode | number,
+    b: AnimatedNode | number,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     this._a = typeof a === 'number' ? new AnimatedValue(a) : a;
     this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
   }
@@ -47,6 +52,7 @@ export default class AnimatedAddition extends AnimatedWithChildren {
   __attach(): void {
     this._a.__addChild(this);
     this._b.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -59,6 +65,7 @@ export default class AnimatedAddition extends AnimatedWithChildren {
     return {
       type: 'addition',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -14,6 +14,7 @@ import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import normalizeColor from '../../StyleSheet/normalizeColor';
@@ -22,6 +23,7 @@ import AnimatedValue, {flushValue} from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedColorConfig = $ReadOnly<{
+  ...AnimatedNodeConfig,
   useNativeDriver: boolean,
 }>;
 
@@ -118,7 +120,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   _suspendCallbacks: number = 0;
 
   constructor(valueIn?: InputValue, config?: ?AnimatedColorConfig) {
-    super();
+    super(config);
 
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
       valueIn ?? defaultColor;
@@ -315,6 +317,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
       b: this.b.__getNativeTag(),
       a: this.a.__getNativeTag(),
       nativeColor: this.nativeColor,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedDiffClamp.js

@@ -13,6 +13,7 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
@@ -24,8 +25,13 @@ export default class AnimatedDiffClamp extends AnimatedWithChildren {
   _value: number;
   _lastValue: number;
 
-  constructor(a: AnimatedNode, min: number, max: number) {
-    super();
+  constructor(
+    a: AnimatedNode,
+    min: number,
+    max: number,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
 
     this._a = a;
     this._min = min;
@@ -54,6 +60,7 @@ export default class AnimatedDiffClamp extends AnimatedWithChildren {
 
   __attach(): void {
     this._a.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -67,6 +74,7 @@ export default class AnimatedDiffClamp extends AnimatedWithChildren {
       input: this._a.__getNativeTag(),
       min: this._min,
       max: this._max,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedDivision.js

@@ -12,6 +12,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedNode from './AnimatedNode';
@@ -23,8 +24,12 @@ export default class AnimatedDivision extends AnimatedWithChildren {
   _b: AnimatedNode;
   _warnedAboutDivideByZero: boolean = false;
 
-  constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
-    super();
+  constructor(
+    a: AnimatedNode | number,
+    b: AnimatedNode | number,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     if (b === 0 || (b instanceof AnimatedNode && b.__getValue() === 0)) {
       console.error('Detected potential division by zero in AnimatedDivision');
     }
@@ -63,6 +68,7 @@ export default class AnimatedDivision extends AnimatedWithChildren {
   __attach(): void {
     this._a.__addChild(this);
     this._b.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -75,6 +81,7 @@ export default class AnimatedDivision extends AnimatedWithChildren {
     return {
       type: 'division',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -14,6 +14,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {validateInterpolation} from '../../../src/private/animated/NativeAnimatedValidation';
@@ -26,6 +27,7 @@ import invariant from 'invariant';
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
 export type InterpolationConfigType<OutputT: number | string> = $ReadOnly<{
+  ...AnimatedNodeConfig,
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<OutputT>,
   easing?: (input: number) => number,
@@ -327,7 +329,7 @@ export default class AnimatedInterpolation<
   _interpolation: ?(input: number) => OutputT;
 
   constructor(parent: AnimatedNode, config: InterpolationConfigType<OutputT>) {
-    super();
+    super(config);
     this._parent = parent;
     this._config = config;
 
@@ -374,6 +376,7 @@ export default class AnimatedInterpolation<
 
   __attach(): void {
     this._parent.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -411,6 +414,7 @@ export default class AnimatedInterpolation<
       extrapolateRight:
         this._config.extrapolateRight || this._config.extrapolate || 'extend',
       type: 'interpolation',
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedModulo.js

@@ -13,6 +13,7 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
@@ -21,8 +22,8 @@ export default class AnimatedModulo extends AnimatedWithChildren {
   _a: AnimatedNode;
   _modulus: number;
 
-  constructor(a: AnimatedNode, modulus: number) {
-    super();
+  constructor(a: AnimatedNode, modulus: number, config?: ?AnimatedNodeConfig) {
+    super(config);
     this._a = a;
     this._modulus = modulus;
   }
@@ -46,6 +47,7 @@ export default class AnimatedModulo extends AnimatedWithChildren {
 
   __attach(): void {
     this._a.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -58,6 +60,7 @@ export default class AnimatedModulo extends AnimatedWithChildren {
       type: 'modulus',
       input: this._a.__getNativeTag(),
       modulus: this._modulus,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedMultiplication.js

@@ -13,6 +13,7 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedValue from './AnimatedValue';
@@ -22,8 +23,12 @@ export default class AnimatedMultiplication extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
-  constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
-    super();
+  constructor(
+    a: AnimatedNode | number,
+    b: AnimatedNode | number,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     this._a = typeof a === 'number' ? new AnimatedValue(a) : a;
     this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
   }
@@ -46,6 +51,7 @@ export default class AnimatedMultiplication extends AnimatedWithChildren {
   __attach(): void {
     this._a.__addChild(this);
     this._b.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -58,6 +64,7 @@ export default class AnimatedMultiplication extends AnimatedWithChildren {
     return {
       type: 'multiplication',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -8,17 +8,17 @@
  * @format
  */
 
-import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import invariant from 'invariant';
 
-const {startListeningToAnimatedNodeValue, stopListeningToAnimatedNodeValue} =
-  NativeAnimatedHelper.API;
-
 type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
+export type AnimatedNodeConfig = $ReadOnly<{
+  debugID?: string,
+}>;
+
 let _uniqueId = 1;
 let _assertNativeAnimatedModule: ?() => void = () => {
   NativeAnimatedHelper.assertNativeAnimatedModule();
@@ -29,9 +29,20 @@ let _assertNativeAnimatedModule: ?() => void = () => {
 
 export default class AnimatedNode {
   #listeners: Map<string, ValueListenerCallback> = new Map();
-  #updateSubscription: ?EventSubscription = null;
 
   _platformConfig: ?PlatformConfig = undefined;
+
+  constructor(
+    config?: ?$ReadOnly<{
+      ...AnimatedNodeConfig,
+      ...
+    }>,
+  ) {
+    if (__DEV__) {
+      this.__debugID = config?.debugID;
+    }
+  }
+
   __attach(): void {}
   __detach(): void {
     this.removeAllListeners();
@@ -62,9 +73,6 @@ export default class AnimatedNode {
     );
 
     this._platformConfig = platformConfig;
-    if (this.#listeners.size > 0) {
-      this.#ensureUpdateSubscriptionExists();
-    }
   }
 
   /**
@@ -77,9 +85,6 @@ export default class AnimatedNode {
   addListener(callback: (value: any) => mixed): string {
     const id = String(_uniqueId++);
     this.#listeners.set(id, callback);
-    if (this.__isNative) {
-      this.#ensureUpdateSubscriptionExists();
-    }
     return id;
   }
 
@@ -91,9 +96,6 @@ export default class AnimatedNode {
    */
   removeListener(id: string): void {
     this.#listeners.delete(id);
-    if (this.__isNative && this.#listeners.size === 0) {
-      this.#updateSubscription?.remove();
-    }
   }
 
   /**
@@ -103,44 +105,12 @@ export default class AnimatedNode {
    */
   removeAllListeners(): void {
     this.#listeners.clear();
-    if (this.__isNative) {
-      this.#updateSubscription?.remove();
-    }
   }
 
   hasListeners(): boolean {
     return this.#listeners.size > 0;
   }
 
-  #ensureUpdateSubscriptionExists(): void {
-    if (this.#updateSubscription != null) {
-      return;
-    }
-    const nativeTag = this.__getNativeTag();
-    startListeningToAnimatedNodeValue(nativeTag);
-    const subscription: EventSubscription =
-      NativeAnimatedHelper.nativeEventEmitter.addListener(
-        'onAnimatedValueUpdate',
-        data => {
-          if (data.tag === nativeTag) {
-            this.__onAnimatedValueUpdateReceived(data.value);
-          }
-        },
-      );
-
-    this.#updateSubscription = {
-      remove: () => {
-        // Only this function assigns to `this.#updateSubscription`.
-        if (this.#updateSubscription == null) {
-          return;
-        }
-        this.#updateSubscription = null;
-        subscription.remove();
-        stopListeningToAnimatedNodeValue(nativeTag);
-      },
-    };
-  }
-
   __onAnimatedValueUpdateReceived(value: number): void {
     this.__callListeners(value);
   }
@@ -197,4 +167,13 @@ export default class AnimatedNode {
   toJSON(): mixed {
     return this.__getValue();
   }
+
+  __debugID: ?string = undefined;
+
+  __getDebugID(): ?string {
+    if (__DEV__) {
+      return this.__debugID;
+    }
+    return undefined;
+  }
 }

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -12,6 +12,7 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedNode from './AnimatedNode';
 import AnimatedWithChildren from './AnimatedWithChildren';
@@ -99,8 +100,12 @@ export default class AnimatedObject extends AnimatedWithChildren {
   /**
    * Should only be called by `AnimatedObject.from`.
    */
-  constructor(nodes: $ReadOnlyArray<AnimatedNode>, value: mixed) {
-    super();
+  constructor(
+    nodes: $ReadOnlyArray<AnimatedNode>,
+    value: mixed,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     this.#nodes = nodes;
     this._value = value;
   }
@@ -131,6 +136,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -157,6 +163,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
       value: mapAnimatedNodes(this._value, node => {
         return {nodeTag: node.__getNativeTag()};
       }),
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -9,6 +9,7 @@
  */
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -84,8 +85,9 @@ export default class AnimatedProps extends AnimatedNode {
     inputProps: {[string]: mixed},
     callback: () => void,
     allowlist?: ?AnimatedPropsAllowlist,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
     this.#nodeKeys = nodeKeys;
     this.#nodes = nodes;
@@ -158,6 +160,7 @@ export default class AnimatedProps extends AnimatedNode {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -268,6 +271,7 @@ export default class AnimatedProps extends AnimatedNode {
     return {
       type: 'props',
       props: propsConfig,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -9,6 +9,7 @@
  */
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import {validateStyles} from '../../../src/private/animated/NativeAnimatedValidation';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
@@ -112,8 +113,9 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     nodes: $ReadOnlyArray<AnimatedNode>,
     style: {[string]: mixed},
     inputStyle: any,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     this.#nodeKeys = nodeKeys;
     this.#nodes = nodes;
     this.#style = style;
@@ -199,6 +201,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -238,6 +241,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     return {
       type: 'style',
       style: styleConfig,
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedSubtraction.js

@@ -13,6 +13,7 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedValue from './AnimatedValue';
@@ -22,8 +23,12 @@ export default class AnimatedSubtraction extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
-  constructor(a: AnimatedNode | number, b: AnimatedNode | number) {
-    super();
+  constructor(
+    a: AnimatedNode | number,
+    b: AnimatedNode | number,
+    config?: ?AnimatedNodeConfig,
+  ) {
+    super(config);
     this._a = typeof a === 'number' ? new AnimatedValue(a) : a;
     this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
   }
@@ -47,6 +52,7 @@ export default class AnimatedSubtraction extends AnimatedWithChildren {
   __attach(): void {
     this._a.__addChild(this);
     this._b.__addChild(this);
+    super.__attach();
   }
 
   __detach(): void {
@@ -59,6 +65,7 @@ export default class AnimatedSubtraction extends AnimatedWithChildren {
     return {
       type: 'subtraction',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedTracking.js

@@ -12,6 +12,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {EndCallback} from '../animations/Animation';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 import type AnimatedValue from './AnimatedValue';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
@@ -31,8 +32,9 @@ export default class AnimatedTracking extends AnimatedNode {
     animationClass: any,
     animationConfig: Object,
     callback?: ?EndCallback,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     this._value = value;
     this._parent = parent;
     this._animationClass = animationClass;
@@ -65,6 +67,7 @@ export default class AnimatedTracking extends AnimatedNode {
       let {platformConfig} = this._animationConfig;
       this.__makeNative(platformConfig);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -95,6 +98,7 @@ export default class AnimatedTracking extends AnimatedNode {
       animationConfig,
       toValue: this._parent.__getNativeTag(),
       value: this._value.__getNativeTag(),
+      debugID: this.__getDebugID(),
     };
   }
 }

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedNodeConfig} from './AnimatedNode';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {validateTransform} from '../../../src/private/animated/NativeAnimatedValidation';
@@ -70,8 +71,9 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   constructor(
     nodes: $ReadOnlyArray<AnimatedNode>,
     transforms: $ReadOnlyArray<Transform<>>,
+    config?: ?AnimatedNodeConfig,
   ) {
-    super();
+    super(config);
     this.#nodes = nodes;
     this._transforms = transforms;
   }
@@ -115,6 +117,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
       const node = nodes[ii];
       node.__addChild(this);
     }
+    super.__attach();
   }
 
   __detach(): void {
@@ -160,6 +163,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     return {
       type: 'transform',
       transforms: transformsConfig,
+      debugID: this.__getDebugID(),
     };
   }
 }