Migrate from useWorkletCallback

src/components/bottomSheet/BottomSheet.tsx

@@ -18,7 +18,6 @@ import Animated, {
   Extrapolation,
   runOnUI,
   cancelAnimation,
-  useWorkletCallback,
   type WithSpringConfig,
   type WithTimingConfig,
   type SharedValue,
@@ -569,13 +568,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region animation
-    const stopAnimation = useWorkletCallback(() => {
+    const stopAnimation = useCallback(() => {
+      'worklet';
       cancelAnimation(animatedPosition);
       animatedAnimationSource.value = ANIMATION_SOURCE.NONE;
       animatedAnimationState.value = ANIMATION_STATE.STOPPED;
     }, [animatedPosition, animatedAnimationState, animatedAnimationSource]);
-    const animateToPositionCompleted = useWorkletCallback(
+    const animateToPositionCompleted = useCallback(
       function animateToPositionCompleted(isFinished?: boolean) {
+        'worklet';
         if (!isFinished) {
           return;
         }
@@ -603,15 +604,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedNextPosition.value = INITIAL_VALUE;
         animatedNextPositionIndex.value = INITIAL_VALUE;
         animatedContainerHeightDidChange.value = false;
-      }
+      },
+      []
     );
-    const animateToPosition: AnimateToPositionType = useWorkletCallback(
+    const animateToPosition: AnimateToPositionType = useCallback(
       function animateToPosition(
         position: number,
         source: ANIMATION_SOURCE,
         velocity = 0,
         configs?: WithTimingConfig | WithSpringConfig
       ) {
+        'worklet';
         if (__DEV__) {
           runOnJS(print)({
             component: 'BottomSheet',
@@ -694,9 +697,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
      *
      * @param targetPosition position to be set.
      */
-    const setToPosition = useWorkletCallback(function setToPosition(
+    const setToPosition = useCallback(function setToPosition(
       targetPosition: number
     ) {
+      'worklet';
       if (
         targetPosition === animatedPosition.value ||
         targetPosition === undefined ||
@@ -737,7 +741,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
      * Calculate and evaluate the current position based on multiple
      * local states.
      */
-    const getEvaluatedPosition = useWorkletCallback(
+    const getEvaluatedPosition = useCallback(
       function getEvaluatedPosition(source: ANIMATION_SOURCE) {
         'worklet';
         const currentIndex = animatedCurrentIndex.value;
@@ -847,11 +851,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     /**
      * Evaluate the bottom sheet position based based on a event source and other local states.
      */
-    const evaluatePosition = useWorkletCallback(
+    const evaluatePosition = useCallback(
       function evaluatePosition(
         source: ANIMATION_SOURCE,
         animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
+        'worklet';
         /**
          * if a force closing is running and source not from user, then we early exit
          */
@@ -1026,11 +1031,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animationConfigs
       );
     });
-    const handleSnapToPosition = useWorkletCallback(
+    const handleSnapToPosition = useCallback(
       function handleSnapToPosition(
         position: number | string,
         animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
+        'worklet';
         if (__DEV__) {
           print({
             component: BottomSheet.name,

src/hooks/useGestureEventsHandlersDefault.tsx

@@ -1,8 +1,8 @@
+import { useCallback } from 'react';
 import { Keyboard, Platform } from 'react-native';
 import {
   runOnJS,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 import {
   ANIMATION_SOURCE,
@@ -70,8 +70,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
     //#endregion
 
     //#region gesture methods
-    const handleOnStart: GestureEventHandlerCallbackType = useWorkletCallback(
+    const handleOnStart: GestureEventHandlerCallbackType = useCallback(
       function handleOnStart(__, _) {
+        'worklet';
         // cancel current animation
         stopAnimation();
 
@@ -111,8 +112,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
         animatedScrollableContentOffsetY,
       ]
     );
-    const handleOnChange: GestureEventHandlerCallbackType = useWorkletCallback(
+    const handleOnChange: GestureEventHandlerCallbackType = useCallback(
       function handleOnChange(source, { translationY }) {
+        'worklet';
         let highestSnapPoint = animatedHighestSnapPoint.value;
 
         /**
@@ -267,8 +269,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
         animatedScrollableContentOffsetY,
       ]
     );
-    const handleOnEnd: GestureEventHandlerCallbackType = useWorkletCallback(
+    const handleOnEnd: GestureEventHandlerCallbackType = useCallback(
       function handleOnEnd(source, { translationY, absoluteY, velocityY }) {
+        'worklet';
         const highestSnapPoint = animatedHighestSnapPoint.value;
         const isSheetAtHighestSnapPoint =
           animatedPosition.value === highestSnapPoint;
@@ -402,8 +405,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
     );
 
     const handleOnFinalize: GestureEventHandlerCallbackType =
-      useWorkletCallback(
+      useCallback(
         function handleOnFinalize() {
+          'worklet';
           resetContext(context);
         },
         [context]

src/hooks/useGestureEventsHandlersDefault.web.tsx

@@ -1,8 +1,8 @@
+import { useCallback } from 'react';
 import { Keyboard, Platform } from 'react-native';
 import {
   runOnJS,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 import {
   ANIMATION_SOURCE,
@@ -67,8 +67,9 @@ export const useGestureEventsHandlersDefault = () => {
   //#endregion
 
   //#region gesture methods
-  const handleOnStart: GestureEventHandlerCallbackType = useWorkletCallback(
+  const handleOnStart: GestureEventHandlerCallbackType = useCallback(
     function handleOnStart(__, { translationY }) {
+      'worklet';
       // cancel current animation
       stopAnimation();
 
@@ -95,8 +96,9 @@ export const useGestureEventsHandlersDefault = () => {
       animatedScrollableContentOffsetY,
     ]
   );
-  const handleOnChange: GestureEventHandlerCallbackType = useWorkletCallback(
+  const handleOnChange: GestureEventHandlerCallbackType = useCallback(
     function handleOnChange(source, { translationY }) {
+      'worklet';
       let highestSnapPoint = animatedHighestSnapPoint.value;
 
       translationY = translationY - context.value.initialTranslationY;
@@ -249,8 +251,9 @@ export const useGestureEventsHandlersDefault = () => {
       animatedScrollableContentOffsetY,
     ]
   );
-  const handleOnEnd: GestureEventHandlerCallbackType = useWorkletCallback(
+  const handleOnEnd: GestureEventHandlerCallbackType = useCallback(
     function handleOnEnd(source, { translationY, absoluteY, velocityY }) {
+      'worklet';
       const highestSnapPoint = animatedHighestSnapPoint.value;
       const isSheetAtHighestSnapPoint =
         animatedPosition.value === highestSnapPoint;
@@ -382,8 +385,9 @@ export const useGestureEventsHandlersDefault = () => {
       animateToPosition,
     ]
   );
-  const handleOnFinalize: GestureEventHandlerCallbackType = useWorkletCallback(
+  const handleOnFinalize: GestureEventHandlerCallbackType = useCallback(
     function handleOnFinalize() {
+      'worklet';
       resetContext(context);
     },
     [context]

src/hooks/useGestureHandler.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
   type GestureStateChangeEvent,
   type GestureUpdateEvent,
@@ -6,7 +7,6 @@ import {
   State,
 } from 'react-native-gesture-handler';
 import type { SharedValue } from 'react-native-reanimated';
-import { useWorkletCallback } from 'react-native-reanimated';
 import { GESTURE_SOURCE } from '../constants';
 import type {
   GestureEventHandlerCallbackType,
@@ -22,8 +22,9 @@ export const useGestureHandler: GestureHandlersHookType = (
   onEnd: GestureEventHandlerCallbackType,
   onFinalize: GestureEventHandlerCallbackType
 ) => {
-  const handleOnStart = useWorkletCallback(
+  const handleOnStart = useCallback(
     (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       state.value = State.BEGAN;
       gestureSource.value = source;
 
@@ -33,12 +34,13 @@ export const useGestureHandler: GestureHandlersHookType = (
     [state, gestureSource, source, onStart]
   );
 
-  const handleOnChange = useWorkletCallback(
+  const handleOnChange = useCallback(
     (
       event: GestureUpdateEvent<
         PanGestureHandlerEventPayload & PanGestureChangeEventPayload
       >
     ) => {
+      'worklet';
       if (gestureSource.value !== source) {
         return;
       }
@@ -49,8 +51,9 @@ export const useGestureHandler: GestureHandlersHookType = (
     [state, gestureSource, source, onChange]
   );
 
-  const handleOnEnd = useWorkletCallback(
+  const handleOnEnd = useCallback(
     (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       if (gestureSource.value !== source) {
         return;
       }
@@ -63,8 +66,9 @@ export const useGestureHandler: GestureHandlersHookType = (
     [state, gestureSource, source, onEnd]
   );
 
-  const handleOnFinalize = useWorkletCallback(
+  const handleOnFinalize = useCallback(
     (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       if (gestureSource.value !== source) {
         return;
       }

src/hooks/useKeyboard.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   Keyboard,
   type KeyboardEvent,
@@ -10,7 +10,6 @@ import {
   runOnUI,
   useAnimatedReaction,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 import { KEYBOARD_STATE, SCREEN_HEIGHT } from '../constants';
 
@@ -42,14 +41,15 @@ export const useKeyboard = () => {
   //#endregion
 
   //#region worklets
-  const handleKeyboardEvent = useWorkletCallback(
+  const handleKeyboardEvent = useCallback(
     (
       state: KEYBOARD_STATE,
       height: number,
       duration: number,
       easing: KeyboardEventEasing,
       bottomOffset?: number
     ) => {
+      'worklet';
       if (state === KEYBOARD_STATE.SHOWN && !shouldHandleKeyboardEvents.value) {
         /**
          * if the keyboard event was fired before the `onFocus` on TextInput,

src/hooks/useScrollEventsHandlersDefault.ts

@@ -1,5 +1,6 @@
+import { useCallback } from 'react';
 import { State } from 'react-native-gesture-handler';
-import { scrollTo, useWorkletCallback } from 'react-native-reanimated';
+import { scrollTo } from 'react-native-reanimated';
 import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
 import type {
   ScrollEventHandlerCallbackType,
@@ -27,8 +28,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
 
   //#region callbacks
   const handleOnScroll: ScrollEventHandlerCallbackType<ScrollEventContextType> =
-    useWorkletCallback(
+    useCallback(
       ({ contentOffset: { y } }, context) => {
+        'worklet';
         /**
          * if sheet position is extended or fill parent, then we reset
          * `shouldLockInitialPosition` value to false.
@@ -67,8 +69,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
       ]
     );
   const handleOnBeginDrag: ScrollEventHandlerCallbackType<ScrollEventContextType> =
-    useWorkletCallback(
+    useCallback(
       ({ contentOffset: { y } }, context) => {
+        'worklet';
         scrollableContentOffsetY.value = y;
         rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
@@ -94,8 +97,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
       ]
     );
   const handleOnEndDrag: ScrollEventHandlerCallbackType<ScrollEventContextType> =
-    useWorkletCallback(
+    useCallback(
       ({ contentOffset: { y } }, context) => {
+        'worklet';
         if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
           const lockPosition = context.shouldLockInitialPosition
             ? (context.initialContentOffsetY ?? 0)
@@ -120,8 +124,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
       ]
     );
   const handleOnMomentumEnd: ScrollEventHandlerCallbackType<ScrollEventContextType> =
-    useWorkletCallback(
+    useCallback(
       ({ contentOffset: { y } }, context) => {
+        'worklet';
         if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
           const lockPosition = context.shouldLockInitialPosition
             ? (context.initialContentOffsetY ?? 0)