diff --git a/packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx b/packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx index 343f24bdbc..69360e40b0 100644 --- a/packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx +++ b/packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import HostGestureDetector from './HostGestureDetector'; import { configureRelations, ensureNativeDetectorComponent } from './utils'; import { isComposedGesture } from '../hooks/utils/relationUtils'; @@ -22,6 +22,10 @@ export function NativeDetector({ ensureNativeDetectorComponent(NativeDetectorComponent); configureRelations(gesture); + const handlerTags = useMemo(() => { + return isComposedGesture(gesture) ? gesture.tags : [gesture.tag]; + }, [gesture]); + return ( ({ gesture.detectorCallbacks.onGestureHandlerAnimatedEvent } moduleId={globalThis._RNGH_MODULE_ID} - handlerTags={isComposedGesture(gesture) ? gesture.tags : [gesture.tag]} + handlerTags={handlerTags} style={nativeDetectorStyles.detector}> {children} diff --git a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureStateChangeEvent.ts b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureStateChangeEvent.ts index 16a8ba4b4b..ca999bdce4 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureStateChangeEvent.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureStateChangeEvent.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { BaseGestureConfig } from '../../../types'; -import { extractStateChangeHandlers } from '../../utils'; +import { prepareStateChangeHandlers } from '../../utils'; import { getStateChangeHandler } from '../stateChangeHandler'; export function useGestureStateChangeEvent( @@ -8,7 +8,18 @@ export function useGestureStateChangeEvent( config: BaseGestureConfig ) { return useMemo(() => { - const handlers = extractStateChangeHandlers(config); + const handlers = prepareStateChangeHandlers({ + onBegin: config.onBegin, + onStart: config.onStart, + onEnd: config.onEnd, + onFinalize: config.onFinalize, + }); return getStateChangeHandler(handlerTag, handlers); - }, [handlerTag, config]); + }, [ + handlerTag, + config.onBegin, + config.onStart, + config.onEnd, + config.onFinalize, + ]); } diff --git a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureTouchEvent.ts b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureTouchEvent.ts index 92ef9b06f6..aee137df1d 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureTouchEvent.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureTouchEvent.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { BaseGestureConfig } from '../../../types'; -import { extractTouchHandlers } from '../../utils'; +import { prepareTouchHandlers } from '../../utils'; import { getTouchEventHandler } from '../touchEventHandler'; export function useGestureTouchEvent( @@ -8,7 +8,18 @@ export function useGestureTouchEvent( config: BaseGestureConfig ) { return useMemo(() => { - const handlers = extractTouchHandlers(config); + const handlers = prepareTouchHandlers({ + onTouchesDown: config.onTouchesDown, + onTouchesMove: config.onTouchesMove, + onTouchesUp: config.onTouchesUp, + onTouchesCancel: config.onTouchesCancel, + }); return getTouchEventHandler(handlerTag, handlers); - }, [handlerTag, config]); + }, [ + handlerTag, + config.onTouchesDown, + config.onTouchesMove, + config.onTouchesUp, + config.onTouchesCancel, + ]); } diff --git a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureUpdateEvent.ts b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureUpdateEvent.ts index 5219c1cc3f..c40dcf9402 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureUpdateEvent.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureUpdateEvent.ts @@ -1,4 +1,4 @@ -import { extractUpdateHandlers, isAnimatedEvent } from '../../utils'; +import { prepareUpdateHandlers, isAnimatedEvent } from '../../utils'; import { ReanimatedContext } from '../../../../handlers/gestures/reanimatedWrapper'; import { getUpdateHandler } from '../updateHandler'; import { BaseGestureConfig } from '../../../types'; @@ -9,7 +9,12 @@ export function useGestureUpdateEvent( config: BaseGestureConfig ) { return useMemo(() => { - const { handlers, changeEventCalculator } = extractUpdateHandlers(config); + const { handlers, changeEventCalculator } = prepareUpdateHandlers( + { + onUpdate: config.onUpdate, + }, + config.changeEventCalculator + ); const jsContext: ReanimatedContext = { lastUpdateEvent: undefined, @@ -23,5 +28,5 @@ export function useGestureUpdateEvent( jsContext, changeEventCalculator ); - }, [handlerTag, config]); + }, [handlerTag, config.onUpdate, config.changeEventCalculator]); } diff --git a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedStateChangeEvent.ts b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedStateChangeEvent.ts index c5315db996..acda984007 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedStateChangeEvent.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedStateChangeEvent.ts @@ -1,13 +1,18 @@ import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper'; import { BaseGestureConfig } from '../../../types'; -import { extractStateChangeHandlers } from '../../utils'; +import { prepareStateChangeHandlers } from '../../utils'; import { getStateChangeHandler } from '../stateChangeHandler'; export function useReanimatedStateChangeEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = extractStateChangeHandlers(config); + const handlers = prepareStateChangeHandlers({ + onBegin: config.onBegin, + onStart: config.onStart, + onEnd: config.onEnd, + onFinalize: config.onFinalize, + }); const callback = getStateChangeHandler(handlerTag, handlers); diff --git a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedTouchEvent.ts b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedTouchEvent.ts index d388bbfcf3..7eaddb54ed 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedTouchEvent.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedTouchEvent.ts @@ -1,13 +1,18 @@ import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper'; import { BaseGestureConfig } from '../../../types'; -import { extractTouchHandlers } from '../../utils'; +import { prepareTouchHandlers } from '../../utils'; import { getTouchEventHandler } from '../touchEventHandler'; export function useReanimatedTouchEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = extractTouchHandlers(config); + const handlers = prepareTouchHandlers({ + onTouchesDown: config.onTouchesDown, + onTouchesMove: config.onTouchesMove, + onTouchesUp: config.onTouchesUp, + onTouchesCancel: config.onTouchesCancel, + }); const callback = getTouchEventHandler(handlerTag, handlers); diff --git a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedUpdateEvent.ts b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedUpdateEvent.ts index 7e1fe6b0b7..6a0546d30b 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedUpdateEvent.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedUpdateEvent.ts @@ -1,13 +1,18 @@ import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper'; import { BaseGestureConfig } from '../../../types'; -import { extractUpdateHandlers } from '../../utils'; +import { prepareUpdateHandlers } from '../../utils'; import { getUpdateHandler } from '../updateHandler'; export function useReanimatedUpdateEvent( handlerTag: number, config: BaseGestureConfig ) { - const { handlers, changeEventCalculator } = extractUpdateHandlers(config); + const { handlers, changeEventCalculator } = prepareUpdateHandlers( + { + onUpdate: config.onUpdate, + }, + config.changeEventCalculator + ); // We don't want to call hooks conditionally, therefore `useHandler` and `useEvent` will be always called. // The only difference is whether we will send events to Reanimated or not. diff --git a/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts b/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts index 50ae603d3a..1b9bbf9eff 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts @@ -70,8 +70,16 @@ export function useGesture( } const gestureRelations = useMemo( - () => prepareRelations(config, tag), - [config, tag] + () => + prepareRelations( + { + simultaneousWith: config.simultaneousWith, + requireToFail: config.requireToFail, + block: config.block, + }, + tag + ), + [tag, config.simultaneousWith, config.requireToFail, config.block] ); const currentGestureRef = useRef({ type: '', tag: -1 }); diff --git a/packages/react-native-gesture-handler/src/v3/hooks/utils/eventHandlersUtils.ts b/packages/react-native-gesture-handler/src/v3/hooks/utils/eventHandlersUtils.ts index dd82140fbe..464485c313 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/utils/eventHandlersUtils.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/utils/eventHandlersUtils.ts @@ -1,17 +1,16 @@ import { TouchEventType } from '../../../TouchEventType'; import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture'; import { - BaseGestureConfig, ChangeCalculatorType, UnpackedGestureHandlerEvent, GestureCallbacks, } from '../../types'; -export function extractStateChangeHandlers( - config: BaseGestureConfig +export function prepareStateChangeHandlers( + callbacks: GestureCallbacks ): GestureCallbacks { 'worklet'; - const { onBegin, onStart, onEnd, onFinalize } = config; + const { onBegin, onStart, onEnd, onFinalize } = callbacks; const handlers: GestureCallbacks = { ...(onBegin ? { onBegin } : {}), @@ -28,11 +27,12 @@ type UpdateHandlersReturnType = { changeEventCalculator?: ChangeCalculatorType; }; -export function extractUpdateHandlers( - config: BaseGestureConfig +export function prepareUpdateHandlers( + callbacks: GestureCallbacks, + changeEventCalculator?: ChangeCalculatorType ): UpdateHandlersReturnType { 'worklet'; - const { onUpdate, changeEventCalculator } = config; + const { onUpdate } = callbacks; const handlers: GestureCallbacks = { ...(onUpdate ? { onUpdate } : {}), @@ -41,10 +41,11 @@ export function extractUpdateHandlers( return { handlers, changeEventCalculator }; } -export function extractTouchHandlers( - config: BaseGestureConfig +export function prepareTouchHandlers( + callbacks: GestureCallbacks ): GestureCallbacks { - const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancel } = config; + const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancel } = + callbacks; const handlers: GestureCallbacks = { ...(onTouchesDown ? { onTouchesDown } : {}), diff --git a/packages/react-native-gesture-handler/src/v3/hooks/utils/relationUtils.ts b/packages/react-native-gesture-handler/src/v3/hooks/utils/relationUtils.ts index b1c06715a8..e815c37299 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/utils/relationUtils.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/utils/relationUtils.ts @@ -1,6 +1,6 @@ import { - BaseGestureConfig, ComposedGesture, + ExternalRelations, Gesture, GestureRelations, } from '../../types'; @@ -58,16 +58,16 @@ function makeSimultaneousWithSymmetric( } } -export function prepareRelations( - config: BaseGestureConfig, +export function prepareRelations( + relations: ExternalRelations, handlerTag: number ): GestureRelations { - makeSimultaneousWithSymmetric(config.simultaneousWith, handlerTag); + makeSimultaneousWithSymmetric(relations.simultaneousWith, handlerTag); return { - simultaneousHandlers: extractHandlerTags(config.simultaneousWith), - waitFor: extractHandlerTags(config.requireToFail), - blocksHandlers: extractHandlerTags(config.block), + simultaneousHandlers: extractHandlerTags(relations.simultaneousWith), + waitFor: extractHandlerTags(relations.requireToFail), + blocksHandlers: extractHandlerTags(relations.block), }; } diff --git a/packages/react-native-gesture-handler/src/v3/types/GestureTypes.ts b/packages/react-native-gesture-handler/src/v3/types/GestureTypes.ts index 60f5865900..776ad7d694 100644 --- a/packages/react-native-gesture-handler/src/v3/types/GestureTypes.ts +++ b/packages/react-native-gesture-handler/src/v3/types/GestureTypes.ts @@ -9,7 +9,7 @@ import { import { FilterNeverProperties } from './UtilityTypes'; // Unfortunately, this type cannot be moved into ConfigTypes.ts because of circular dependency -type ExternalRelations = { +export type ExternalRelations = { simultaneousWith?: Gesture | Gesture[]; requireToFail?: Gesture | Gesture[]; block?: Gesture | Gesture[];