Better error when passing easing from 'react-native' instead of 'reanimated'

src/reanimated2/animation/timing.ts

@@ -1,7 +1,11 @@
 'use strict';
 import type { EasingFunction, EasingFunctionFactory } from '../Easing';
 import { Easing } from '../Easing';
-import { defineAnimation, getReduceMotionForAnimation } from './util';
+import {
+  assertEasingIsWorklet,
+  defineAnimation,
+  getReduceMotionForAnimation,
+} from './util';
 import type {
   Animation,
   AnimationCallback,
@@ -65,6 +69,10 @@ export const withTiming = function (
 ): Animation<TimingAnimation> {
   'worklet';
 
+  if (__DEV__ && userConfig?.easing) {
+    assertEasingIsWorklet(userConfig?.easing);
+  }
+
   return defineAnimation<TimingAnimation>(toValue, () => {
     'worklet';
     const config: Required<Omit<TimingConfig, 'reduceMotion'>> = {

src/reanimated2/animation/util.ts

@@ -9,7 +9,7 @@ import {
   toGammaSpace,
   toLinearSpace,
 } from '../Colors';
-import { ReduceMotion } from '../commonTypes';
+import { ReduceMotion, isWorkletFunction } from '../commonTypes';
 import type {
   SharedValue,
   AnimatableValue,
@@ -33,6 +33,7 @@ import {
   getRotationMatrix,
 } from './transformationMatrix/matrixUtils';
 import { isReducedMotion, shouldBeUseWeb } from '../PlatformChecker';
+import type { EasingFunction, EasingFunctionFactory } from '../Easing';
 
 let IN_STYLE_UPDATER = false;
 const IS_REDUCED_MOTION = isReducedMotion();
@@ -43,6 +44,27 @@ if (__DEV__ && IS_REDUCED_MOTION) {
   );
 }
 
+const SHOULD_BE_USE_WEB = shouldBeUseWeb();
+
+export function assertEasingIsWorklet(
+  easing: EasingFunction | EasingFunctionFactory
+) {
+  'worklet';
+  if (_WORKLET) {
+    // If 'assertEasingIsWorklet' is called on UI runtime then easing is a copy and it is not a worklet
+    return true;
+  }
+  if (SHOULD_BE_USE_WEB) {
+    // It is possible to run reanimated on web without plugin, so let's skip this check on web
+    return true;
+  }
+  if (!isWorkletFunction(easing)) {
+    throw new Error(
+      `[Reanimated] The easing function is not a worklet. Are you sure you didn't import it from react-native? `
+    );
+  }
+}
+
 export function initialUpdaterRun<T>(updater: () => T) {
   IN_STYLE_UPDATER = true;
   const result = updater();
@@ -478,8 +500,6 @@ type AnimationToDecoration<
   ? Record<string, unknown>
   : U | (() => U) | AnimatableValue;
 
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
-
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation, // type that's supposed to be returned
   U extends AnimationObject | StyleLayoutAnimation = T // type that's received

src/reanimated2/commonTypes.ts

@@ -131,7 +131,11 @@ export function isWorkletFunction<
   'worklet';
   // Since host objects always return true for `in` operator, we have to use dot notation to check if the property exists.
   // See https://github.com/facebook/hermes/blob/340726ef8cf666a7cce75bc60b02fa56b3e54560/lib/VM/JSObject.cpp#L1276.
-  return !!(value as Record<string, unknown>).__workletHash;
+  return (
+    typeof value === 'function' &&
+    '__workletHash' in value &&
+    !!value.__workletHash
+  );
 }
 
 export type AnimatedPropsAdapterFunction = (

src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -8,6 +8,7 @@ import type {
 import type { EasingFunction } from '../../Easing';
 import { BaseAnimationBuilder } from './BaseAnimationBuilder';
 import type { StyleProps } from '../../commonTypes';
+import { assertEasingIsWorklet } from '../../animation/util';
 
 export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   easingV?: EasingFunction;
@@ -40,6 +41,9 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   }
 
   easing(easingFunction: EasingFunction): this {
+    if (__DEV__) {
+      assertEasingIsWorklet(easingFunction);
+    }
     this.easingV = easingFunction;
     return this;
   }

src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts

@@ -12,7 +12,10 @@ import type {
 import type { StyleProps } from '../../commonTypes';
 import type { TransformArrayItem } from '../../helperTypes';
 import { ReduceMotion } from '../../commonTypes';
-import { getReduceMotionFromConfig } from '../../animation/util';
+import {
+  assertEasingIsWorklet,
+  getReduceMotionFromConfig,
+} from '../../animation/util';
 
 interface KeyframePoint {
   duration: number;
@@ -129,6 +132,11 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
           "[Reanimated] Keyframe can contain only that set of properties that were provide with initial values (keyframe 0 or 'from')"
         );
       }
+
+      if (__DEV__ && easing) {
+        assertEasingIsWorklet(easing);
+      }
+
       parsedKeyframes[key].push({
         duration: getAnimationDuration(key, currentKeyPoint),
         value,

src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts

@@ -7,6 +7,7 @@ import { BaseAnimationBuilder } from '../animationBuilder';
 import type { EasingFunction } from '../../Easing';
 import { Easing } from '../../Easing';
 import { withTiming } from '../../animation';
+import { assertEasingIsWorklet } from '../../animation/util';
 
 /**
  * Layout transitions with a curved animation. You can modify the behavior by chaining methods like `.duration(500)` or `.delay(500)`.
@@ -36,6 +37,9 @@ export class CurvedTransition
   }
 
   easingX(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingXV = easing;
     return this;
   }
@@ -46,6 +50,9 @@ export class CurvedTransition
   }
 
   easingY(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingYV = easing;
     return this;
   }
@@ -56,6 +63,9 @@ export class CurvedTransition
   }
 
   easingWidth(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingWidthV = easing;
     return this;
   }
@@ -66,6 +76,9 @@ export class CurvedTransition
   }
 
   easingHeight(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingHeightV = easing;
     return this;
   }