diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index f908c9ab7..18ad861fd 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/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( //#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( 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( * * @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( * 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( /** * 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( animationConfigs ); }); - const handleSnapToPosition = useWorkletCallback( + const handleSnapToPosition = useCallback( function handleSnapToPosition( position: number | string, animationConfigs?: WithSpringConfig | WithTimingConfig ) { + 'worklet'; if (__DEV__) { print({ component: BottomSheet.name, diff --git a/src/hooks/useGestureEventsHandlersDefault.tsx b/src/hooks/useGestureEventsHandlersDefault.tsx index 20822a85a..5c2d1d12d 100644 --- a/src/hooks/useGestureEventsHandlersDefault.tsx +++ b/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] diff --git a/src/hooks/useGestureEventsHandlersDefault.web.tsx b/src/hooks/useGestureEventsHandlersDefault.web.tsx index b874ab547..c237e9b99 100644 --- a/src/hooks/useGestureEventsHandlersDefault.web.tsx +++ b/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] diff --git a/src/hooks/useGestureHandler.ts b/src/hooks/useGestureHandler.ts index c1fdfec8f..6f35e1c79 100644 --- a/src/hooks/useGestureHandler.ts +++ b/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) => { + '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) => { + '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) => { + 'worklet'; if (gestureSource.value !== source) { return; } diff --git a/src/hooks/useKeyboard.ts b/src/hooks/useKeyboard.ts index 7447c218a..3d8dd30f3 100644 --- a/src/hooks/useKeyboard.ts +++ b/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,7 +41,7 @@ export const useKeyboard = () => { //#endregion //#region worklets - const handleKeyboardEvent = useWorkletCallback( + const handleKeyboardEvent = useCallback( ( state: KEYBOARD_STATE, height: number, @@ -50,6 +49,7 @@ export const useKeyboard = () => { easing: KeyboardEventEasing, bottomOffset?: number ) => { + 'worklet'; if (state === KEYBOARD_STATE.SHOWN && !shouldHandleKeyboardEvents.value) { /** * if the keyboard event was fired before the `onFocus` on TextInput, diff --git a/src/hooks/useScrollEventsHandlersDefault.ts b/src/hooks/useScrollEventsHandlersDefault.ts index c4c20abb5..46315da21 100644 --- a/src/hooks/useScrollEventsHandlersDefault.ts +++ b/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 = - 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 = - 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 = - 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 = - useWorkletCallback( + useCallback( ({ contentOffset: { y } }, context) => { + 'worklet'; if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) { const lockPosition = context.shouldLockInitialPosition ? (context.initialContentOffsetY ?? 0)