Long Press and Double Tap

Long Press and Double Tap Handling

onLongPress covers long presses. A double tap has no prop, so build it from onPress with a timer: the first tap starts a 300 ms wait, and a second tap inside it cancels the single-tap action. The book cover's Pressable passes the hook's result as onPress and logs a quick look from onLongPress after delayLongPress={400}:

One hook that separates single, double and long presses (TapKinds.js, excerpt)JavaScript

function useTaps({ onSingle, onDouble, delay = 300 }) {
  const timer = useRef(null);
  return () => {
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = null;
      onDouble();
    } else {
      timer.current = setTimeout(() => { timer.current = null; onSingle(); }, delay);
    }
  };
}

A tap, two quick taps (two input tap commands in one adb shell call) and a 1-second hold logged:

Output of 65

 LOG  single tap: open book
 LOG  double tap: like book
 LOG  long press: quick look

Every single tap now waits 300 ms, so use double tap only where that delay is acceptable. React Native Gesture Handler 3 6,788 offers useTapGesture({ numberOfTaps: 2 }) on the native thread (Reanimated and Gesture Handler).

MENU