diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js b/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js index 2e500bf64b480d..8ab98a06246ac2 100644 --- a/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js +++ b/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js @@ -85,6 +85,7 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) { * See https://reactnative.dev/docs/animatedvalue */ export default class AnimatedValue extends AnimatedWithChildren { + #attached: boolean = false; #updateSubscription: ?EventSubscription = null; _value: number; @@ -107,14 +108,8 @@ export default class AnimatedValue extends AnimatedWithChildren { } __attach(): void { - if (this.__isNative) { - // NOTE: In theory, we should only need to call this when any listeners - // are added. However, there is a global `onUserDrivenAnimationEnded` - // listener that relies on `onAnimatedValueUpdate` having fired to update - // the values in JavaScript. If that listener is removed, this could be - // re-optimized. - this.#ensureUpdateSubscriptionExists(); - } + this.#attached = true; + this.#ensureUpdateSubscriptionExists(); } __detach(): void { @@ -126,6 +121,7 @@ export default class AnimatedValue extends AnimatedWithChildren { } this.stopAnimation(); super.__detach(); + this.#attached = false; } __getValue(): number { @@ -137,10 +133,22 @@ export default class AnimatedValue extends AnimatedWithChildren { this.#ensureUpdateSubscriptionExists(); } + /** + * NOTE: In theory, we should only need to call this when any listeners + * are added. However, there is a global `onUserDrivenAnimationEnded` + * listener that relies on `onAnimatedValueUpdate` having fired to update + * the values in JavaScript. If that listener is removed, this could be + * re-optimized. + */ #ensureUpdateSubscriptionExists(): void { if (this.#updateSubscription != null) { return; } + // The order in which `__attach` and `__makeNative` are called is not + // deterministic, and we only want to do this when both have occurred. + if (!this.#attached || !this.__isNative) { + return; + } const nativeTag = this.__getNativeTag(); NativeAnimatedAPI.startListeningToAnimatedNodeValue(nativeTag); const subscription: EventSubscription =