fix(reanimated): drop the finished controller before cancel can stop it

Author: RuudBurger

.changeset/reanimated-pooled-controller.md

@@ -0,0 +1,5 @@
+---
+'@plextv/react-lightning-plugin-reanimated': patch
+---
+
+don't stop a finished, pooled animation controller when a composed animation is cancelled

packages/plugin-reanimated/src/animation/runAnimationProgram.test.ts

@@ -1,12 +1,12 @@
 import type { AnimationSettings } from '@lightningjs/renderer';
 import { describe, expect, it } from 'vitest';
+
 import type { LightningElement } from '@plextv/react-lightning';
+
 import { leafProgram, repeatProgram, sequenceProgram } from './animationProgram';
 import { runAnimationProgram } from './runAnimationProgram';
 
-const settings = (
-  over: Partial<AnimationSettings> = {},
-): AnimationSettings => ({
+const settings = (over: Partial<AnimationSettings> = {}): AnimationSettings => ({
   duration: 10,
   easing: 'linear',
   delay: 0,
@@ -96,6 +96,30 @@ describe('runAnimationProgram', () => {
     expect(view.applied.length).toBeLessThanOrEqual(1);
   });
 
+  it('cancel after the program finished does not stop the pooled controller', async () => {
+    const view = makeView();
+    let stops = 0;
+    view.animateStyle = function (key: PropertyKey, value: unknown) {
+      this.applied.push({ key, value });
+      return {
+        waitUntilStopped: () => Promise.resolve(),
+        stop() {
+          stops++;
+        },
+      };
+    };
+
+    const cancel = runAnimationProgram(
+      view as unknown as LightningElement,
+      'x',
+      leafProgram({ toValue: 1, lngAnimation: settings() }),
+    );
+    await flush();
+    cancel();
+
+    expect(stops).toBe(0);
+  });
+
   it('repeats a finite positive count that many times', async () => {
     const view = makeView();
 

packages/plugin-reanimated/src/animation/runAnimationProgram.ts

@@ -1,8 +1,7 @@
 import type { IAnimationController } from '@lightningjs/renderer';
-import type {
-  LightningElement,
-  LightningElementStyle,
-} from '@plextv/react-lightning';
+
+import type { LightningElement, LightningElementStyle } from '@plextv/react-lightning';
+
 import type { AnimationProgram, ProgramLeaf } from './animationProgram';
 
 export type CancelAnimation = () => void;
@@ -30,16 +29,19 @@ export function runAnimationProgram(
       // Call as a method: extracting animateStyle drops `this`, so it throws
       // and the catch below silently freezes the whole composed animation.
       const animatableView = view as unknown as {
-        animateStyle: (
-          key: keyof LightningElementStyle,
-          value: unknown,
-        ) => IAnimationController;
+        animateStyle: (key: keyof LightningElementStyle, value: unknown) => IAnimationController;
       };
       const controller = animatableView.animateStyle(prop, leaf.toValue);
 
       current = controller;
 
       await controller.waitUntilStopped();
+
+      // The renderer pools controllers: once stopped this one may already drive
+      // another animation, so cancel must not stop it.
+      if (current === controller) {
+        current = undefined;
+      }
     } catch {
       // node was destroyed or recycled mid-flight; stop quietly
       cancelled = true;