Skip to content

Commit 5c8096c

Browse files
tomekzawtomekzaw
authored
chore: migrate from useWorkletCallback (#2356)(by @tomekzaw)
1 parent fc3409d commit 5c8096c

File tree

6 files changed

+55
-32
lines changed

6 files changed

+55
-32
lines changed

‎src/components/bottomSheet/BottomSheet.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import Animated, {
1818
Extrapolation,
1919
runOnUI,
2020
cancelAnimation,
21-
useWorkletCallback,
2221
type WithSpringConfig,
2322
type WithTimingConfig,
2423
type SharedValue,
@@ -569,13 +568,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
569568
//#endregion
570569

571570
//#region animation
572-
const stopAnimation = useWorkletCallback(() => {
571+
const stopAnimation = useCallback(() => {
572+
'worklet';
573573
cancelAnimation(animatedPosition);
574574
animatedAnimationSource.value = ANIMATION_SOURCE.NONE;
575575
animatedAnimationState.value = ANIMATION_STATE.STOPPED;
576576
}, [animatedPosition, animatedAnimationState, animatedAnimationSource]);
577-
const animateToPositionCompleted = useWorkletCallback(
577+
const animateToPositionCompleted = useCallback(
578578
function animateToPositionCompleted(isFinished?: boolean) {
579+
'worklet';
579580
if (!isFinished) {
580581
return;
581582
}
@@ -603,15 +604,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
603604
animatedNextPosition.value = INITIAL_VALUE;
604605
animatedNextPositionIndex.value = INITIAL_VALUE;
605606
animatedContainerHeightDidChange.value = false;
606-
}
607+
},
608+
[]
607609
);
608-
const animateToPosition: AnimateToPositionType = useWorkletCallback(
610+
const animateToPosition: AnimateToPositionType = useCallback(
609611
function animateToPosition(
610612
position: number,
611613
source: ANIMATION_SOURCE,
612614
velocity = 0,
613615
configs?: WithTimingConfig | WithSpringConfig
614616
) {
617+
'worklet';
615618
if (__DEV__) {
616619
runOnJS(print)({
617620
component: 'BottomSheet',
@@ -694,9 +697,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
694697
*
695698
* @param targetPosition position to be set.
696699
*/
697-
const setToPosition = useWorkletCallback(function setToPosition(
700+
const setToPosition = useCallback(function setToPosition(
698701
targetPosition: number
699702
) {
703+
'worklet';
700704
if (
701705
targetPosition === animatedPosition.value ||
702706
targetPosition === undefined ||
@@ -737,7 +741,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
737741
* Calculate and evaluate the current position based on multiple
738742
* local states.
739743
*/
740-
const getEvaluatedPosition = useWorkletCallback(
744+
const getEvaluatedPosition = useCallback(
741745
function getEvaluatedPosition(source: ANIMATION_SOURCE) {
742746
'worklet';
743747
const currentIndex = animatedCurrentIndex.value;
@@ -847,11 +851,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
847851
/**
848852
* Evaluate the bottom sheet position based based on a event source and other local states.
849853
*/
850-
const evaluatePosition = useWorkletCallback(
854+
const evaluatePosition = useCallback(
851855
function evaluatePosition(
852856
source: ANIMATION_SOURCE,
853857
animationConfigs?: WithSpringConfig | WithTimingConfig
854858
) {
859+
'worklet';
855860
/**
856861
* if a force closing is running and source not from user, then we early exit
857862
*/
@@ -1026,11 +1031,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
10261031
animationConfigs
10271032
);
10281033
});
1029-
const handleSnapToPosition = useWorkletCallback(
1034+
const handleSnapToPosition = useCallback(
10301035
function handleSnapToPosition(
10311036
position: number | string,
10321037
animationConfigs?: WithSpringConfig | WithTimingConfig
10331038
) {
1039+
'worklet';
10341040
if (__DEV__) {
10351041
print({
10361042
component: BottomSheet.name,

‎src/hooks/useGestureEventsHandlersDefault.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import { useCallback } from 'react';
12
import { Keyboard, Platform } from 'react-native';
23
import {
34
runOnJS,
45
useSharedValue,
5-
useWorkletCallback,
66
} from 'react-native-reanimated';
77
import {
88
ANIMATION_SOURCE,
@@ -70,8 +70,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
7070
//#endregion
7171

7272
//#region gesture methods
73-
const handleOnStart: GestureEventHandlerCallbackType = useWorkletCallback(
73+
const handleOnStart: GestureEventHandlerCallbackType = useCallback(
7474
function handleOnStart(__, _) {
75+
'worklet';
7576
// cancel current animation
7677
stopAnimation();
7778

@@ -111,8 +112,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
111112
animatedScrollableContentOffsetY,
112113
]
113114
);
114-
const handleOnChange: GestureEventHandlerCallbackType = useWorkletCallback(
115+
const handleOnChange: GestureEventHandlerCallbackType = useCallback(
115116
function handleOnChange(source, { translationY }) {
117+
'worklet';
116118
let highestSnapPoint = animatedHighestSnapPoint.value;
117119

118120
/**
@@ -267,8 +269,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
267269
animatedScrollableContentOffsetY,
268270
]
269271
);
270-
const handleOnEnd: GestureEventHandlerCallbackType = useWorkletCallback(
272+
const handleOnEnd: GestureEventHandlerCallbackType = useCallback(
271273
function handleOnEnd(source, { translationY, absoluteY, velocityY }) {
274+
'worklet';
272275
const highestSnapPoint = animatedHighestSnapPoint.value;
273276
const isSheetAtHighestSnapPoint =
274277
animatedPosition.value === highestSnapPoint;
@@ -402,8 +405,9 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
402405
);
403406

404407
const handleOnFinalize: GestureEventHandlerCallbackType =
405-
useWorkletCallback(
408+
useCallback(
406409
function handleOnFinalize() {
410+
'worklet';
407411
resetContext(context);
408412
},
409413
[context]

‎src/hooks/useGestureEventsHandlersDefault.web.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import { useCallback } from 'react';
12
import { Keyboard, Platform } from 'react-native';
23
import {
34
runOnJS,
45
useSharedValue,
5-
useWorkletCallback,
66
} from 'react-native-reanimated';
77
import {
88
ANIMATION_SOURCE,
@@ -67,8 +67,9 @@ export const useGestureEventsHandlersDefault = () => {
6767
//#endregion
6868

6969
//#region gesture methods
70-
const handleOnStart: GestureEventHandlerCallbackType = useWorkletCallback(
70+
const handleOnStart: GestureEventHandlerCallbackType = useCallback(
7171
function handleOnStart(__, { translationY }) {
72+
'worklet';
7273
// cancel current animation
7374
stopAnimation();
7475

@@ -95,8 +96,9 @@ export const useGestureEventsHandlersDefault = () => {
9596
animatedScrollableContentOffsetY,
9697
]
9798
);
98-
const handleOnChange: GestureEventHandlerCallbackType = useWorkletCallback(
99+
const handleOnChange: GestureEventHandlerCallbackType = useCallback(
99100
function handleOnChange(source, { translationY }) {
101+
'worklet';
100102
let highestSnapPoint = animatedHighestSnapPoint.value;
101103

102104
translationY = translationY - context.value.initialTranslationY;
@@ -249,8 +251,9 @@ export const useGestureEventsHandlersDefault = () => {
249251
animatedScrollableContentOffsetY,
250252
]
251253
);
252-
const handleOnEnd: GestureEventHandlerCallbackType = useWorkletCallback(
254+
const handleOnEnd: GestureEventHandlerCallbackType = useCallback(
253255
function handleOnEnd(source, { translationY, absoluteY, velocityY }) {
256+
'worklet';
254257
const highestSnapPoint = animatedHighestSnapPoint.value;
255258
const isSheetAtHighestSnapPoint =
256259
animatedPosition.value === highestSnapPoint;
@@ -382,8 +385,9 @@ export const useGestureEventsHandlersDefault = () => {
382385
animateToPosition,
383386
]
384387
);
385-
const handleOnFinalize: GestureEventHandlerCallbackType = useWorkletCallback(
388+
const handleOnFinalize: GestureEventHandlerCallbackType = useCallback(
386389
function handleOnFinalize() {
390+
'worklet';
387391
resetContext(context);
388392
},
389393
[context]

‎src/hooks/useGestureHandler.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useCallback } from 'react';
12
import {
23
type GestureStateChangeEvent,
34
type GestureUpdateEvent,
@@ -6,7 +7,6 @@ import {
67
State,
78
} from 'react-native-gesture-handler';
89
import type { SharedValue } from 'react-native-reanimated';
9-
import { useWorkletCallback } from 'react-native-reanimated';
1010
import { GESTURE_SOURCE } from '../constants';
1111
import type {
1212
GestureEventHandlerCallbackType,
@@ -22,8 +22,9 @@ export const useGestureHandler: GestureHandlersHookType = (
2222
onEnd: GestureEventHandlerCallbackType,
2323
onFinalize: GestureEventHandlerCallbackType
2424
) => {
25-
const handleOnStart = useWorkletCallback(
25+
const handleOnStart = useCallback(
2626
(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
27+
'worklet';
2728
state.value = State.BEGAN;
2829
gestureSource.value = source;
2930

@@ -33,12 +34,13 @@ export const useGestureHandler: GestureHandlersHookType = (
3334
[state, gestureSource, source, onStart]
3435
);
3536

36-
const handleOnChange = useWorkletCallback(
37+
const handleOnChange = useCallback(
3738
(
3839
event: GestureUpdateEvent<
3940
PanGestureHandlerEventPayload & PanGestureChangeEventPayload
4041
>
4142
) => {
43+
'worklet';
4244
if (gestureSource.value !== source) {
4345
return;
4446
}
@@ -49,8 +51,9 @@ export const useGestureHandler: GestureHandlersHookType = (
4951
[state, gestureSource, source, onChange]
5052
);
5153

52-
const handleOnEnd = useWorkletCallback(
54+
const handleOnEnd = useCallback(
5355
(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
56+
'worklet';
5457
if (gestureSource.value !== source) {
5558
return;
5659
}
@@ -63,8 +66,9 @@ export const useGestureHandler: GestureHandlersHookType = (
6366
[state, gestureSource, source, onEnd]
6467
);
6568

66-
const handleOnFinalize = useWorkletCallback(
69+
const handleOnFinalize = useCallback(
6770
(event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
71+
'worklet';
6872
if (gestureSource.value !== source) {
6973
return;
7074
}

‎src/hooks/useKeyboard.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect } from 'react';
1+
import { useCallback, useEffect } from 'react';
22
import {
33
Keyboard,
44
type KeyboardEvent,
@@ -10,7 +10,6 @@ import {
1010
runOnUI,
1111
useAnimatedReaction,
1212
useSharedValue,
13-
useWorkletCallback,
1413
} from 'react-native-reanimated';
1514
import { KEYBOARD_STATE, SCREEN_HEIGHT } from '../constants';
1615

@@ -42,14 +41,15 @@ export const useKeyboard = () => {
4241
//#endregion
4342

4443
//#region worklets
45-
const handleKeyboardEvent = useWorkletCallback(
44+
const handleKeyboardEvent = useCallback(
4645
(
4746
state: KEYBOARD_STATE,
4847
height: number,
4948
duration: number,
5049
easing: KeyboardEventEasing,
5150
bottomOffset?: number
5251
) => {
52+
'worklet';
5353
if (state === KEYBOARD_STATE.SHOWN && !shouldHandleKeyboardEvents.value) {
5454
/**
5555
* if the keyboard event was fired before the `onFocus` on TextInput,

‎src/hooks/useScrollEventsHandlersDefault.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { useCallback } from 'react';
12
import { State } from 'react-native-gesture-handler';
2-
import { scrollTo, useWorkletCallback } from 'react-native-reanimated';
3+
import { scrollTo } from 'react-native-reanimated';
34
import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
45
import type {
56
ScrollEventHandlerCallbackType,
@@ -27,8 +28,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
2728

2829
//#region callbacks
2930
const handleOnScroll: ScrollEventHandlerCallbackType<ScrollEventContextType> =
30-
useWorkletCallback(
31+
useCallback(
3132
({ contentOffset: { y } }, context) => {
33+
'worklet';
3234
/**
3335
* if sheet position is extended or fill parent, then we reset
3436
* `shouldLockInitialPosition` value to false.
@@ -67,8 +69,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
6769
]
6870
);
6971
const handleOnBeginDrag: ScrollEventHandlerCallbackType<ScrollEventContextType> =
70-
useWorkletCallback(
72+
useCallback(
7173
({ contentOffset: { y } }, context) => {
74+
'worklet';
7275
scrollableContentOffsetY.value = y;
7376
rootScrollableContentOffsetY.value = y;
7477
context.initialContentOffsetY = y;
@@ -94,8 +97,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
9497
]
9598
);
9699
const handleOnEndDrag: ScrollEventHandlerCallbackType<ScrollEventContextType> =
97-
useWorkletCallback(
100+
useCallback(
98101
({ contentOffset: { y } }, context) => {
102+
'worklet';
99103
if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
100104
const lockPosition = context.shouldLockInitialPosition
101105
? (context.initialContentOffsetY ?? 0)
@@ -120,8 +124,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
120124
]
121125
);
122126
const handleOnMomentumEnd: ScrollEventHandlerCallbackType<ScrollEventContextType> =
123-
useWorkletCallback(
127+
useCallback(
124128
({ contentOffset: { y } }, context) => {
129+
'worklet';
125130
if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
126131
const lockPosition = context.shouldLockInitialPosition
127132
? (context.initialContentOffsetY ?? 0)

0 commit comments

Comments
 (0)