Skip to content

Commit 2312ffb

Browse files
akwasniewskiakwasniewski
authored
Merge branch 'next' into @akwasniewski/v3-pressable
2 parents 8eabd72 + 8e70b11 commit 2312ffb

7 files changed

Lines changed: 110 additions & 163 deletions

File tree

‎packages/react-native-gesture-handler/src/jestUtils/jestUtils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -445,12 +445,12 @@ function getHandlerData(
445445
};
446446

447447
if (eventName === 'onGestureHandlerStateChange') {
448-
componentOrGesture.detectorCallbacks.onGestureHandlerStateChange({
448+
componentOrGesture.detectorCallbacks.jsEventHandler?.({
449449
oldState: oldState as State,
450450
...event,
451451
});
452452
} else if (eventName === 'onGestureHandlerEvent') {
453-
componentOrGesture.detectorCallbacks.onGestureHandlerEvent?.(event);
453+
componentOrGesture.detectorCallbacks.jsEventHandler?.(event);
454454
}
455455
},
456456
};

‎packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
nativeDetectorStyles,
99
} from './common';
1010
import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
11+
import { Platform } from 'react-native';
1112

1213
export function NativeDetector<THandlerData, TConfig>({
1314
gesture,
@@ -31,37 +32,54 @@ export function NativeDetector<THandlerData, TConfig>({
3132
: [gesture.handlerTag];
3233
}, [gesture]);
3334

35+
// On web, we're triggering Reanimated callbacks ourselves, based on the type.
36+
// To handle this properly, we need to provide all three callbacks, so we set
37+
// all three to the Reanimated event handler.
38+
// On native, Reanimated handles routing internally based on the event names
39+
// passed to the useEvent hook. We only need to pass it once, so that Reanimated
40+
// can setup its internal listeners.
41+
const reanimatedHandlers =
42+
Platform.OS === 'web'
43+
? {
44+
onGestureHandlerReanimatedEvent:
45+
gesture.detectorCallbacks.reanimatedEventHandler,
46+
onGestureHandlerReanimatedStateChange:
47+
gesture.detectorCallbacks.reanimatedEventHandler,
48+
onGestureHandlerReanimatedTouchEvent:
49+
gesture.detectorCallbacks.reanimatedEventHandler,
50+
}
51+
: {
52+
onGestureHandlerReanimatedEvent:
53+
gesture.detectorCallbacks.reanimatedEventHandler,
54+
};
55+
3456
return (
3557
<NativeDetectorComponent
3658
touchAction={touchAction}
3759
userSelect={userSelect}
3860
enableContextMenu={enableContextMenu}
3961
pointerEvents={'box-none'}
4062
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
41-
onGestureHandlerStateChange={
42-
gesture.detectorCallbacks.onGestureHandlerStateChange
43-
}
63+
onGestureHandlerStateChange={gesture.detectorCallbacks.jsEventHandler}
4464
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
45-
onGestureHandlerEvent={gesture.detectorCallbacks.onGestureHandlerEvent}
65+
onGestureHandlerEvent={gesture.detectorCallbacks.jsEventHandler}
4666
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
47-
onGestureHandlerTouchEvent={
48-
gesture.detectorCallbacks.onGestureHandlerTouchEvent
49-
}
67+
onGestureHandlerTouchEvent={gesture.detectorCallbacks.jsEventHandler}
5068
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
5169
onGestureHandlerReanimatedStateChange={
52-
gesture.detectorCallbacks.onReanimatedStateChange
70+
reanimatedHandlers.onGestureHandlerReanimatedStateChange
5371
}
5472
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
5573
onGestureHandlerReanimatedEvent={
56-
gesture.detectorCallbacks.onReanimatedUpdateEvent
74+
reanimatedHandlers.onGestureHandlerReanimatedEvent
5775
}
5876
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
5977
onGestureHandlerReanimatedTouchEvent={
60-
gesture.detectorCallbacks.onReanimatedTouchEvent
78+
reanimatedHandlers.onGestureHandlerReanimatedTouchEvent
6179
}
6280
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
6381
onGestureHandlerAnimatedEvent={
64-
gesture.detectorCallbacks.onGestureHandlerAnimatedEvent
82+
gesture.detectorCallbacks.animatedEventHandler
6583
}
6684
moduleId={globalThis._RNGH_MODULE_ID}
6785
handlerTags={handlerTags}

‎packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
import { tagMessage } from '../../../utils';
2222
import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
2323
import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
24+
import { Platform } from 'react-native';
2425

2526
interface VirtualChildrenForNative {
2627
viewTag: number;
@@ -176,29 +177,12 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
176177
[virtualChildren, gesture?.detectorCallbacks]
177178
);
178179

179-
const reanimatedUpdateEvents = useMemo(
180-
() => getHandlers('onReanimatedUpdateEvent'),
180+
const reanimatedEvents = useMemo(
181+
() => getHandlers('reanimatedEventHandler'),
181182
[getHandlers]
182183
);
183-
const reanimatedEventHandler = Reanimated?.useComposedEventHandler(
184-
reanimatedUpdateEvents
185-
);
186-
187-
const reanimatedStateChangeEvents = useMemo(
188-
() => getHandlers('onReanimatedStateChange'),
189-
[getHandlers]
190-
);
191-
const reanimatedStateChangeHandler = Reanimated?.useComposedEventHandler(
192-
reanimatedStateChangeEvents
193-
);
194-
195-
const reanimatedTouchEvents = useMemo(
196-
() => getHandlers('onReanimatedTouchEvent'),
197-
[getHandlers]
198-
);
199-
const reanimatedTouchEventHandler = Reanimated?.useComposedEventHandler(
200-
reanimatedTouchEvents
201-
);
184+
const reanimatedEventHandler =
185+
Reanimated?.useComposedEventHandler(reanimatedEvents);
202186

203187
ensureNativeDetectorComponent(NativeDetectorComponent);
204188

@@ -215,40 +199,59 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
215199
return [];
216200
}, [gesture]);
217201

202+
// On web, we're triggering Reanimated callbacks ourselves, based on the type.
203+
// To handle this properly, we need to provide all three callbacks, so we set
204+
// all three to the Reanimated event handler.
205+
// On native, Reanimated handles routing internally based on the event names
206+
// passed to the useEvent hook. We only need to pass it once, so that Reanimated
207+
// can setup its internal listeners.
208+
const reanimatedHandlers =
209+
Platform.OS === 'web'
210+
? {
211+
onGestureHandlerReanimatedEvent: reanimatedEventHandler,
212+
onGestureHandlerReanimatedStateChange: reanimatedEventHandler,
213+
onGestureHandlerReanimatedTouchEvent: reanimatedEventHandler,
214+
}
215+
: {
216+
onGestureHandlerReanimatedEvent: reanimatedEventHandler,
217+
};
218+
219+
const jsEventHandler = useMemo(
220+
() => createGestureEventHandler('jsEventHandler'),
221+
[createGestureEventHandler]
222+
);
223+
218224
return (
219225
<InterceptingDetectorContext value={contextValue}>
220226
<NativeDetectorComponent
221227
pointerEvents={'box-none'}
222228
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
223-
onGestureHandlerStateChange={useMemo(
224-
() => createGestureEventHandler('onGestureHandlerStateChange'),
225-
[createGestureEventHandler]
226-
)}
229+
onGestureHandlerStateChange={jsEventHandler}
230+
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
231+
onGestureHandlerEvent={jsEventHandler}
227232
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
228-
onGestureHandlerEvent={useMemo(
229-
() => createGestureEventHandler('onGestureHandlerEvent'),
230-
[createGestureEventHandler]
231-
)}
233+
onGestureHandlerTouchEvent={jsEventHandler}
232234
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
233235
onGestureHandlerAnimatedEvent={
234-
gesture?.detectorCallbacks.onGestureHandlerAnimatedEvent
236+
gesture?.detectorCallbacks.animatedEventHandler
235237
}
236238
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
237-
onGestureHandlerTouchEvent={useMemo(
238-
() => createGestureEventHandler('onGestureHandlerTouchEvent'),
239-
[createGestureEventHandler]
240-
)}
241-
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
242239
onGestureHandlerReanimatedStateChange={
243-
shouldUseReanimatedDetector ? reanimatedStateChangeHandler : undefined
240+
shouldUseReanimatedDetector
241+
? reanimatedHandlers.onGestureHandlerReanimatedStateChange
242+
: undefined
244243
}
245244
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
246245
onGestureHandlerReanimatedEvent={
247-
shouldUseReanimatedDetector ? reanimatedEventHandler : undefined
246+
shouldUseReanimatedDetector
247+
? reanimatedHandlers.onGestureHandlerReanimatedEvent
248+
: undefined
248249
}
249250
// @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
250251
onGestureHandlerReanimatedTouchEvent={
251-
shouldUseReanimatedDetector ? reanimatedTouchEventHandler : undefined
252+
shouldUseReanimatedDetector
253+
? reanimatedHandlers.onGestureHandlerReanimatedTouchEvent
254+
: undefined
252255
}
253256
handlerTags={handlerTags}
254257
style={nativeDetectorStyles.detector}

‎packages/react-native-gesture-handler/src/v3/hooks/composition/useComposedGesture.ts‎

Lines changed: 14 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import {
2-
StateChangeEventWithHandlerData,
3-
UpdateEventWithHandlerData,
4-
TouchEvent,
52
ComposedGesture,
63
ComposedGestureName,
74
AnyGesture,
85
ComposedGestureConfig,
6+
GestureHandlerEventWithHandlerData,
97
} from '../../types';
108
import { tagMessage } from '../../../utils';
119
import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
@@ -45,63 +43,31 @@ export function useComposedGesture(
4543
);
4644
}
4745

48-
const onGestureHandlerStateChange = (
49-
event: StateChangeEventWithHandlerData<unknown>
46+
const jsEventHandler = (
47+
event: GestureHandlerEventWithHandlerData<unknown>
5048
) => {
5149
for (const gesture of gestures) {
52-
if (gesture.detectorCallbacks.onGestureHandlerStateChange) {
53-
gesture.detectorCallbacks.onGestureHandlerStateChange(event);
50+
if (gesture.detectorCallbacks.jsEventHandler) {
51+
gesture.detectorCallbacks.jsEventHandler(event);
5452
}
5553
}
5654
};
5755

58-
const onGestureHandlerEvent = (
59-
event: UpdateEventWithHandlerData<unknown>
60-
) => {
61-
for (const gesture of gestures) {
62-
if (gesture.detectorCallbacks.onGestureHandlerEvent) {
63-
gesture.detectorCallbacks.onGestureHandlerEvent(event);
64-
}
65-
}
66-
};
67-
68-
const onGestureHandlerTouchEvent = (event: TouchEvent) => {
69-
for (const gesture of gestures) {
70-
if (gesture.detectorCallbacks.onGestureHandlerTouchEvent) {
71-
gesture.detectorCallbacks.onGestureHandlerTouchEvent(event);
72-
}
73-
}
74-
};
75-
76-
const onReanimatedStateChange = Reanimated?.useComposedEventHandler(
77-
gestures.map(
78-
(gesture) => gesture.detectorCallbacks.onReanimatedStateChange || null
79-
)
80-
);
81-
82-
const onReanimatedUpdateEvent = Reanimated?.useComposedEventHandler(
83-
gestures.map(
84-
(gesture) => gesture.detectorCallbacks.onReanimatedUpdateEvent || null
85-
)
86-
);
87-
88-
const onReanimatedTouchEvent = Reanimated?.useComposedEventHandler(
56+
const reanimatedEventHandler = Reanimated?.useComposedEventHandler(
8957
gestures.map(
90-
(gesture) => gesture.detectorCallbacks.onReanimatedTouchEvent || null
58+
(gesture) => gesture.detectorCallbacks.reanimatedEventHandler || null
9159
)
9260
);
9361

94-
let onGestureHandlerAnimatedEvent;
62+
let animatedEventHandler;
9563

9664
const gesturesWithAnimatedEvent = gestures.filter(
97-
(gesture) =>
98-
gesture.detectorCallbacks.onGestureHandlerAnimatedEvent !== undefined
65+
(gesture) => gesture.detectorCallbacks.animatedEventHandler !== undefined
9966
);
10067

10168
if (gesturesWithAnimatedEvent.length > 0) {
102-
onGestureHandlerAnimatedEvent =
103-
gesturesWithAnimatedEvent[0].detectorCallbacks
104-
.onGestureHandlerAnimatedEvent;
69+
animatedEventHandler =
70+
gesturesWithAnimatedEvent[0].detectorCallbacks.animatedEventHandler;
10571

10672
if (__DEV__ && gesturesWithAnimatedEvent.length > 1) {
10773
console.warn(
@@ -117,13 +83,9 @@ export function useComposedGesture(
11783
type,
11884
config,
11985
detectorCallbacks: {
120-
onGestureHandlerStateChange,
121-
onGestureHandlerEvent,
122-
onGestureHandlerTouchEvent,
123-
onReanimatedStateChange,
124-
onReanimatedUpdateEvent,
125-
onReanimatedTouchEvent,
126-
onGestureHandlerAnimatedEvent,
86+
jsEventHandler,
87+
reanimatedEventHandler,
88+
animatedEventHandler,
12789
},
12890
externalSimultaneousHandlers: [],
12991
gestures,

‎packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
registerGesture,
1616
unregisterGesture,
1717
} from '../../handlers/handlersRegistry';
18-
import { Platform } from 'react-native';
1918
import { NativeProxy } from '../NativeProxy';
2019

2120
export function useGesture<THandlerData, TConfig>(
@@ -37,13 +36,10 @@ export function useGesture<THandlerData, TConfig>(
3736
prepareConfig(config);
3837

3938
// TODO: Call only necessary hooks depending on which callbacks are defined (?)
40-
const {
41-
onGestureHandlerEvent,
42-
onReanimatedEvent,
43-
onGestureHandlerAnimatedEvent,
44-
} = useGestureCallbacks(handlerTag, config);
39+
const { jsEventHandler, reanimatedEventHandler, animatedEventHandler } =
40+
useGestureCallbacks(handlerTag, config);
4541

46-
if (config.shouldUseReanimatedDetector && !onReanimatedEvent) {
42+
if (config.shouldUseReanimatedDetector && !reanimatedEventHandler) {
4743
throw new Error(tagMessage('Failed to create reanimated event handlers.'));
4844
}
4945

@@ -75,37 +71,19 @@ export function useGesture<THandlerData, TConfig>(
7571
type,
7672
config,
7773
detectorCallbacks: {
78-
onGestureHandlerStateChange: onGestureHandlerEvent,
79-
onGestureHandlerEvent: onGestureHandlerEvent,
80-
onGestureHandlerTouchEvent: onGestureHandlerEvent,
81-
onGestureHandlerAnimatedEvent,
82-
// On web, we're triggering Reanimated callbacks ourselves, based on the type.
83-
// To handle this properly, we need to provide all three callbacks, so we set
84-
// all three to the Reanimated event handler.
85-
// On native, Reanimated handles routing internally based on the event names
86-
// passed to the useEvent hook. We only need to pass it once, so that Reanimated
87-
// can setup its internal listeners.
88-
...(Platform.OS === 'web'
89-
? {
90-
onReanimatedUpdateEvent: onReanimatedEvent,
91-
onReanimatedStateChange: onReanimatedEvent,
92-
onReanimatedTouchEvent: onReanimatedEvent,
93-
}
94-
: {
95-
onReanimatedUpdateEvent: onReanimatedEvent,
96-
onReanimatedStateChange: undefined,
97-
onReanimatedTouchEvent: undefined,
98-
}),
74+
jsEventHandler,
75+
animatedEventHandler,
76+
reanimatedEventHandler,
9977
},
10078
gestureRelations,
10179
}),
10280
[
10381
handlerTag,
10482
type,
10583
config,
106-
onGestureHandlerEvent,
107-
onReanimatedEvent,
108-
onGestureHandlerAnimatedEvent,
84+
jsEventHandler,
85+
reanimatedEventHandler,
86+
animatedEventHandler,
10987
gestureRelations,
11088
]
11189
);

0 commit comments

Comments
 (0)