How can I account for multiple different gestures with React Native GestureDetector?

Question

Here I have this Button component with a GestureDetector. I'd like the button to print "short tap" to the console when it is tapped and "long tap" when it is long pressed.

I'm not sure how to do this, given that, for example, passing an array [tap, longPress] into the gesture field of the GestureDetector results in an error.

import React from "react";
import { Image, TouchableOpacity } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";

export function Button(props) {
  const tap = Gesture.Tap().onEnd(() => console.log("short tap"));
  const longPress = Gesture.LongPress().onEnd(() => console.log("long tap"));

  return (
    <TouchableOpacity style={props.style} activeOpacity = { .5 }>
      <GestureDetector gesture={tap} >
        <Image source={props.image} />
      </GestureDetector>
    </TouchableOpacity>
  );
}

Answer 1

Using as example a code from here, the following code should work:

import React from "react";
import { Image, TouchableOpacity } from "react-native";
import { Gesture, GestureDetector, Simultaneous } from "react-native-gesture-handler"; //Here

export function Button(props) {
  const tap = Gesture.Tap().onEnd(() => console.log("short tap"));
  const longPress = Gesture.LongPress().onEnd(() => console.log("long tap"));

  const composed = Gesture.Simultaneous(tap, longPress) //Here

  return (
    <TouchableOpacity style={props.style} activeOpacity = { .5 }>
      <GestureDetector gesture={composed} > {/* And here */}
        <Image source={props.image} />
      </GestureDetector>
    </TouchableOpacity>
  );
}

Answer 2

While the answer by @William Brochensque junior works fine, I don't think it is exactly what was asked for: Using Gesture.Simlutaneos would allow both gestures to trigger, well, simultaneously, thus logging both "short tap" and "long tap" to the console.

If the goal is to have either one or the other logged (as I understand the OP), then using Gesture.Exclusive would do the trick, as indicated by the docs.

import React from "react";
import { Image, TouchableOpacity } from "react-native";
import { Gesture, GestureDetector, Exclusive } from "react-native-gesture-handler"; //Here

export function Button(props) {
  const tap = Gesture.Tap().onEnd(() => console.log("short tap"));
  const longPress = Gesture.LongPress().onEnd(() => console.log("long tap"));

  const composed = Gesture.Exclusive(longPress, tap) // Here; order is important

  return (
    <TouchableOpacity style={props.style} activeOpacity = { .5 }>
      <GestureDetector gesture={composed} > //And here
        <Image source={props.image} />
      </GestureDetector>
    </TouchableOpacity>
  );
}