Animated: Trigger Callback on Stopping Native Loops (#52274)

Summary:

Currently, `callback` in `Animated.loop(animation).start(callback)` does not get triggered when calling `stop()` if `animation` uses native driver.

This diff implements that functionality.

Changelog:
[General][Changed] - Stopping an `Animated.loop` for a native animation will now correctly trigger completion callbacks supplied to `start()`.

Differential Revision: D77329013

Author: yungsters

packages/react-native/Libraries/Animated/AnimatedImplementation.js

@@ -42,7 +42,7 @@ export type CompositeAnimation = {
   start: (callback?: ?EndCallback, isLooping?: boolean) => void,
   stop: () => void,
   reset: () => void,
-  _startNativeLoop: (iterations?: number) => void,
+  _startNativeLoop: (iterations: number, callback: ?EndCallback) => void,
   _isUsingNativeDriver: () => boolean,
   ...
 };
@@ -192,9 +192,9 @@ const springImpl = function (
         value.resetAnimation();
       },
 
-      _startNativeLoop: function (iterations?: number): void {
+      _startNativeLoop(iterations: number, callback: ?EndCallback): void {
         const singleConfig = {...config, iterations};
-        start(value, singleConfig);
+        start(value, singleConfig, callback);
       },
 
       _isUsingNativeDriver: function (): boolean {
@@ -246,9 +246,9 @@ const timingImpl = function (
         value.resetAnimation();
       },
 
-      _startNativeLoop: function (iterations?: number): void {
+      _startNativeLoop(iterations: number, callback: ?EndCallback): void {
         const singleConfig = {...config, iterations};
-        start(value, singleConfig);
+        start(value, singleConfig, callback);
       },
 
       _isUsingNativeDriver: function (): boolean {
@@ -288,9 +288,9 @@ const decayImpl = function (
         value.resetAnimation();
       },
 
-      _startNativeLoop: function (iterations?: number): void {
+      _startNativeLoop(iterations: number, callback: ?EndCallback): void {
         const singleConfig = {...config, iterations};
-        start(value, singleConfig);
+        start(value, singleConfig, callback);
       },
 
       _isUsingNativeDriver: function (): boolean {
@@ -484,7 +484,7 @@ const loopImpl = function (
         callback && callback({finished: true});
       } else {
         if (animation._isUsingNativeDriver()) {
-          animation._startNativeLoop(iterations);
+          animation._startNativeLoop(iterations, callback);
         } else {
           restart(); // Start looping recursively on the js thread
         }

packages/react-native/Libraries/Animated/AnimatedMock.js

@@ -65,7 +65,7 @@ export type CompositeAnimation = {
   start: (callback?: ?EndCallback) => void,
   stop: () => void,
   reset: () => void,
-  _startNativeLoop: (iterations?: number) => void,
+  _startNativeLoop: (iterations: number, callback: ?EndCallback) => void,
   _isUsingNativeDriver: () => boolean,
   ...
 };

packages/react-native/Libraries/Animated/__tests__/Animated-test.js

@@ -693,6 +693,31 @@ describe('Animated', () => {
       expect(animation.reset).toHaveBeenCalledTimes(1);
       expect(cb).toBeCalledWith({finished: false});
     });
+
+    it('stops looping native animations', () => {
+      const value = new Animated.Value(0);
+      const animation = Animated.timing(value, {
+        toValue: 1,
+        useNativeDriver: true,
+      });
+
+      jest.spyOn(animation, '_startNativeLoop');
+      jest.spyOn(animation, 'stop');
+
+      const callback = jest.fn();
+
+      const loop = Animated.loop(animation);
+      loop.start(callback);
+
+      expect(animation._startNativeLoop).toBeCalledTimes(1);
+      expect(animation.stop).not.toBeCalled();
+      expect(callback).not.toBeCalled();
+
+      loop.stop();
+
+      expect(animation.stop).toBeCalled();
+      expect(callback).toBeCalledWith({finished: false});
+    });
   });
 
   it('does not reset animation in a loop if resetBeforeIteration is false', () => {