Pan, Tap and Fling Gestures

The three most common gestures differ in what they wait for. A pan activates once the finger has moved a little (tune it with minDistance(), activeOffsetX() or failOffsetY()) and then reports translation and velocity on every move. A tap succeeds if the finger lifts quickly without moving far (maxDuration(), maxDist(), numberOfTaps()). A fling fires once, for a fast swipe in one of the direction()s you allow, without tracking the finger. The demo gives each its own card and logs from JavaScript with .runOnJS(true):

src/rea/Gestures.tsx: a pan, a tap pair and a fling (excerpt)TSX

  const pan = Gesture.Pan().runOnJS(true)          // callbacks on the JS thread (for logging)
    .onBegin(() => { resetClock(); log('pan begin'); })
    .onStart((e) => log('pan start after', r(e.translationX), 'dp'))
    .onEnd((e) => log('pan end', r(e.translationX), r(e.translationY),
      'velocity', r(e.velocityX)));
  const single = Gesture.Tap().runOnJS(true).onEnd(() => log('single tap'));
  const double = Gesture.Tap().numberOfTaps(2).runOnJS(true)
    .onEnd(() => log('double tap'));
  const taps = Gesture.Exclusive(double, single);  // try double first, then single
  const fling = Gesture.Fling().direction(Directions.LEFT | Directions.RIGHT).runOnJS(true)
    .onEnd((e) => log('fling ended at x =', r(e.x)));
// ...each attached with <GestureDetector gesture={...}> to its own card

A 600 ms drag on the first card, a tap and then a double tap on the second, and on the third a quick 80 ms swipe followed by a slow 1.5 s one:

Output of 106

 LOG  +0ms pan begin
 LOG  +47ms pan start after 0 dp
 LOG  +570ms pan end 170 24 velocity 317
 LOG  +4118ms single tap
 LOG  +7224ms double tap
 LOG  +10535ms fling ended at x = 170

Only the quick swipe counted as a fling. Translations are in dp, velocities in dp per second, and the double tap logged no single tap first.

MENU