How to Make Your App React to Every Touch: Tap & Long Press in ArkUI

Read the original article：How to Make Your App React to Every Touch: Tap & Long Press in ArkUI

Introduction

In modern mobile applications, touch gestures play a crucial role in creating intuitive and interactive user experiences. HarmonyOS, with its robust ArkUI framework, provides developers with powerful gesture handling capabilities to detect and respond to user actions. Among these, TapGesture and LongPressGesture are two fundamental gestures that allow developers to capture both simple and extended touch interactions.

TapGesture is used to recognize quick tap actions such as single, double, or even triple taps, making it ideal for buttons, selections, or other immediate responses. On the other hand, LongPressGesture is designed to detect when a user presses and holds a component, enabling more deliberate interactions like showing context menus or triggering advanced options.

This article will explore how to implement and use TapGesture and LongPressGesture in HarmonyOS using ArkTS, along with examples that demonstrate their behavior in real-world applications.

TapGesture:

TapGesture is an essential tool in building interactive user interfaces. It enables developers to respond to simple touch inputs with minimal configuration. Whether you are building buttons, lists, or custom components, TapGesture helps you capture user interaction smoothly and effectively.

Let's create an example!

In this example, the TapGesture is used to detect a double-tap gesture on the Text component that displays “Double Click”.

@State value: string = '';

Column() {
  Text('Double Click')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#8f648d')
    .gesture(
      TapGesture({ count: 2 })
        .onAction((event: GestureEvent) => {
          if (event) {
            this.value = JSON.stringify(event.fingerList[0])
          }
        })
    )
  Text(this.value)
    .fontColor('#8f648d')
    .margin(5)
}

TapGesture({ count: 2 }): Listens for a double-tap.
.onAction(…): Defines what to do when the gesture is recognized.
event.fingerList[0]: Captures information about the finger that triggered the gesture such as its position on the screen.
this.value = JSON.stringify(…): Stores the finger data as a JSON string to be displayed below the “Double Click” text.

We can triple-click just by replacing the count number with 3.

Column() {
  Text('Triple Click')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#788a5a')
    .gesture(
      TapGesture({ count: 3 })
        .onAction((event: GestureEvent) => {
          if (event) {
            this.value = JSON.stringify(event.fingerList[0])
          }
        })
    )
  Text(this.value)
    .fontColor('#788a5a')
    .margin(5)
}

This code allows the user to double-tap the “Double Click” text. When the double-tap is detected, it retrieves and displays touch data like coordinates using the GestureEvent object.

LongPressGesture:

LongPressGesture is a gesture type in HarmonyOS that detects when a user presses and holds on a UI component for a certain amount of time. Unlike a simple tap, this gesture requires the user's finger to remain in contact with the screen for a longer duration before it is triggered. It's commonly used to reveal additional options, show context menus, or initiate special actions that shouldn't be triggered by accidental taps. Developers can customize the behavior by setting properties like the minimum press duration or the number of fingers required.

Let's create an example!

This UI layout displays how long a user presses and holds on a Text element. It uses a LongPressGesture with repetition to count the seconds the user keeps their finger on the screen, and resets the count when the finger is lifted.

Column() {
  Text('How many seconds do you press and hold?')
    .fontSize(20)
    .fontColor('#578ab3')
    .fontWeight(FontWeight.Bold)
  Text(this.count.toString() + ' seconds')
    .fontSize(20)
    .fontColor('#578ab3')
    .gesture(
      LongPressGesture({ repeat: true })
        .onAction((event: GestureEvent) => {
          if (event && event.repeat) {
            this.count++
          }
        })
        .onActionEnd((event: GestureEvent) => {
          this.count = 0
        })
    )
}

LongPressGesture({ repeat: true }): Enables repeated gesture events while the finger is held down.
.onAction(): Triggered repeatedly while holding.
If event.repeat is true, it increases this.count by 1 every time it’s fired (likely every second or tick).
.onActionEnd(): Triggered when the user lifts their finger.
Resets this.count back to 0.

This component shows how many seconds the user is pressing and holding on the second Text. While the finger stays down:

The number keeps increasing.
Once released, the counter resets.

It's a useful pattern for teaching gesture durations, implementing long-press interactions, or creating timers based on touch duration.

Conclusion

Touch gestures are essential for creating responsive and user-friendly mobile applications. In this article, we explored how TapGesture and LongPressGesture can be used in HarmonyOS to detect simple taps and longer press-and-hold actions. Whether you're building buttons, context menus, or interactive components, these gestures allow you to create a more intuitive user experience.

By implementing gesture handling with ArkTS, developers can gain precise control over user input and design applications that respond naturally to touch. Now that you understand how to use TapGesture and LongPressGesture, try incorporating them into your next HarmonyOS project and see how they enhance your app's interactivity.