react-native-gesture-handler 2.29.0 → 2.30.0-20251030-7cfe2fc9b

package/src/components/ReanimatedSwipeable/ReanimatedSwipeable.tsx

@@ -1,4 +1,10 @@
-import { useMemo, useCallback, useImperativeHandle, ForwardedRef } from 'react';
+import {
+  useMemo,
+  useCallback,
+  useImperativeHandle,
+  ForwardedRef,
+  useState,
+} from 'react';
 import { LayoutChangeEvent, View, I18nManager, StyleSheet } from 'react-native';
 import Animated, {
   useSharedValue,
@@ -82,6 +88,7 @@ const Swipeable = (props: SwipeableProps) => {
     ]
   );
 
+  const [shouldEnableTap, setShouldEnableTap] = useState(false);
   const rowState = useSharedValue<number>(0);
 
   const userDrag = useSharedValue<number>(0);
@@ -255,6 +262,8 @@ const Swipeable = (props: SwipeableProps) => {
       dispatchImmediateEvents(frozenRowState, toValue);
 
       rowState.value = Math.sign(toValue);
+
+      runOnJS(setShouldEnableTap)(rowState.value !== 0);
     },
     [
       rowState,
@@ -472,6 +481,7 @@ const Swipeable = (props: SwipeableProps) => {
   const tapGesture = useMemo(() => {
     const tap = Gesture.Tap()
       .shouldCancelWhenOutside(true)
+      .enabled(shouldEnableTap)
       .onStart(() => {
         if (rowState.value !== 0) {
           close();
@@ -485,9 +495,8 @@ const Swipeable = (props: SwipeableProps) => {
         relation as RelationPropType
       );
     });
-
     return tap;
-  }, [close, relationProps, rowState]);
+  }, [close, relationProps, rowState, shouldEnableTap]);
 
   const panGesture = useMemo(() => {
     const pan = Gesture.Pan()

package/src/handlers/gestures/GestureDetector/index.tsx

@@ -1,11 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
-import React, {
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { Platform } from 'react-native';
 import findNodeHandle from '../../../findNodeHandle';
 import { GestureType } from '../gesture';
@@ -24,6 +18,7 @@ import { Wrap, AnimatedWrap } from './Wrap';
 import { useDetectorUpdater } from './useDetectorUpdater';
 import { useViewRefHandler } from './useViewRefHandler';
 import { useMountReactions } from './useMountReactions';
+import { useIsomorphicLayoutEffect } from '../../../useIsomorphicLayoutEffect';
 
 function propagateDetectorConfig(
   props: GestureDetectorProps,
@@ -149,7 +144,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
 
   useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const viewTag = findNodeHandle(state.viewRef) as number;
     preparedGesture.isMounted = true;
 

package/src/handlers/gestures/GestureDetector/utils.ts

@@ -49,22 +49,28 @@ function convertToHandlerTag(ref: GestureRef): number {
 }
 
 function extractValidHandlerTags(interactionGroup: GestureRef[] | undefined) {
-  return (
-    interactionGroup?.map(convertToHandlerTag)?.filter((tag) => tag > 0) ?? []
+  return Array.from(
+    new Set(
+      interactionGroup?.map(convertToHandlerTag)?.filter((tag) => tag > 0) ?? []
+    )
   );
 }
 
 export function extractGestureRelations(gesture: GestureType) {
-  const requireToFail = extractValidHandlerTags(gesture.config.requireToFail);
-  const simultaneousWith = extractValidHandlerTags(
+  gesture.config.requireToFail = extractValidHandlerTags(
+    gesture.config.requireToFail
+  );
+  gesture.config.simultaneousWith = extractValidHandlerTags(
     gesture.config.simultaneousWith
   );
-  const blocksHandlers = extractValidHandlerTags(gesture.config.blocksHandlers);
+  gesture.config.blocksHandlers = extractValidHandlerTags(
+    gesture.config.blocksHandlers
+  );
 
   return {
-    waitFor: requireToFail,
-    simultaneousHandlers: simultaneousWith,
-    blocksHandlers: blocksHandlers,
+    waitFor: gesture.config.requireToFail,
+    simultaneousHandlers: gesture.config.simultaneousWith,
+    blocksHandlers: gesture.config.blocksHandlers,
   };
 }
 

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,6 +1,10 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps } from 'react-native';
 
-interface NativeProps extends ViewProps {}
+export interface RootViewNativeProps extends ViewProps {
+  unstable_forceActive?: boolean;
+}
 
-export default codegenNativeComponent<NativeProps>('RNGestureHandlerRootView');
+export default codegenNativeComponent<RootViewNativeProps>(
+  'RNGestureHandlerRootView'
+);

package/src/useIsomorphicLayoutEffect.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+// code below is modified version of the code found in:
+// https://github.com/reduxjs/react-redux/blob/7e2fdd4ee2021e4282e12ba9fc722f09124e30cd/src/utils/useIsomorphicLayoutEffect.ts#L36
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+
+// useLayoutEffect in the browser.
+const isDOM = !!(
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+);
+
+// Under React Native, we know that we always want to use useLayoutEffect
+const isReactNative =
+  typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+
+export const useIsomorphicLayoutEffect =
+  isDOM || isReactNative ? React.useLayoutEffect : React.useEffect;