react-native-gesture-handler 2.26.0 → 2.27.1

package/lib/typescript/handlers/gestures/GestureDetector/attachHandlers.js

@@ -0,0 +1,55 @@
+import { registerHandler } from '../../handlersRegistry';
+import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { filterConfig, scheduleFlushOperations } from '../../utils';
+import { ActionType } from '../../../ActionType';
+import { Platform } from 'react-native';
+import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
+import { extractGestureRelations, checkGestureCallbacksForWorklets, ALLOWED_PROPS, } from './utils';
+import { MountRegistry } from '../../../mountRegistry';
+export function attachHandlers({ preparedGesture, gestureConfig, gesturesToAttach, viewTag, webEventHandlersRef, }) {
+    gestureConfig.initialize();
+    // Use queueMicrotask to extract handlerTags, because all refs should be initialized
+    // when it's ran
+    ghQueueMicrotask(() => {
+        if (!preparedGesture.isMounted) {
+            return;
+        }
+        gestureConfig.prepare();
+    });
+    for (const handler of gesturesToAttach) {
+        checkGestureCallbacksForWorklets(handler);
+        RNGestureHandlerModule.createGestureHandler(handler.handlerName, handler.handlerTag, filterConfig(handler.config, ALLOWED_PROPS));
+        registerHandler(handler.handlerTag, handler, handler.config.testId);
+    }
+    // Use queueMicrotask to extract handlerTags, because all refs should be initialized
+    // when it's ran
+    ghQueueMicrotask(() => {
+        if (!preparedGesture.isMounted) {
+            return;
+        }
+        for (const handler of gesturesToAttach) {
+            RNGestureHandlerModule.updateGestureHandler(handler.handlerTag, filterConfig(handler.config, ALLOWED_PROPS, extractGestureRelations(handler)));
+        }
+        scheduleFlushOperations();
+    });
+    for (const gesture of gesturesToAttach) {
+        const actionType = gesture.shouldUseReanimated
+            ? ActionType.REANIMATED_WORKLET
+            : ActionType.JS_FUNCTION_NEW_API;
+        if (Platform.OS === 'web') {
+            RNGestureHandlerModule.attachGestureHandler(gesture.handlerTag, viewTag, ActionType.JS_FUNCTION_OLD_API, // Ignored on web
+            webEventHandlersRef);
+        }
+        else {
+            RNGestureHandlerModule.attachGestureHandler(gesture.handlerTag, viewTag, actionType);
+        }
+        MountRegistry.gestureWillMount(gesture);
+    }
+    preparedGesture.attachedGestures = gesturesToAttach;
+    if (preparedGesture.animatedHandlers) {
+        const isAnimatedGesture = (g) => g.shouldUseReanimated;
+        preparedGesture.animatedHandlers.value = gesturesToAttach
+            .filter(isAnimatedGesture)
+            .map((g) => g.handlers);
+    }
+}

package/lib/typescript/handlers/gestures/GestureDetector/dropHandlers.d.ts

@@ -1,3 +1,2 @@
 import { AttachedGestureState } from './types';
 export declare function dropHandlers(preparedGesture: AttachedGestureState): void;
-//# sourceMappingURL=dropHandlers.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/dropHandlers.js

@@ -0,0 +1,12 @@
+import { unregisterHandler } from '../../handlersRegistry';
+import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { scheduleFlushOperations } from '../../utils';
+import { MountRegistry } from '../../../mountRegistry';
+export function dropHandlers(preparedGesture) {
+    for (const handler of preparedGesture.attachedGestures) {
+        RNGestureHandlerModule.dropGestureHandler(handler.handlerTag);
+        unregisterHandler(handler.handlerTag, handler.config.testId);
+        MountRegistry.gestureWillUnmount(handler);
+    }
+    scheduleFlushOperations();
+}

package/lib/typescript/handlers/gestures/GestureDetector/index.d.ts

@@ -47,4 +47,3 @@ interface GestureDetectorProps {
  */
 export declare const GestureDetector: (props: GestureDetectorProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/index.js

@@ -0,0 +1,114 @@
+/* eslint-disable react/no-unused-prop-types */
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, } from 'react';
+import { Platform } from 'react-native';
+import findNodeHandle from '../../../findNodeHandle';
+import { isTestEnv } from '../../../utils';
+import GestureHandlerRootViewContext from '../../../GestureHandlerRootViewContext';
+import { useAnimatedGesture } from './useAnimatedGesture';
+import { attachHandlers } from './attachHandlers';
+import { needsToReattach } from './needsToReattach';
+import { dropHandlers } from './dropHandlers';
+import { useWebEventHandlers } from './utils';
+import { Wrap, AnimatedWrap } from './Wrap';
+import { useDetectorUpdater } from './useDetectorUpdater';
+import { useViewRefHandler } from './useViewRefHandler';
+import { useMountReactions } from './useMountReactions';
+function propagateDetectorConfig(props, gesture) {
+    const keysToPropagate = [
+        'userSelect',
+        'enableContextMenu',
+        'touchAction',
+    ];
+    for (const key of keysToPropagate) {
+        const value = props[key];
+        if (value === undefined) {
+            continue;
+        }
+        for (const g of gesture.toGestureArray()) {
+            const config = g.config;
+            config[key] = value;
+        }
+    }
+}
+/**
+ * `GestureDetector` is responsible for creating and updating native gesture handlers based on the config of provided gesture.
+ *
+ * ### Props
+ * - `gesture`
+ * - `userSelect` (**Web only**)
+ * - `enableContextMenu` (**Web only**)
+ * - `touchAction` (**Web only**)
+ *
+ * ### Remarks
+ * - Gesture Detector will use first native view in its subtree to recognize gestures, however if this view is used only to group its children it may get automatically collapsed.
+ * - Using the same instance of a gesture across multiple Gesture Detectors is not possible.
+ *
+ * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector
+ */
+export const GestureDetector = (props) => {
+    const rootViewContext = useContext(GestureHandlerRootViewContext);
+    if (__DEV__ && !rootViewContext && !isTestEnv() && Platform.OS !== 'web') {
+        throw new Error('GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.');
+    }
+    // Gesture config should be wrapped with useMemo to prevent unnecessary re-renders
+    const gestureConfig = props.gesture;
+    propagateDetectorConfig(props, gestureConfig);
+    const gesturesToAttach = useMemo(() => gestureConfig.toGestureArray(), [gestureConfig]);
+    const shouldUseReanimated = gesturesToAttach.some((g) => g.shouldUseReanimated);
+    const webEventHandlersRef = useWebEventHandlers();
+    // Store state in ref to prevent unnecessary renders
+    const state = useRef({
+        firstRender: true,
+        viewRef: null,
+        previousViewTag: -1,
+        forceRebuildReanimatedEvent: false,
+    }).current;
+    const preparedGesture = React.useRef({
+        attachedGestures: [],
+        animatedEventHandler: null,
+        animatedHandlers: null,
+        shouldUseReanimated: shouldUseReanimated,
+        isMounted: false,
+    }).current;
+    const updateAttachedGestures = useDetectorUpdater(state, preparedGesture, gesturesToAttach, gestureConfig, webEventHandlersRef);
+    const refHandler = useViewRefHandler(state, updateAttachedGestures);
+    // Reanimated event should be rebuilt only when gestures are reattached, otherwise
+    // config update will be enough as all necessary items are stored in shared values anyway
+    const needsToRebuildReanimatedEvent = state.firstRender ||
+        state.forceRebuildReanimatedEvent ||
+        needsToReattach(preparedGesture, gesturesToAttach);
+    state.forceRebuildReanimatedEvent = false;
+    useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
+    useLayoutEffect(() => {
+        const viewTag = findNodeHandle(state.viewRef);
+        preparedGesture.isMounted = true;
+        attachHandlers({
+            preparedGesture,
+            gestureConfig,
+            gesturesToAttach,
+            webEventHandlersRef,
+            viewTag,
+        });
+        return () => {
+            preparedGesture.isMounted = false;
+            dropHandlers(preparedGesture);
+        };
+    }, []);
+    useEffect(() => {
+        if (state.firstRender) {
+            state.firstRender = false;
+        }
+        else {
+            updateAttachedGestures();
+        }
+    }, [props]);
+    useMountReactions(updateAttachedGestures, preparedGesture);
+    if (shouldUseReanimated) {
+        return (<AnimatedWrap ref={refHandler} onGestureHandlerEvent={preparedGesture.animatedEventHandler}>
+        {props.children}
+      </AnimatedWrap>);
+    }
+    else {
+        return <Wrap ref={refHandler}>{props.children}</Wrap>;
+    }
+};

package/lib/typescript/handlers/gestures/GestureDetector/needsToReattach.d.ts

@@ -1,4 +1,3 @@
 import { GestureType } from '../gesture';
 import { AttachedGestureState } from './types';
 export declare function needsToReattach(preparedGesture: AttachedGestureState, newGestures: GestureType[]): boolean;
-//# sourceMappingURL=needsToReattach.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/needsToReattach.js

@@ -0,0 +1,18 @@
+// Checks whether the gesture should be reattached to the view, this will happen when:
+// - The number of gestures in the preparedGesture is different than the number of gestures in the gesture
+// - The handlerName is different in any of the gestures
+// - At least one of the gestures changed the thread it runs on
+export function needsToReattach(preparedGesture, newGestures) {
+    if (newGestures.length !== preparedGesture.attachedGestures.length) {
+        return true;
+    }
+    for (let i = 0; i < newGestures.length; i++) {
+        if (newGestures[i].handlerName !==
+            preparedGesture.attachedGestures[i].handlerName ||
+            newGestures[i].shouldUseReanimated !==
+                preparedGesture.attachedGestures[i].shouldUseReanimated) {
+            return true;
+        }
+    }
+    return false;
+}

package/lib/typescript/handlers/gestures/GestureDetector/types.d.ts

@@ -18,4 +18,3 @@ export interface WebEventHandler {
     onGestureHandlerEvent: (event: HandlerStateChangeEvent<unknown>) => void;
     onGestureHandlerStateChange?: (event: HandlerStateChangeEvent<unknown>) => void;
 }
-//# sourceMappingURL=types.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/types.js

@@ -0,0 +1 @@
+export {};

package/lib/typescript/handlers/gestures/GestureDetector/updateHandlers.d.ts

@@ -2,4 +2,3 @@ import { GestureType } from '../gesture';
 import { ComposedGesture } from '../gestureComposition';
 import { AttachedGestureState } from './types';
 export declare function updateHandlers(preparedGesture: AttachedGestureState, gestureConfig: ComposedGesture | GestureType, newGestures: GestureType[]): void;
-//# sourceMappingURL=updateHandlers.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/updateHandlers.js

@@ -0,0 +1,54 @@
+import { registerHandler } from '../../handlersRegistry';
+import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
+import { filterConfig, scheduleFlushOperations } from '../../utils';
+import { ghQueueMicrotask } from '../../../ghQueueMicrotask';
+import { extractGestureRelations, checkGestureCallbacksForWorklets, ALLOWED_PROPS, } from './utils';
+export function updateHandlers(preparedGesture, gestureConfig, newGestures) {
+    gestureConfig.prepare();
+    for (let i = 0; i < newGestures.length; i++) {
+        const handler = preparedGesture.attachedGestures[i];
+        checkGestureCallbacksForWorklets(handler);
+        // Only update handlerTag when it's actually different, it may be the same
+        // if gesture config object is wrapped with useMemo
+        if (newGestures[i].handlerTag !== handler.handlerTag) {
+            newGestures[i].handlerTag = handler.handlerTag;
+            newGestures[i].handlers.handlerTag = handler.handlerTag;
+        }
+    }
+    // Store attached gestures to avoid crash when gestures changed after queueing micro task
+    const attachedGestures = preparedGesture.attachedGestures;
+    // Use queueMicrotask to extract handlerTags, because when it's ran, all refs should be updated
+    // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
+    // in case of external relations)
+    ghQueueMicrotask(() => {
+        if (!preparedGesture.isMounted) {
+            return;
+        }
+        // Stop if attached gestures changed after queueing micro task
+        if (attachedGestures !== preparedGesture.attachedGestures) {
+            return;
+        }
+        // If amount of gesture configs changes, we need to update the callbacks in shared value
+        let shouldUpdateSharedValueIfUsed = attachedGestures.length !== newGestures.length;
+        for (let i = 0; i < newGestures.length; i++) {
+            const handler = attachedGestures[i];
+            // If the gestureId is different (gesture isn't wrapped with useMemo or its dependencies changed),
+            // we need to update the shared value, assuming the gesture runs on UI thread or the thread changed
+            if (handler.handlers.gestureId !== newGestures[i].handlers.gestureId &&
+                (newGestures[i].shouldUseReanimated || handler.shouldUseReanimated)) {
+                shouldUpdateSharedValueIfUsed = true;
+            }
+            handler.config = newGestures[i].config;
+            handler.handlers = newGestures[i].handlers;
+            RNGestureHandlerModule.updateGestureHandler(handler.handlerTag, filterConfig(handler.config, ALLOWED_PROPS, extractGestureRelations(handler)));
+            registerHandler(handler.handlerTag, handler, handler.config.testId);
+        }
+        if (preparedGesture.animatedHandlers && shouldUpdateSharedValueIfUsed) {
+            const newHandlersValue = attachedGestures
+                .filter((g) => g.shouldUseReanimated) // Ignore gestures that shouldn't run on UI
+                .map((g) => g.handlers);
+            preparedGesture.animatedHandlers.value = newHandlersValue;
+        }
+        scheduleFlushOperations();
+    });
+}

package/lib/typescript/handlers/gestures/GestureDetector/useAnimatedGesture.d.ts

@@ -1,3 +1,2 @@
 import { AttachedGestureState } from './types';
 export declare function useAnimatedGesture(preparedGesture: AttachedGestureState, needsRebuild: boolean): void;
-//# sourceMappingURL=useAnimatedGesture.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/useAnimatedGesture.js

@@ -0,0 +1,137 @@
+import { CALLBACK_TYPE } from '../gesture';
+import { Reanimated } from '../reanimatedWrapper';
+import { GestureStateManager, } from '../gestureStateManager';
+import { State } from '../../../State';
+import { TouchEventType } from '../../../TouchEventType';
+import { tagMessage } from '../../../utils';
+function getHandler(type, gesture) {
+    'worklet';
+    switch (type) {
+        case CALLBACK_TYPE.BEGAN:
+            return gesture.onBegin;
+        case CALLBACK_TYPE.START:
+            return gesture.onStart;
+        case CALLBACK_TYPE.UPDATE:
+            return gesture.onUpdate;
+        case CALLBACK_TYPE.CHANGE:
+            return gesture.onChange;
+        case CALLBACK_TYPE.END:
+            return gesture.onEnd;
+        case CALLBACK_TYPE.FINALIZE:
+            return gesture.onFinalize;
+        case CALLBACK_TYPE.TOUCHES_DOWN:
+            return gesture.onTouchesDown;
+        case CALLBACK_TYPE.TOUCHES_MOVE:
+            return gesture.onTouchesMove;
+        case CALLBACK_TYPE.TOUCHES_UP:
+            return gesture.onTouchesUp;
+        case CALLBACK_TYPE.TOUCHES_CANCELLED:
+            return gesture.onTouchesCancelled;
+    }
+}
+function touchEventTypeToCallbackType(eventType) {
+    'worklet';
+    switch (eventType) {
+        case TouchEventType.TOUCHES_DOWN:
+            return CALLBACK_TYPE.TOUCHES_DOWN;
+        case TouchEventType.TOUCHES_MOVE:
+            return CALLBACK_TYPE.TOUCHES_MOVE;
+        case TouchEventType.TOUCHES_UP:
+            return CALLBACK_TYPE.TOUCHES_UP;
+        case TouchEventType.TOUCHES_CANCELLED:
+            return CALLBACK_TYPE.TOUCHES_CANCELLED;
+    }
+    return CALLBACK_TYPE.UNDEFINED;
+}
+function runWorklet(type, gesture, event, ...args) {
+    'worklet';
+    const handler = getHandler(type, gesture);
+    if (gesture.isWorklet[type]) {
+        // @ts-ignore Logic below makes sure the correct event is send to the
+        // correct handler.
+        handler?.(event, ...args);
+    }
+    else if (handler) {
+        console.warn(tagMessage('Animated gesture callback must be a worklet'));
+    }
+}
+function isStateChangeEvent(event) {
+    'worklet';
+    // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
+    return event.oldState != null;
+}
+function isTouchEvent(event) {
+    'worklet';
+    return event.eventType != null;
+}
+export function useAnimatedGesture(preparedGesture, needsRebuild) {
+    if (!Reanimated) {
+        return;
+    }
+    // Hooks are called conditionally, but the condition is whether the
+    // react-native-reanimated is installed, which shouldn't change while running
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const sharedHandlersCallbacks = Reanimated.useSharedValue(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const lastUpdateEvent = Reanimated.useSharedValue([]);
+    // not every gesture needs a state controller, init them lazily
+    const stateControllers = [];
+    const callback = (event) => {
+        'worklet';
+        const currentCallback = sharedHandlersCallbacks.value;
+        if (!currentCallback) {
+            return;
+        }
+        for (let i = 0; i < currentCallback.length; i++) {
+            const gesture = currentCallback[i];
+            if (event.handlerTag !== gesture.handlerTag) {
+                continue;
+            }
+            if (isStateChangeEvent(event)) {
+                if (event.oldState === State.UNDETERMINED &&
+                    event.state === State.BEGAN) {
+                    runWorklet(CALLBACK_TYPE.BEGAN, gesture, event);
+                }
+                else if ((event.oldState === State.BEGAN ||
+                    event.oldState === State.UNDETERMINED) &&
+                    event.state === State.ACTIVE) {
+                    runWorklet(CALLBACK_TYPE.START, gesture, event);
+                    lastUpdateEvent.value[gesture.handlerTag] = undefined;
+                }
+                else if (event.oldState !== event.state &&
+                    event.state === State.END) {
+                    if (event.oldState === State.ACTIVE) {
+                        runWorklet(CALLBACK_TYPE.END, gesture, event, true);
+                    }
+                    runWorklet(CALLBACK_TYPE.FINALIZE, gesture, event, true);
+                }
+                else if ((event.state === State.FAILED || event.state === State.CANCELLED) &&
+                    event.state !== event.oldState) {
+                    if (event.oldState === State.ACTIVE) {
+                        runWorklet(CALLBACK_TYPE.END, gesture, event, false);
+                    }
+                    runWorklet(CALLBACK_TYPE.FINALIZE, gesture, event, false);
+                }
+            }
+            else if (isTouchEvent(event)) {
+                if (!stateControllers[i]) {
+                    stateControllers[i] = GestureStateManager.create(event.handlerTag);
+                }
+                if (event.eventType !== TouchEventType.UNDETERMINED) {
+                    runWorklet(touchEventTypeToCallbackType(event.eventType), gesture, event, stateControllers[i]);
+                }
+            }
+            else {
+                runWorklet(CALLBACK_TYPE.UPDATE, gesture, event);
+                if (gesture.onChange && gesture.changeEventCalculator) {
+                    runWorklet(CALLBACK_TYPE.CHANGE, gesture, gesture.changeEventCalculator?.(event, lastUpdateEvent.value[gesture.handlerTag]));
+                    lastUpdateEvent.value[gesture.handlerTag] = event;
+                }
+            }
+        }
+    };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const event = Reanimated.useEvent(callback, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], needsRebuild);
+    preparedGesture.animatedEventHandler = event;
+    preparedGesture.animatedHandlers = sharedHandlersCallbacks;
+}

package/lib/typescript/handlers/gestures/GestureDetector/useDetectorUpdater.d.ts

@@ -3,4 +3,3 @@ import { GestureType } from '../gesture';
 import { ComposedGesture } from '../gestureComposition';
 import { AttachedGestureState, GestureDetectorState, WebEventHandler } from './types';
 export declare function useDetectorUpdater(state: GestureDetectorState, preparedGesture: AttachedGestureState, gesturesToAttach: GestureType[], gestureConfig: ComposedGesture | GestureType, webEventHandlersRef: React.RefObject<WebEventHandler>): (skipConfigUpdate?: boolean) => void;
-//# sourceMappingURL=useDetectorUpdater.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/useDetectorUpdater.js

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import { attachHandlers } from './attachHandlers';
+import { updateHandlers } from './updateHandlers';
+import { needsToReattach } from './needsToReattach';
+import { dropHandlers } from './dropHandlers';
+import { useForceRender, validateDetectorChildren } from './utils';
+import findNodeHandle from '../../../findNodeHandle';
+// Returns a function that's responsible for updating the attached gestures
+// If the view has changed, it will reattach the handlers to the new view
+// If the view remains the same, it will update the handlers with the new config
+export function useDetectorUpdater(state, preparedGesture, gesturesToAttach, gestureConfig, webEventHandlersRef) {
+    const forceRender = useForceRender();
+    const updateAttachedGestures = useCallback(
+    // skipConfigUpdate is used to prevent unnecessary updates when only checking if the view has changed
+    (skipConfigUpdate) => {
+        // If the underlying view has changed we need to reattach handlers to the new view
+        const viewTag = findNodeHandle(state.viewRef);
+        const didUnderlyingViewChange = viewTag !== state.previousViewTag;
+        if (didUnderlyingViewChange ||
+            needsToReattach(preparedGesture, gesturesToAttach)) {
+            validateDetectorChildren(state.viewRef);
+            dropHandlers(preparedGesture);
+            attachHandlers({
+                preparedGesture,
+                gestureConfig,
+                gesturesToAttach,
+                webEventHandlersRef,
+                viewTag,
+            });
+            if (didUnderlyingViewChange) {
+                state.previousViewTag = viewTag;
+                state.forceRebuildReanimatedEvent = true;
+                forceRender();
+            }
+        }
+        else if (!skipConfigUpdate) {
+            updateHandlers(preparedGesture, gestureConfig, gesturesToAttach);
+        }
+    }, [
+        forceRender,
+        gestureConfig,
+        gesturesToAttach,
+        preparedGesture,
+        state,
+        webEventHandlersRef,
+    ]);
+    return updateAttachedGestures;
+}

package/lib/typescript/handlers/gestures/GestureDetector/useMountReactions.d.ts

@@ -1,3 +1,2 @@
 import { AttachedGestureState } from './types';
 export declare function useMountReactions(updateDetector: () => void, state: AttachedGestureState): void;
-//# sourceMappingURL=useMountReactions.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/useMountReactions.js

@@ -0,0 +1,35 @@
+import { transformIntoHandlerTags } from '../../utils';
+import { MountRegistry } from '../../../mountRegistry';
+import { useEffect } from 'react';
+function shouldUpdateDetector(relation, gesture) {
+    if (relation === undefined) {
+        return false;
+    }
+    for (const tag of transformIntoHandlerTags(relation)) {
+        if (tag === gesture.handlerTag) {
+            return true;
+        }
+    }
+    return false;
+}
+export function useMountReactions(updateDetector, state) {
+    useEffect(() => {
+        return MountRegistry.addMountListener((gesture) => {
+            // At this point the ref in the gesture config should be updated, so we can check if one of the gestures
+            // set in a relation with the gesture got mounted. If so, we need to update the detector to propagate
+            // the changes to the native side.
+            for (const attachedGesture of state.attachedGestures) {
+                const blocksHandlers = attachedGesture.config.blocksHandlers;
+                const requireToFail = attachedGesture.config.requireToFail;
+                const simultaneousWith = attachedGesture.config.simultaneousWith;
+                if (shouldUpdateDetector(blocksHandlers, gesture) ||
+                    shouldUpdateDetector(requireToFail, gesture) ||
+                    shouldUpdateDetector(simultaneousWith, gesture)) {
+                    updateDetector();
+                    // We can safely return here, if any other gestures should be updated, they will be by the above call
+                    return;
+                }
+            }
+        });
+    }, [updateDetector, state]);
+}

package/lib/typescript/handlers/gestures/GestureDetector/useViewRefHandler.d.ts

@@ -1,4 +1,3 @@
 import { GestureDetectorState } from './types';
 import React from 'react';
 export declare function useViewRefHandler(state: GestureDetectorState, updateAttachedGestures: (skipConfigUpdate?: boolean) => void): (ref: React.Component | null) => void;
-//# sourceMappingURL=useViewRefHandler.d.ts.map

package/lib/typescript/handlers/gestures/GestureDetector/useViewRefHandler.js

@@ -0,0 +1,32 @@
+import { isFabric, tagMessage } from '../../../utils';
+import { getShadowNodeFromRef } from '../../../getShadowNodeFromRef';
+import { useCallback } from 'react';
+import findNodeHandle from '../../../findNodeHandle';
+// Ref handler for the Wrap component attached under the GestureDetector.
+// It's responsible for setting the viewRef on the state and triggering the reattaching of handlers
+// if the view has changed.
+export function useViewRefHandler(state, updateAttachedGestures) {
+    const refHandler = useCallback((ref) => {
+        if (ref === null) {
+            return;
+        }
+        state.viewRef = ref;
+        // if it's the first render, also set the previousViewTag to prevent reattaching gestures when not needed
+        if (state.previousViewTag === -1) {
+            state.previousViewTag = findNodeHandle(state.viewRef);
+        }
+        // Pass true as `skipConfigUpdate`. Here we only want to trigger the eventual reattaching of handlers
+        // in case the view has changed. If the view doesn't change, the update will be handled by detector.
+        if (!state.firstRender) {
+            updateAttachedGestures(true);
+        }
+        if (__DEV__ && isFabric() && global.isViewFlatteningDisabled) {
+            const node = getShadowNodeFromRef(ref);
+            if (global.isViewFlatteningDisabled(node) === false) {
+                console.error(tagMessage('GestureDetector has received a child that may get view-flattened. ' +
+                    '\nTo prevent it from misbehaving you need to wrap the child with a `<View collapsable={false}>`.'));
+            }
+        }
+    }, [state, updateAttachedGestures]);
+    return refHandler;
+}

package/lib/typescript/handlers/gestures/GestureDetector/utils.d.ts

@@ -10,4 +10,3 @@ export declare function checkGestureCallbacksForWorklets(gesture: GestureType):
 export declare function validateDetectorChildren(ref: any): void;
 export declare function useForceRender(): () => void;
 export declare function useWebEventHandlers(): import("react").RefObject<WebEventHandler>;
-//# sourceMappingURL=utils.d.ts.map