Animated: Fail Fast on Native Driver Incompatibility

Summary: Refactors the `Animation` subclasses (from Animated) such that using `useNativeDriver` with a non-native `AnimatedValue` will consistently fail when calling `start()`. The current behavior is inconsistent because if a timing or spring animation has a non-zero delay, the error will be thrown in asynchronously in a timeout. Changelog: [General][Changed] - Animations started with incompatible `useNativeDriver` and `AnimatedValue` configurations will now synchronously fail. Previously, spring and timing animations with non-zero delays would throw the error asynchronously. Differential Revision: D63572062
yungsters · Sep 28, 2024 · 8a9ac58 · 8a9ac58
1 parent c031fff
commit 8a9ac58
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 18 deletions.
diff --git a/packages/react-native/Libraries/Animated/__tests__/Animated-test.js b/packages/react-native/Libraries/Animated/__tests__/Animated-test.js
@@ -189,6 +189,45 @@ describe('Animated', () => {
       );
       console.warn.mockRestore();
     });
+
+    it('throws if `useNativeDriver` is incompatible with AnimatedValue', () => {
+      const value = new Animated.Value(0);
+      value.__makeNative();
+
+      const animation = Animated.spring(value, {
+        toValue: 0,
+        velocity: 0,
+        useNativeDriver: false,
+      });
+
+      expect(() => {
+        animation.start();
+      }).toThrow(
+        'Attempting to run JS driven animation on animated node that has ' +
+          'been moved to "native" earlier by starting an animation with ' +
+          '`useNativeDriver: true`',
+      );
+    });
+
+    it('synchronously throws on `useNativeDriver` incompatibility', () => {
+      const value = new Animated.Value(0);
+      value.__makeNative();
+
+      const animation = Animated.spring(value, {
+        delay: 100, // Even with a non-zero delay, error throws synchronously.
+        toValue: 0,
+        velocity: 0,
+        useNativeDriver: false,
+      });
+
+      expect(() => {
+        animation.start();
+      }).toThrow(
+        'Attempting to run JS driven animation on animated node that has ' +
+          'been moved to "native" earlier by starting an animation with ' +
+          '`useNativeDriver: true`',
+      );
+    });
   });
 
   describe('Animated Sequence', () => {

diff --git a/packages/react-native/Libraries/Animated/animations/DecayAnimation.js b/packages/react-native/Libraries/Animated/animations/DecayAnimation.js
@@ -81,12 +81,6 @@ export default class DecayAnimation extends Animation {
   ): void {
     super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
 
-    this.__active = true;
-    this._lastValue = fromValue;
-    this._fromValue = fromValue;
-    this._onUpdate = onUpdate;
-    this._startTime = Date.now();
-
     if (!this._useNativeDriver && animatedValue.__isNative === true) {
       throw new Error(
         'Attempting to run JS driven animation on animated node ' +
@@ -95,6 +89,12 @@ export default class DecayAnimation extends Animation {
       );
     }
 
+    this.__active = true;
+    this._lastValue = fromValue;
+    this._fromValue = fromValue;
+    this._onUpdate = onUpdate;
+    this._startTime = Date.now();
+
     if (this._useNativeDriver) {
       this.__startNativeAnimation(animatedValue);
     } else {

diff --git a/packages/react-native/Libraries/Animated/animations/SpringAnimation.js b/packages/react-native/Libraries/Animated/animations/SpringAnimation.js
@@ -204,6 +204,14 @@ export default class SpringAnimation extends Animation {
   ): void {
     super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
 
+    if (!this._useNativeDriver && animatedValue.__isNative === true) {
+      throw new Error(
+        'Attempting to run JS driven animation on animated node ' +
+          'that has been moved to "native" earlier by starting an ' +
+          'animation with `useNativeDriver: true`',
+      );
+    }
+
     this.__active = true;
     this._startPosition = fromValue;
     this._lastPosition = this._startPosition;
@@ -222,14 +230,6 @@ export default class SpringAnimation extends Animation {
     }
 
     const start = () => {
-      if (!this._useNativeDriver && animatedValue.__isNative === true) {
-        throw new Error(
-          'Attempting to run JS driven animation on animated node ' +
-            'that has been moved to "native" earlier by starting an ' +
-            'animation with `useNativeDriver: true`',
-        );
-      }
-
       if (this._useNativeDriver) {
         this.__startNativeAnimation(animatedValue);
       } else {

diff --git a/packages/react-native/Libraries/Animated/animations/TimingAnimation.js b/packages/react-native/Libraries/Animated/animations/TimingAnimation.js
@@ -109,10 +109,6 @@ export default class TimingAnimation extends Animation {
   ): void {
     super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
 
-    this.__active = true;
-    this._fromValue = fromValue;
-    this._onUpdate = onUpdate;
-
     if (!this._useNativeDriver && animatedValue.__isNative === true) {
       throw new Error(
         'Attempting to run JS driven animation on animated node ' +
@@ -121,6 +117,10 @@ export default class TimingAnimation extends Animation {
       );
     }
 
+    this.__active = true;
+    this._fromValue = fromValue;
+    this._onUpdate = onUpdate;
+
     const start = () => {
       this._startTime = Date.now();