chore: update deprecated Reanimated API use with Worklets (#4407)

## Description

🚀 

## Test plan

🚀

Author: tjzel

.yarn/patches/react-native-worklets-npm-0.9.1-5bc5b900ed.patch

@@ -0,0 +1,14 @@
+diff --git a/src/mock.ts b/src/mock.ts
+index b82bb310c288221b392282d8660738e525aac9ab..a1516c5d68d9b9068e7f3178b81fbdc0f0e1d75c 100644
+--- a/src/mock.ts
++++ b/src/mock.ts
+@@ -44,6 +44,9 @@ const WorkletAPI = {
+   },
+   scheduleOnRuntime: IMMEDIATE_CALLBACK_INVOCATION,
+   createSerializable: ID,
++  createShareable: (hostRuntimeId: number, initial: unknown) => ({
++    value: initial,
++  }),
+   isSerializableRef: ID,
+   serializableMappingCache: new Map(),
+   createSynchronizable: ID,

apps/basic-example/package.json

@@ -21,7 +21,7 @@
     "react-native": "0.86.0",
     "react-native-gesture-handler": "workspace:*",
     "react-native-reanimated": "~4.4.1",
-    "react-native-worklets": "0.9.1"
+    "react-native-worklets": "patch:react-native-worklets@npm%3A0.9.1#~/.yarn/patches/react-native-worklets-npm-0.9.1-5bc5b900ed.patch"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/common-app/package.json

@@ -28,7 +28,7 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
     "react-native-svg": "15.15.4",
-    "react-native-worklets": "0.9.1"
+    "react-native-worklets": "patch:react-native-worklets@npm%3A0.9.1#~/.yarn/patches/react-native-worklets-npm-0.9.1-5bc5b900ed.patch"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/expo-example/package.json

@@ -31,7 +31,7 @@
     "react-native-screens": "4.25.2",
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.0",
-    "react-native-worklets": "0.9.1"
+    "react-native-worklets": "patch:react-native-worklets@npm%3A0.9.1#~/.yarn/patches/react-native-worklets-npm-0.9.1-5bc5b900ed.patch"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/macos-example/package.json

@@ -25,7 +25,7 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
     "react-native-svg": "15.15.4",
-    "react-native-worklets": "0.8.1"
+    "react-native-worklets": "patch:react-native-worklets@npm%3A0.9.1#~/.yarn/patches/react-native-worklets-npm-0.9.1-5bc5b900ed.patch"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/react-native-gesture-handler/package.json

@@ -98,7 +98,7 @@
     "react-native": "0.86.0",
     "react-native-builder-bob": "^0.40.13",
     "react-native-reanimated": "~4.4.1",
-    "react-native-worklets": "0.9.1",
+    "react-native-worklets": "patch:react-native-worklets@npm%3A0.9.1#~/.yarn/patches/react-native-worklets-npm-0.9.1-5bc5b900ed.patch",
     "react-test-renderer": "19.2.3",
     "typescript": "~6.0.3"
   },

packages/react-native-gesture-handler/src/__tests__/runOnJSReanimatedHandlers.test.tsx

@@ -12,14 +12,6 @@ jest.mock('../handlers/gestures/reanimatedWrapper', () => {
     useEvent: jest.fn(() => jest.fn()),
     isSharedValue: (value: unknown): boolean =>
       value !== null && typeof value === 'object' && 'value' in value,
-    isWorkletFunction: (value: unknown): boolean =>
-      typeof value === 'function' && '__workletHash' in value,
-    makeMutable: <T,>(value: T) => ({ value }),
-    runOnUI: () => jest.fn(),
-    runOnJS:
-      (fn: (...args: unknown[]) => unknown) =>
-      (...args: unknown[]) =>
-        fn(...args),
     useSharedValue: <T,>(value: T) => ({ value }),
     setGestureState: jest.fn(),
   };

packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx

@@ -27,13 +27,13 @@ import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
   Extrapolation,
   interpolate,
-  runOnJS,
   useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import type {
   ActiveCursor,
@@ -339,7 +339,7 @@ const DrawerLayout = function DrawerLayout(
   const openValue = useSharedValue<number>(0);
 
   useDerivedValue(() => {
-    onDrawerSlide && runOnJS(onDrawerSlide)(openValue.value);
+    onDrawerSlide && scheduleOnRN(onDrawerSlide, openValue.value);
   }, []);
 
   const isDrawerOpen = useSharedValue(false);
@@ -352,7 +352,7 @@ const DrawerLayout = function DrawerLayout(
     (newState: DrawerState, drawerWillShow: boolean) => {
       'worklet';
       onDrawerStateChanged &&
-        runOnJS(onDrawerStateChanged)?.(newState, drawerWillShow);
+        scheduleOnRN(onDrawerStateChanged, newState, drawerWillShow);
     },
     [onDrawerStateChanged]
   );
@@ -392,10 +392,10 @@ const DrawerLayout = function DrawerLayout(
       isDrawerOpen.value = willShow;
 
       emitStateChanged(DrawerState.SETTLING, willShow);
-      runOnJS(setDrawerState)(DrawerState.SETTLING);
+      scheduleOnRN(setDrawerState, DrawerState.SETTLING);
 
       if (hideStatusBar) {
-        runOnJS(setStatusBarHidden)(willShow, statusBarAnimation);
+        scheduleOnRN(setStatusBarHidden, willShow, statusBarAnimation);
       }
 
       const normalizedToValue = interpolate(
@@ -426,12 +426,12 @@ const DrawerLayout = function DrawerLayout(
         (finished) => {
           if (finished) {
             emitStateChanged(DrawerState.IDLE, willShow);
-            runOnJS(setDrawerOpened)(willShow);
-            runOnJS(setDrawerState)(DrawerState.IDLE);
+            scheduleOnRN(setDrawerOpened, willShow);
+            scheduleOnRN(setDrawerState, DrawerState.IDLE);
             if (willShow) {
-              onDrawerOpen && runOnJS(onDrawerOpen)?.();
+              onDrawerOpen && scheduleOnRN(onDrawerOpen);
             } else {
-              onDrawerClose && runOnJS(onDrawerClose)?.();
+              onDrawerClose && scheduleOnRN(onDrawerClose);
             }
           }
         }
@@ -550,12 +550,12 @@ const DrawerLayout = function DrawerLayout(
     onActivate: () => {
       'worklet';
       emitStateChanged(DrawerState.DRAGGING, false);
-      runOnJS(setDrawerState)(DrawerState.DRAGGING);
+      scheduleOnRN(setDrawerState, DrawerState.DRAGGING);
       if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
-        runOnJS(dismissKeyboard)();
+        scheduleOnRN(dismissKeyboard);
       }
       if (hideStatusBar) {
-        runOnJS(setStatusBarHidden)(true, statusBarAnimation);
+        scheduleOnRN(setStatusBarHidden, true, statusBarAnimation);
       }
     },
     onUpdate: (event) => {

packages/react-native-gesture-handler/src/components/ReanimatedSwipeable/ReanimatedSwipeable.tsx

@@ -9,17 +9,20 @@ import type { LayoutChangeEvent } from 'react-native';
 import { I18nManager, StyleSheet, View } from 'react-native';
 import Animated, {
   interpolate,
+  isSharedValue,
   measure,
   ReduceMotion,
-  runOnJS,
-  runOnUI,
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
+import {
+  isWorkletRuntime,
+  scheduleOnRN,
+  scheduleOnUI,
+} from 'react-native-worklets';
 
-import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
 import { tagMessage } from '../../utils';
 import { GestureDetector } from '../../v3/detectors';
 import type { PanGestureActiveEvent } from '../../v3/hooks/gestures';
@@ -89,22 +92,22 @@ const Swipeable = (props: SwipeableProps) => {
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-      if (!Reanimated?.isSharedValue<number>(dragOffsetFromRight)) {
+      if (!isSharedValue<number>(dragOffsetFromRight)) {
         return;
       }
 
       const listenerId = Math.random() + SHARED_VALUE_OFFSET;
 
-      Reanimated?.runOnUI(() => {
+      scheduleOnUI(() => {
         'worklet';
         dragOffsetFromRight.addListener(listenerId, checkValue);
-      })();
+      });
 
       return () => {
-        Reanimated?.runOnUI(() => {
+        scheduleOnUI(() => {
           'worklet';
           dragOffsetFromRight.removeListener(listenerId);
-        })();
+        });
       };
     }, [dragOffsetFromRight, checkValue]);
   }
@@ -190,13 +193,15 @@ const Swipeable = (props: SwipeableProps) => {
       'worklet';
 
       if (onSwipeableWillOpen && toValue !== 0) {
-        runOnJS(onSwipeableWillOpen)(
+        scheduleOnRN(
+          onSwipeableWillOpen,
           toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT
         );
       }
 
       if (onSwipeableWillClose && toValue === 0) {
-        runOnJS(onSwipeableWillClose)(
+        scheduleOnRN(
+          onSwipeableWillClose,
           fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
         );
       }
@@ -209,13 +214,15 @@ const Swipeable = (props: SwipeableProps) => {
       'worklet';
 
       if (onSwipeableOpen && toValue !== 0) {
-        runOnJS(onSwipeableOpen)(
+        scheduleOnRN(
+          onSwipeableOpen,
           toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT
         );
       }
 
       if (onSwipeableClose && toValue === 0) {
-        runOnJS(onSwipeableClose)(
+        scheduleOnRN(
+          onSwipeableClose,
           fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
         );
       }
@@ -328,37 +335,37 @@ const Swipeable = (props: SwipeableProps) => {
     () => ({
       close() {
         'worklet';
-        if (_WORKLET) {
+        if (isWorkletRuntime()) {
           animateRow(0);
           return;
         }
-        runOnUI(() => {
+        scheduleOnUI(() => {
           animateRow(0);
-        })();
+        });
       },
       openLeft() {
         'worklet';
-        if (_WORKLET) {
+        if (isWorkletRuntime()) {
           updateElementWidths();
           animateRow(leftWidth.value);
           return;
         }
-        runOnUI(() => {
+        scheduleOnUI(() => {
           updateElementWidths();
           animateRow(leftWidth.value);
-        })();
+        });
       },
       openRight() {
         'worklet';
-        if (_WORKLET) {
+        if (isWorkletRuntime()) {
           updateElementWidths();
           animateRow(-rightWidth.value);
           return;
         }
-        runOnUI(() => {
+        scheduleOnUI(() => {
           updateElementWidths();
           animateRow(-rightWidth.value);
-        })();
+        });
       },
       reset() {
         'worklet';
@@ -544,9 +551,9 @@ const Swipeable = (props: SwipeableProps) => {
       if (!dragStarted.value) {
         dragStarted.value = true;
         if (rowState.value === 0 && onSwipeableOpenStartDrag) {
-          runOnJS(onSwipeableOpenStartDrag)(direction);
+          scheduleOnRN(onSwipeableOpenStartDrag, direction);
         } else if (onSwipeableCloseStartDrag) {
-          runOnJS(onSwipeableCloseStartDrag)(direction);
+          scheduleOnRN(onSwipeableCloseStartDrag, direction);
         }
       }
 

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -36,12 +36,26 @@ export type SimplifiedShareableHost<TValue = unknown> = {
 };
 
 type WorkletsPackage = {
-  getUIRuntimeHolder?: () => object;
-  createShareable?: <TValue>(
+  getUIRuntimeHolder: () => object;
+  createShareable: <TValue>(
     hostRuntimeId: number,
     initial: TValue
   ) => SimplifiedShareableHost<TValue>;
-  UIRuntimeId?: number;
+  UIRuntimeId: number;
+  scheduleOnUI: <Args extends unknown[], ReturnValue>(
+    worklet: (...args: Args) => ReturnValue,
+    ...args: Args
+  ) => void;
+  scheduleOnRN: <Args extends unknown[], ReturnValue>(
+    fun: (...args: Args) => ReturnValue,
+    ...args: Args
+  ) => void;
+  isWorkletFunction: <
+    Args extends unknown[] = unknown[],
+    ReturnValue = unknown,
+  >(
+    value: unknown
+  ) => value is WorkletFunction<Args, ReturnValue>;
 };
 
 export type NativeEventsManager = new (component: {
@@ -77,20 +91,9 @@ type ReanimatedPackage = {
   useSharedValue: <T>(value: T) => SharedValue<T>;
   setGestureState: (handlerTag: number, newState: number) => void;
   isSharedValue: <T = unknown>(value: unknown) => value is SharedValue<T>;
-  isWorkletFunction<Args extends unknown[] = unknown[], ReturnValue = unknown>(
-    value: unknown
-  ): value is WorkletFunction<Args, ReturnValue>;
   useComposedEventHandler<T>(
     handlers: (((event: T) => void) | null)[]
   ): (event: T) => void;
-  // TODO: runOnJS and runOnUI are deprecated. These should be removed in near future.
-  runOnJS: <A extends unknown[], R>(
-    fn: (...args: A) => R
-  ) => (...args: Parameters<typeof fn>) => void;
-  runOnUI<A extends any[], R>(
-    fn: (...args: A) => R
-  ): (...args: Parameters<typeof fn>) => void;
-  makeMutable<T>(value: T): { value: T };
 };
 
 let Reanimated: ReanimatedPackage | undefined;
@@ -113,12 +116,6 @@ try {
   Reanimated = undefined;
 }
 
-if (!Reanimated?.useSharedValue) {
-  // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
-  // reset the module to undefined so we can fallback to the default implementation
-  Reanimated = undefined;
-}
-
 if (Worklets !== undefined) {
   installUIRuntimeBindings(Worklets.getUIRuntimeHolder);
 }