Composing tap and pan gestures together

WHAT THIS TESTS The interviewer is probing whether you understand gesture relations in react-native-gesture-handler, since naively stacking a tap and a pan leads to one blocking the other or both firing incorrectly.

A GOOD ANSWER COVERS With the modern Gesture API you create the gestures separately, const tap = Gesture.Tap().onEnd(...) and const pan = Gesture.Pan().onUpdate(...), then compose them. Because a tap and a drag are usually mutually exclusive outcomes of the same touch, you combine them with Gesture.Race(tap, pan) so whichever activates first wins and cancels the other, or Gesture.Exclusive(pan, tap) to give the pan priority. You then attach the composed gesture to a single GestureDetector. The key tuning knob is the pan's activation threshold: by setting activeOffsetX or minDistance, a finger that barely moves stays a tap, while a clear drag activates the pan. If you genuinely want both to run together, for example a long-press that also pans, you use Gesture.Simultaneous. With the older component API the equivalents are the simultaneousHandlers and waitFor props, wired with refs so the tap waits for the pan to fail or they run simultaneously.

COMMON WRONG ANSWERS Simply nesting TapGestureHandler inside PanGestureHandler with no relation lets the outer handler intercept and block the inner, or causes both to fire on a tap. Expecting both a tap and a pan to always succeed on one gesture ignores that they are usually mutually exclusive. Forgetting the GestureHandlerRootView wrapper means gestures silently do nothing.

LIKELY FOLLOW-UPS What is the difference between Race, Exclusive, and Simultaneous? Race lets the first to activate win, Exclusive enforces a priority order, Simultaneous lets multiple run at once. How do you keep a tap from firing after a drag? Tune the pan activation offset and use Race. Why GestureHandlerRootView? It hosts the gesture system at the root.

ONE CONCRETE EXAMPLE A draggable card you can also tap to open: const pan = Gesture.Pan().activeOffsetX([-10,10]).onUpdate(moveCard); const tap = Gesture.Tap().onEnd(openCard); const gesture = Gesture.Race(tap, pan). A small touch opens the card; moving past ten pixels switches to dragging and cancels the tap.