Add relation props to Pressable and ReanimatedSwipeable (#3473)

## Description

It has been reported that if `Pressable` is placed under the view with
attached `GestureDetector`, it doesn't work since it gets cancelled by
other gestures. This PR adds relation properties to `Pressable` and
`ReanimatedSwipeable`, so we can make interactions with external
handlers possible.

> [!NOTE]
> This change was partially added into `ReanimatedSwipeable` in #3324 

## Test plan

<details>
<summary>Tested on the following example:</summary>

```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  Gesture,
  Pressable,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function App() {
  const gesture = Gesture.Pan();

  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={gesture}>
        <View style={styles.buttonContainer} collapsable={false}>
          <Pressable
            style={styles.button}
            onPressIn={() => console.log('Pressable onPressIn')}
            onPressOut={() => console.log('Pressable onPressOut')}
            simultaneousWithExternalGesture={gesture}
          />
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  buttonContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: '#535353',
  },
  button: {
    width: 200,
    height: 200,
    borderRadius: 30,
    backgroundColor: '#1db954',
  },
});
```

</details>

Author: m-bert

src/components/Pressable/Pressable.tsx

@@ -29,6 +29,11 @@ import {
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
 import { INT32_MAX, isFabric, isTestEnv } from '../../utils';
+import {
+  applyRelationProp,
+  RelationPropName,
+  RelationPropType,
+} from '../utils';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
@@ -57,9 +62,18 @@ const Pressable = forwardRef(
       android_ripple,
       disabled,
       accessible,
+      simultaneousWithExternalGesture,
+      requireExternalGestureToFail,
+      blocksExternalGesture,
       ...remainingProps
     } = props;
 
+    const relationProps = {
+      simultaneousWithExternalGesture,
+      requireExternalGestureToFail,
+      blocksExternalGesture,
+    };
+
     const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
 
     // Disabled when onLongPress has been called
@@ -406,6 +420,14 @@ const Pressable = forwardRef(
       gesture.runOnJS(true);
       gesture.hitSlop(appliedHitSlop);
       gesture.shouldCancelWhenOutside(Platform.OS === 'web' ? false : true);
+
+      Object.entries(relationProps).forEach(([relationName, relation]) => {
+        applyRelationProp(
+          gesture,
+          relationName as RelationPropName,
+          relation as RelationPropType
+        );
+      });
     }
 
     // Uses different hitSlop, to activate on hitSlop area instead of pressRetentionOffset area

src/components/Pressable/PressableProps.tsx

@@ -7,6 +7,7 @@ import {
   PressableStateCallbackType as RNPressableStateCallbackType,
   PressableAndroidRippleConfig as RNPressableAndroidRippleConfig,
 } from 'react-native';
+import { RelationPropType } from '../utils';
 
 export type PressableStateCallbackType = RNPressableStateCallbackType;
 export type PressableAndroidRippleConfig = RNPressableAndroidRippleConfig;
@@ -139,4 +140,22 @@ export interface PressableProps
    * Duration (in milliseconds) to wait after press down before calling onPressIn.
    */
   unstable_pressDelay?: number;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  simultaneousWithExternalGesture?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  requireExternalGestureToFail?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  blocksExternalGesture?: RelationPropType;
 }

src/components/ReanimatedSwipeable.tsx

@@ -9,7 +9,6 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
-import { GestureRef } from '../handlers/gestures/gesture';
 import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 import { GestureDetector } from '../handlers/gestures/GestureDetector';
 import {
@@ -38,6 +37,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
+import { applyRelationProp, RelationPropName, RelationPropType } from './utils';
 
 const DRAG_TOSS = 0.05;
 
@@ -208,9 +208,19 @@ export interface SwipeableProps
    * A gesture object or an array of gesture objects containing the configuration and callbacks to be
    * used with the swipeable's gesture handler.
    */
-  simultaneousWithExternalGesture?:
-    | Exclude<GestureRef, number>
-    | Exclude<GestureRef, number>[];
+  simultaneousWithExternalGesture?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  requireExternalGestureToFail?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  blocksExternalGesture?: RelationPropType;
 }
 
 export interface SwipeableMethods {
@@ -257,9 +267,17 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       renderLeftActions,
       renderRightActions,
       simultaneousWithExternalGesture,
+      requireExternalGestureToFail,
+      blocksExternalGesture,
       ...remainingProps
     } = props;
 
+    const relationProps = {
+      simultaneousWithExternalGesture,
+      requireExternalGestureToFail,
+      blocksExternalGesture,
+    };
+
     const rowState = useSharedValue<number>(0);
 
     const userDrag = useSharedValue<number>(0);
@@ -654,15 +672,13 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           }
         });
 
-      if (!simultaneousWithExternalGesture) {
-        return tap;
-      }
-
-      if (Array.isArray(simultaneousWithExternalGesture)) {
-        tap.simultaneousWithExternalGesture(...simultaneousWithExternalGesture);
-      } else {
-        tap.simultaneousWithExternalGesture(simultaneousWithExternalGesture);
-      }
+      Object.entries(relationProps).forEach(([relationName, relation]) => {
+        applyRelationProp(
+          tap,
+          relationName as RelationPropName,
+          relation as RelationPropType
+        );
+      });
 
       return tap;
     }, [close, rowState, simultaneousWithExternalGesture]);
@@ -707,15 +723,13 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           dragStarted.value = false;
         });
 
-      if (!simultaneousWithExternalGesture) {
-        return pan;
-      }
-
-      if (Array.isArray(simultaneousWithExternalGesture)) {
-        pan.simultaneousWithExternalGesture(...simultaneousWithExternalGesture);
-      } else {
-        pan.simultaneousWithExternalGesture(simultaneousWithExternalGesture);
-      }
+      Object.entries(relationProps).forEach(([relationName, relation]) => {
+        applyRelationProp(
+          pan,
+          relationName as RelationPropName,
+          relation as RelationPropType
+        );
+      });
 
       return pan;
     }, [

src/components/utils.ts

@@ -0,0 +1,26 @@
+import { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
+
+export type RelationPropName =
+  | 'simultaneousWithExternalGesture'
+  | 'requireExternalGestureToFail'
+  | 'blocksExternalGesture';
+
+export type RelationPropType =
+  | Exclude<GestureRef, number>
+  | Exclude<GestureRef, number>[];
+
+export function applyRelationProp(
+  gesture: BaseGesture<any>,
+  relationPropName: RelationPropName,
+  relationProp: RelationPropType
+) {
+  if (!relationProp) {
+    return;
+  }
+
+  if (Array.isArray(relationProp)) {
+    gesture[relationPropName](...relationProp);
+  } else {
+    gesture[relationPropName](relationProp);
+  }
+}