From 86423e118bb9d32d48028e350d473019678c2389 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Wed, 12 Nov 2025 13:52:06 +0100 Subject: [PATCH 1/6] Memoze event handlers --- .../js/useGestureStateChangeEvent.ts | 8 +-- .../callbacks/js/useGestureTouchEvent.ts | 8 +-- .../callbacks/js/useGestureUpdateEvent.ts | 22 ++++++--- .../src/v3/hooks/useGesture.ts | 49 ++++++++++++++----- 4 files changed, 61 insertions(+), 26 deletions(-) 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 d0832597f1..16a8ba4b4b 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,3 +1,4 @@ +import { useMemo } from 'react'; import { BaseGestureConfig } from '../../../types'; import { extractStateChangeHandlers } from '../../utils'; import { getStateChangeHandler } from '../stateChangeHandler'; @@ -6,7 +7,8 @@ export function useGestureStateChangeEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = extractStateChangeHandlers(config); - - return getStateChangeHandler(handlerTag, handlers); + return useMemo(() => { + const handlers = extractStateChangeHandlers(config); + return getStateChangeHandler(handlerTag, handlers); + }, [handlerTag, config]); } 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 f7eea78714..92ef9b06f6 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,3 +1,4 @@ +import { useMemo } from 'react'; import { BaseGestureConfig } from '../../../types'; import { extractTouchHandlers } from '../../utils'; import { getTouchEventHandler } from '../touchEventHandler'; @@ -6,7 +7,8 @@ export function useGestureTouchEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = extractTouchHandlers(config); - - return getTouchEventHandler(handlerTag, handlers); + return useMemo(() => { + const handlers = extractTouchHandlers(config); + return getTouchEventHandler(handlerTag, handlers); + }, [handlerTag, config]); } 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 6179273192..5219c1cc3f 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 @@ -2,18 +2,26 @@ import { extractUpdateHandlers, isAnimatedEvent } from '../../utils'; import { ReanimatedContext } from '../../../../handlers/gestures/reanimatedWrapper'; import { getUpdateHandler } from '../updateHandler'; import { BaseGestureConfig } from '../../../types'; +import { useMemo } from 'react'; export function useGestureUpdateEvent( handlerTag: number, config: BaseGestureConfig ) { - const { handlers, changeEventCalculator } = extractUpdateHandlers(config); + return useMemo(() => { + const { handlers, changeEventCalculator } = extractUpdateHandlers(config); - const jsContext: ReanimatedContext = { - lastUpdateEvent: undefined, - }; + const jsContext: ReanimatedContext = { + lastUpdateEvent: undefined, + }; - return isAnimatedEvent(config.onUpdate) - ? undefined - : getUpdateHandler(handlerTag, handlers, jsContext, changeEventCalculator); + return isAnimatedEvent(config.onUpdate) + ? undefined + : getUpdateHandler( + handlerTag, + handlers, + jsContext, + changeEventCalculator + ); + }, [handlerTag, config]); } 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 6a641d2b05..50ae603d3a 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react'; +import { useEffect, useMemo, useRef } from 'react'; import { getNextHandlerTag } from '../../handlers/getNextHandlerTag'; import RNGestureHandlerModule from '../../RNGestureHandlerModule'; import { useGestureCallbacks } from './useGestureCallbacks'; @@ -69,12 +69,20 @@ export function useGesture( throw new Error(tagMessage('Failed to create reanimated event handlers.')); } - const gestureRelations = prepareRelations(config, tag); + const gestureRelations = useMemo( + () => prepareRelations(config, tag), + [config, tag] + ); - useMemo(() => { + const currentGestureRef = useRef({ type: '', tag: -1 }); + if ( + currentGestureRef.current.tag !== tag || + currentGestureRef.current.type !== (type as string) + ) { + currentGestureRef.current = { type, tag }; RNGestureHandlerModule.createGestureHandler(type, tag, {}); RNGestureHandlerModule.flushOperations(); - }, [type, tag]); + } useEffect(() => { return () => { @@ -93,13 +101,28 @@ export function useGesture( return () => { unbindSharedValues(config, tag); }; - }, [tag, config]); + }, [tag, config, type]); - return { - tag, - type, - config, - detectorCallbacks: { + return useMemo( + () => ({ + tag, + type, + config, + detectorCallbacks: { + onGestureHandlerStateChange, + onGestureHandlerEvent, + onGestureHandlerTouchEvent, + onReanimatedStateChange, + onReanimatedUpdateEvent, + onReanimatedTouchEvent, + onGestureHandlerAnimatedEvent, + }, + gestureRelations, + }), + [ + tag, + type, + config, onGestureHandlerStateChange, onGestureHandlerEvent, onGestureHandlerTouchEvent, @@ -107,7 +130,7 @@ export function useGesture( onReanimatedUpdateEvent, onReanimatedTouchEvent, onGestureHandlerAnimatedEvent, - }, - gestureRelations, - }; + gestureRelations, + ] + ); } From 594092ad27fa40df6f670cac15c8aef411a9644b Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Thu, 13 Nov 2025 11:56:22 +0100 Subject: [PATCH 2/6] Keep config out of the event handlers dependency arrays --- .../js/useGestureStateChangeEvent.ts | 17 +++++++++++++--- .../callbacks/js/useGestureTouchEvent.ts | 17 +++++++++++++--- .../callbacks/js/useGestureUpdateEvent.ts | 11 +++++++--- .../useReanimatedStateChangeEvent.ts | 9 +++++++-- .../reanimated/useReanimatedTouchEvent.ts | 9 +++++++-- .../reanimated/useReanimatedUpdateEvent.ts | 9 +++++++-- .../src/v3/hooks/utils/eventHandlersUtils.ts | 20 +++++++++---------- 7 files changed, 67 insertions(+), 25 deletions(-) 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..d865b9c39c 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 { ensureStateChangeHandlers } 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 = ensureStateChangeHandlers({ + 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..a654d7cdbf 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 { ensureTouchHandlers } 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 = ensureTouchHandlers({ + onTouchesDown: config.onTouchesDown, + onTouchesMove: config.onTouchesMove, + onTouchesUp: config.onTouchesUp, + onTouchesCancelled: config.onTouchesCancelled, + }); return getTouchEventHandler(handlerTag, handlers); - }, [handlerTag, config]); + }, [ + handlerTag, + config.onTouchesDown, + config.onTouchesMove, + config.onTouchesUp, + config.onTouchesCancelled, + ]); } 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..2bd6acd58a 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 { ensureUpdateHandlers, 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 } = ensureUpdateHandlers( + { + 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..8e4a1fd509 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 { ensureStateChangeHandlers } from '../../utils'; import { getStateChangeHandler } from '../stateChangeHandler'; export function useReanimatedStateChangeEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = extractStateChangeHandlers(config); + const handlers = ensureStateChangeHandlers({ + 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..89ce521272 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 { ensureTouchHandlers } from '../../utils'; import { getTouchEventHandler } from '../touchEventHandler'; export function useReanimatedTouchEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = extractTouchHandlers(config); + const handlers = ensureTouchHandlers({ + onTouchesDown: config.onTouchesDown, + onTouchesMove: config.onTouchesMove, + onTouchesUp: config.onTouchesUp, + onTouchesCancelled: config.onTouchesCancelled, + }); 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..e88a6fc21f 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 { ensureUpdateHandlers } from '../../utils'; import { getUpdateHandler } from '../updateHandler'; export function useReanimatedUpdateEvent( handlerTag: number, config: BaseGestureConfig ) { - const { handlers, changeEventCalculator } = extractUpdateHandlers(config); + const { handlers, changeEventCalculator } = ensureUpdateHandlers( + { + 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/utils/eventHandlersUtils.ts b/packages/react-native-gesture-handler/src/v3/hooks/utils/eventHandlersUtils.ts index 459588f4a6..179cf00c5a 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 ensureStateChangeHandlers( + 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 ensureUpdateHandlers( + callbacks: GestureCallbacks, + changeEventCalculator?: ChangeCalculatorType ): UpdateHandlersReturnType { 'worklet'; - const { onUpdate, changeEventCalculator } = config; + const { onUpdate } = callbacks; const handlers: GestureCallbacks = { ...(onUpdate ? { onUpdate } : {}), @@ -41,11 +41,11 @@ export function extractUpdateHandlers( return { handlers, changeEventCalculator }; } -export function extractTouchHandlers( - config: BaseGestureConfig +export function ensureTouchHandlers( + callbacks: GestureCallbacks ): GestureCallbacks { const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancelled } = - config; + callbacks; const handlers: GestureCallbacks = { ...(onTouchesDown ? { onTouchesDown } : {}), From 8cdfd7d9a9aa61520596edf9bedc24eccd10d128 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Thu, 13 Nov 2025 12:03:40 +0100 Subject: [PATCH 3/6] Keep relations stable --- .../src/v3/hooks/useGesture.ts | 18 ++++++++++++++++-- .../src/v3/hooks/utils/relationUtils.ts | 14 +++++++------- .../src/v3/types/GestureTypes.ts | 2 +- 3 files changed, 24 insertions(+), 10 deletions(-) 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..422132c974 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,22 @@ export function useGesture( } const gestureRelations = useMemo( - () => prepareRelations(config, tag), - [config, tag] + () => + prepareRelations( + { + simultaneousWithExternalGesture: + config.simultaneousWithExternalGesture, + requireExternalGestureToFail: config.requireExternalGestureToFail, + blocksExternalGesture: config.blocksExternalGesture, + }, + tag + ), + [ + tag, + config.simultaneousWithExternalGesture, + config.requireExternalGestureToFail, + config.blocksExternalGesture, + ] ); const currentGestureRef = useRef({ type: '', tag: -1 }); 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 ebee21db71..af5cce9728 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,21 +58,21 @@ function makeSimultaneousWithExternalGestureSymmetric( } } -export function prepareRelations( - config: BaseGestureConfig, +export function prepareRelations( + relations: ExternalRelations, handlerTag: number ): GestureRelations { makeSimultaneousWithExternalGestureSymmetric( - config.simultaneousWithExternalGesture, + relations.simultaneousWithExternalGesture, handlerTag ); return { simultaneousHandlers: extractHandlerTags( - config.simultaneousWithExternalGesture + relations.simultaneousWithExternalGesture ), - waitFor: extractHandlerTags(config.requireExternalGestureToFail), - blocksHandlers: extractHandlerTags(config.blocksExternalGesture), + waitFor: extractHandlerTags(relations.requireExternalGestureToFail), + blocksHandlers: extractHandlerTags(relations.blocksExternalGesture), }; } 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 07860702fe..cdd8f6276e 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 = { simultaneousWithExternalGesture?: Gesture | Gesture[]; requireExternalGestureToFail?: Gesture | Gesture[]; blocksExternalGesture?: Gesture | Gesture[]; From 853b78b8f6580dc014326a89ef2f58e757f014c0 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Thu, 13 Nov 2025 12:07:28 +0100 Subject: [PATCH 4/6] Keep handlerTags stable --- .../src/v3/detectors/NativeDetector.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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} From 9e63d24c6aeb6cca2e81b60c0c708b70528433d4 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Fri, 14 Nov 2025 09:34:02 +0100 Subject: [PATCH 5/6] ensure -> prepare --- .../src/v3/hooks/callbacks/js/useGestureStateChangeEvent.ts | 4 ++-- .../src/v3/hooks/callbacks/js/useGestureTouchEvent.ts | 4 ++-- .../src/v3/hooks/callbacks/js/useGestureUpdateEvent.ts | 4 ++-- .../callbacks/reanimated/useReanimatedStateChangeEvent.ts | 4 ++-- .../hooks/callbacks/reanimated/useReanimatedTouchEvent.ts | 4 ++-- .../hooks/callbacks/reanimated/useReanimatedUpdateEvent.ts | 4 ++-- .../src/v3/hooks/utils/eventHandlersUtils.ts | 6 +++--- 7 files changed, 15 insertions(+), 15 deletions(-) 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 d865b9c39c..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 { ensureStateChangeHandlers } from '../../utils'; +import { prepareStateChangeHandlers } from '../../utils'; import { getStateChangeHandler } from '../stateChangeHandler'; export function useGestureStateChangeEvent( @@ -8,7 +8,7 @@ export function useGestureStateChangeEvent( config: BaseGestureConfig ) { return useMemo(() => { - const handlers = ensureStateChangeHandlers({ + const handlers = prepareStateChangeHandlers({ onBegin: config.onBegin, onStart: config.onStart, onEnd: config.onEnd, 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 a654d7cdbf..f2db17d49c 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 { ensureTouchHandlers } from '../../utils'; +import { prepareTouchHandlers } from '../../utils'; import { getTouchEventHandler } from '../touchEventHandler'; export function useGestureTouchEvent( @@ -8,7 +8,7 @@ export function useGestureTouchEvent( config: BaseGestureConfig ) { return useMemo(() => { - const handlers = ensureTouchHandlers({ + const handlers = prepareTouchHandlers({ onTouchesDown: config.onTouchesDown, onTouchesMove: config.onTouchesMove, onTouchesUp: config.onTouchesUp, 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 2bd6acd58a..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 { ensureUpdateHandlers, 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,7 @@ export function useGestureUpdateEvent( config: BaseGestureConfig ) { return useMemo(() => { - const { handlers, changeEventCalculator } = ensureUpdateHandlers( + const { handlers, changeEventCalculator } = prepareUpdateHandlers( { onUpdate: config.onUpdate, }, 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 8e4a1fd509..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,13 @@ import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper'; import { BaseGestureConfig } from '../../../types'; -import { ensureStateChangeHandlers } from '../../utils'; +import { prepareStateChangeHandlers } from '../../utils'; import { getStateChangeHandler } from '../stateChangeHandler'; export function useReanimatedStateChangeEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = ensureStateChangeHandlers({ + const handlers = prepareStateChangeHandlers({ onBegin: config.onBegin, onStart: config.onStart, onEnd: config.onEnd, 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 89ce521272..d1a7f65b3c 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,13 @@ import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper'; import { BaseGestureConfig } from '../../../types'; -import { ensureTouchHandlers } from '../../utils'; +import { prepareTouchHandlers } from '../../utils'; import { getTouchEventHandler } from '../touchEventHandler'; export function useReanimatedTouchEvent( handlerTag: number, config: BaseGestureConfig ) { - const handlers = ensureTouchHandlers({ + const handlers = prepareTouchHandlers({ onTouchesDown: config.onTouchesDown, onTouchesMove: config.onTouchesMove, onTouchesUp: config.onTouchesUp, 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 e88a6fc21f..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,13 @@ import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper'; import { BaseGestureConfig } from '../../../types'; -import { ensureUpdateHandlers } from '../../utils'; +import { prepareUpdateHandlers } from '../../utils'; import { getUpdateHandler } from '../updateHandler'; export function useReanimatedUpdateEvent( handlerTag: number, config: BaseGestureConfig ) { - const { handlers, changeEventCalculator } = ensureUpdateHandlers( + const { handlers, changeEventCalculator } = prepareUpdateHandlers( { onUpdate: config.onUpdate, }, 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 179cf00c5a..24ca90df43 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 @@ -6,7 +6,7 @@ import { GestureCallbacks, } from '../../types'; -export function ensureStateChangeHandlers( +export function prepareStateChangeHandlers( callbacks: GestureCallbacks ): GestureCallbacks { 'worklet'; @@ -27,7 +27,7 @@ type UpdateHandlersReturnType = { changeEventCalculator?: ChangeCalculatorType; }; -export function ensureUpdateHandlers( +export function prepareUpdateHandlers( callbacks: GestureCallbacks, changeEventCalculator?: ChangeCalculatorType ): UpdateHandlersReturnType { @@ -41,7 +41,7 @@ export function ensureUpdateHandlers( return { handlers, changeEventCalculator }; } -export function ensureTouchHandlers( +export function prepareTouchHandlers( callbacks: GestureCallbacks ): GestureCallbacks { const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancelled } = From 5646af397141efe0ab76be93db2990ec341a7466 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Fri, 14 Nov 2025 10:04:03 +0100 Subject: [PATCH 6/6] Fix merge --- .../src/v3/hooks/useGesture.ts | 14 ++++---------- .../src/v3/hooks/utils/relationUtils.ts | 8 ++++---- .../src/v3/types/GestureTypes.ts | 2 +- 3 files changed, 9 insertions(+), 15 deletions(-) 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 422132c974..1b9bbf9eff 100644 --- a/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts +++ b/packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts @@ -73,19 +73,13 @@ export function useGesture( () => prepareRelations( { - simultaneousWithExternalGesture: - config.simultaneousWithExternalGesture, - requireExternalGestureToFail: config.requireExternalGestureToFail, - blocksExternalGesture: config.blocksExternalGesture, + simultaneousWith: config.simultaneousWith, + requireToFail: config.requireToFail, + block: config.block, }, tag ), - [ - tag, - config.simultaneousWithExternalGesture, - config.requireExternalGestureToFail, - config.blocksExternalGesture, - ] + [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/relationUtils.ts b/packages/react-native-gesture-handler/src/v3/hooks/utils/relationUtils.ts index 59e9e9b260..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 @@ -62,12 +62,12 @@ 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[];