Block GestureDetector under TouchableOpacity

[rdaniel0]

I have a few TouchableOpacity placed like so

<GestureDetector gesture={Gesture.tap().onEnd(() => console.log("tap"))}>
  <TouchableOpacity  onPress={() => console.log("press")} />
</GestureDetector />

And I want the TouchableOpacity to block touch events from propagating down to the gesture.
Currently I'm seeing both console logs where I should only see "press"

Is there a correct way to do this?

using react-native TouchableOpacity allows gesture.
using react-native-gesture-handler TouchableOpacity stops onPress, I want the opposite of this!

[mtlaso]

This stack overflow answer might help you.

[chanphiromsok]

My solution (gesture 2.24.0)

import React, { PropsWithChildren } from "react";
import type { StyleProp, ViewStyle } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, { runOnJS } from "react-native-reanimated";
const hitSlop = { left: 8, bottom: 4, right: 8, top: 4 };

type TapControlerProps = {
  onPress: () => void;
  style?: StyleProp<ViewStyle>;
};

/**
 * ref https://github.com/alantoa/expo-reanimated-av-player/blob/main/src/components/tap-controler.tsx
 */
const TapControl = ({
  onPress,
  style,
  children,
}: PropsWithChildren<TapControlerProps>) => {
  const gesture = Gesture.Tap().onEnd((_e, success) => {
    if (success) {
      runOnJS(onPress)()
    }
  });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View hitSlop={hitSlop} style={style}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
};


export default TapControl;

[chanphiromsok]

I wish have another options example: block gesture on touchable or pressable from gesture