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, 'withTiming');
+  }
+
   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,24 @@ if (__DEV__ && IS_REDUCED_MOTION) {
   );
 }
 
+const SHOULD_BE_USE_WEB = shouldBeUseWeb();
+
+export function assertEasingIsWorklet(
+  easing: EasingFunction | EasingFunctionFactory,
+  functionName: string
+) {
+  'worklet';
+  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 provided to \`${functionName}\` 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 +497,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,10 @@ 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 (
+    !!(value as Record<string, unknown>).__workletHash &&
+    typeof value === 'function'
+  );
 }
 
 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, 'animation');
+    }
     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;
@@ -124,6 +127,9 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
       currentKeyPoint: number;
       easing?: EasingFunction;
     }): void => {
+      if (__DEV__ && easing) {
+        assertEasingIsWorklet(easing, 'Keyframe');
+      }
       if (!(key in parsedKeyframes)) {
         throw new Error(
           "[Reanimated] Keyframe can contain only that set of properties that were provide with initial values (keyframe 0 or 'from')"

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, 'CurvedTransition');
+    }
     this.easingXV = easing;
     return this;
   }
@@ -46,6 +50,9 @@ export class CurvedTransition
   }
 
   easingY(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing, 'CurvedTransition');
+    }
     this.easingYV = easing;
     return this;
   }
@@ -56,6 +63,9 @@ export class CurvedTransition
   }
 
   easingWidth(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing, 'CurvedTransition');
+    }
     this.easingWidthV = easing;
     return this;
   }
@@ -66,6 +76,9 @@ export class CurvedTransition
   }
 
   easingHeight(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing, 'CurvedTransition');
+    }
     this.easingHeightV = easing;
     return this;
   }

src/reanimated2/valueUnpacker.ts

@@ -46,6 +46,7 @@ function valueUnpacker(objectToUnpack: any, category?: string): any {
       workletsCache.set(workletHash, workletFun);
     }
     const functionInstance = workletFun.bind(objectToUnpack);
+    functionInstance.__workletHash = workletHash;
     objectToUnpack._recur = functionInstance;
     return functionInstance;
   } else if (objectToUnpack.__init) {