DoublePress Gesture

The DoublePress gesture provides support for double-tapping on a touchable component. The user triggers a DoublePress by tapping a component twice within a system-defined time limit.

Properties

Property Type Default Description
type "DoublePress" REQUIRED Must be "DoublePress"
onDoublePress Array of commands [] Commands to run on a double tap.
onSinglePress Array of commands [] Commands to run on a single tap.

onDoublePress

Commands to run when a double-press event is detected. The onDoublePress commands run after the onCancel event handler runs. The onDoublePress and onSinglePress event handlers are mutually exclusive. A given touch event fires either onSinglePress or onDoublePress but never both.

The event generated has following form.

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // The type of the component
    "handler": "DoublePress",
    ...                     // Component source properties
  },
  "component": {
    "x": Number,       // X-position of the up event in the component (dp)
    "y": Number,       // Y-position of the up event in the component (dp)
    "width": Number,   // Width of the component in dp
    "height": Number,  // Height of the component in dp
  }
}

Refer to Event source for a description of event.source properties.

The onDoublePress handler runs in normal mode in the component data-binding context.

onSinglePress

Commands to run when a single-press is detected and a double-press is no longer a possibility. The onSinglePress and onDoublePress event handlers are mutually exclusive. A given touch event fires either onSinglePress or onDoublePress but never both.

The event generated has the form:

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // The type of the component
    "handler": "SinglePress",
    ...                     // Component source properties
  },
  "component": {
    "x": Number,       // X-position of the up event in the component (dp)
    "y": Number,       // Y-position of the up event in the component (dp)
    "width": Number,   // Width of the component in dp
    "height": Number,  // Height of the component in dp
  }
}

Refer to Event source for a description of event.source properties.

The onSinglePress handler runs in normal mode in the component data-binding context.

Event sequence for the DoublePress gesture

A single-tap event occurs when the user taps the component one time and doesn't tap a second time within the double-press limit. A single-tap event triggers the following event handlers:

  1. onDown
  2. onMove (if applicable)
  3. onUp
  4. onPress
  5. onSinglePress (after a short delay)

A double-tap event occurs when the user taps the component twice in short succession. A double-tap event triggers the following event handlers:

  1. onDown
  2. onMove (if applicable)
  3. onUp
  4. onPress
  5. onDown (start of the second tap)
  6. onMove (if applicable)
  7. onCancel (double-tap identified)
  8. onDoublePress

The operating system and accessibility settings determine the double-press time limit.

DoublePress examples

The following example demonstrates the DoublePress gesture. Each touchable component handler runs a command that displays the ID of the component and the name of the handler that ran. When you do a single press and release, the onPress handler runs, followed by onSinglePress. When you press twice within a short time, onDoublePress runs.

The following example adds the LongPress gesture to the same TouchWrapper. A single press runs onPress followed by onSinglePress. A double press runs onPress followed by onDoublePress. A press and hold runs onLongPressStart, followed by onLongPressEnd when you release the press.

Was this page helpful?

Last updated: Feb 29, 2024