How to prevent GestureDetector to trigger/respond, when Pressable component inside?

[Deodes21]

I want to see only my Pressable answer to my gesture in case I press it, without triggering GestureDetector

const Gestures = ({navigation}) => {
  const tapJS = () => console.log('tap');
  const doubleTapJS = () => console.log('double tap');
  const zoomInJs = () => console.log('zoom in');
  const zoomOutJs = () => console.log('zoom out');

  const tap = Gesture.Tap().onEnd(() => {
    runOnJS(tapJS)();
  });

  const doubleTap = Gesture.Tap()
    .numberOfTaps(2)
    .onEnd(() => {
      runOnJS(doubleTapJS)();
    });

  const pinch = Gesture.Pinch().onUpdate(event => {
    const {scale} = event;

    if (scale <= 0.7) {
      runOnJS(zoomInJs)();
    }

    if (scale >= 1.3) {
      runOnJS(zoomOutJs)();
    }
  });

  const allGestures = Gesture.Exclusive(pinch, doubleTap, tap);

  return (
    <SafeAreaView style={styles.safeArea}>
      <GestureDetector gesture={allGestures}>
        <Animated.View style={styles.container}>
          <View style={styles.header} onTouchEnd={e => e.stopPropagation()}>
            <Pressable
              onPress={() => {
                console.log('Pressable');
              }}>
              <Text>1234567890123456789012345678901234567890</Text>
            </Pressable>
          </View>
        </Animated.View>
      </GestureDetector>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'pink',
  },
  container: {
    flex: 1,
  },
  header: {
    flex: 1,
    backgroundColor: 'silver',
  },
  footer: {
    flex: 1,
  },
});

Logs:

[petrbela]

Instead of Pressable, you can use a TapGestureHandler. Then it will take over the gesture handling for that area.

<TapGestureHandler
  onHandlerStateChange={(e) => {
    if (e.nativeEvent.state === State.ACTIVE) {
      console.log('Pressed');
    }
  }}
/>