Skip to content

Commit 319fe86

Browse files
authored
Lazy addition of callbacks to useHandler (#3674)
## Description Currently we call `useHandler` with all callbacks, for example: ```js const handlers: CallbackHandlers = { onBegin: config.onBegin, onStart: config.onStart, onEnd: config.onEnd, onFinalize: config.onFinalize, }; ``` this means that if user does not pass them into config, those values will be `undefined`. This works on `android` and `iOS`, but it seems to break on `web` as Reanimated throws error that `useHandler` received non-worklet callback. To avoid potential issues, we only assign callbacks that were passed by user. >[!WARNING] > This solves only one issue - passing `undefined` callbacks. However, passing callback that is not marked as `worklet` will result in the same error. This problem will be handled by autoworkletization. ## Test plan Tested with `console.logs` in event hooks.
1 parent 8e24174 commit 319fe86

File tree

3 files changed

+16
-11
lines changed

3 files changed

+16
-11
lines changed

packages/react-native-gesture-handler/src/v3/hooks/events/useGestureHandlerEvent.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { CallbackHandlers, UpdateEvent } from '../../types';
1212
import { tagMessage } from '../../../utils';
1313

1414
export function useGestureHandlerEvent(handlerTag: number, config: any) {
15-
const handlers: CallbackHandlers = {
16-
onUpdate: config.onUpdate,
17-
};
15+
const { onUpdate } = config;
16+
17+
const handlers: CallbackHandlers = { ...(onUpdate && { onUpdate }) };
1818

1919
const onGestureHandlerEvent = (
2020
event: UpdateEvent<Record<string, unknown>>,

packages/react-native-gesture-handler/src/v3/hooks/events/useGestureStateChangeEvent.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
99
import { CallbackHandlers, StateChangeEvent } from '../../types';
1010

1111
export function useGestureStateChangeEvent(handlerTag: number, config: any) {
12+
const { onBegin, onStart, onEnd, onFinalize } = config;
13+
1214
const handlers: CallbackHandlers = {
13-
onBegin: config.onBegin,
14-
onStart: config.onStart,
15-
onEnd: config.onEnd,
16-
onFinalize: config.onFinalize,
15+
...(onBegin && { onBegin }),
16+
...(onStart && { onStart }),
17+
...(onEnd && { onEnd }),
18+
...(onFinalize && { onFinalize }),
1719
};
1820

1921
const onGestureHandlerStateChange = (

packages/react-native-gesture-handler/src/v3/hooks/events/useTouchEvent.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@ import { CallbackHandlers, TouchEvent } from '../../types';
1111
import { NativeSyntheticEvent } from 'react-native';
1212

1313
export function useTouchEvent(handlerTag: number, config: any) {
14+
const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancelled } =
15+
config;
16+
1417
const handlers: CallbackHandlers = {
15-
onTouchesDown: config.onTouchesDown,
16-
onTouchesMove: config.onTouchesMove,
17-
onTouchesUp: config.onTouchesUp,
18-
onTouchesCancelled: config.onTouchesCancelled,
18+
...(onTouchesDown && { onTouchesDown }),
19+
...(onTouchesMove && { onTouchesMove }),
20+
...(onTouchesUp && { onTouchesUp }),
21+
...(onTouchesCancelled && { onTouchesCancelled }),
1922
};
2023

2124
const onGestureHandlerTouchEvent = (event: TouchEvent) => {

0 commit comments

Comments
 (0)