How can I get the click event (single, double, long) in react native (expo)?

Question

I am making the button with several click events (single, double, long) in react native. I have already used the Touchable component and I got these events using a time delay. But this is not a good solution and there are some issues. it is that when I double-click, the single event has happened concurrently. In this case, I have to remove the single click event and get the only double click event. Is there any other good solution?

Answer 1

Touchable opacity in react native doesn't have the onLongpress or for double click support.

But You can use TouchableWithoutFeedback, as it supports onLongPress funtionality.

Furthermore you can just add a custom code for implementing doubleclick in react native touchables.
What you can do is to just save the count on click and clear the click counter after some seconds then trigger a funtion on onPress when it is clicked twice.

Sample code for doubleclick in react native -

<TouchableWithoutFeedback
    style={{ position: 'absolute', left: 0, padding: 20, backgroundColor:'green' }}
    onPress={() => {
        this.backCount++
        if (this.backCount == 2) {
            clearTimeout(this.backTimer)
            console.warn("Clicked twice")
        } else {
            this.backTimer = setTimeout(() => {
            this.backCount = 0
            }, 3000) #mention here the time for clearing the counter in ms
        }

    }}
>
</TouchableWithoutFeedback>

Don't forget to initialize this.backCount = 0 in your constructor