Pressable

Pressable

Pressable is a View that knows it is being touched. It draws nothing of its own, and four callbacks report what the finger is doing: onPressIn fires the moment a touch lands, onPressOut when it lifts or slides away, onPress after a normal release, and onLongPress if the finger stays down longer than delayLongPress (500 ms by default). A long press replaces onPress; it does not add to it.

Logging every press callback with a timestamp (PressLog.js, excerpt)JavaScript

let t0 = 0;
const log = (name) => () => {
  if (name === 'onPressIn') t0 = Date.now();
  console.log(`${name.padEnd(12)} +${Date.now() - t0} ms`);
};
// ...
      <Pressable onPressIn={log('onPressIn')} onPressOut={log('onPressOut')}
        onPress={log('onPress')} onLongPress={log('onLongPress')}
        style={{ backgroundColor: '#1565c0', padding: 16 }}>

A tap and then a 1.2-second hold, sent to the emulator with adb, log in Metro's terminal:

A tap, then a long press, sent from the hostShell

adb -s emulator-5554 shell input tap 540 1234
adb -s emulator-5554 shell input swipe 540 1234 540 1234 1200

Output

 LOG  onPressIn    +0 ms
 LOG  onPress      +16 ms
 LOG  onPressOut   +146 ms
 LOG  onPressIn    +0 ms
 LOG  onLongPress  +524 ms
 LOG  onPressOut   +1215 ms

The synthetic tap lasted only 16 ms, so onPress fired first and onPressOut waited: React Native 36,878 's Pressability keeps a press visible for at least minPressDuration, 130 ms by default, so a pressed style never flickers. Don't rely on the order of onPress and onPressOut. The hold crossed the 500 ms mark and fired onLongPress instead of onPress; a swipe with identical start and end points is the standard way to fake a long press in scripts.

MENU