Combine detectTapGestures and detectDragGesturesAfterLongPress?

Issue

We need to be able to detect both taps and drag gestures after long press on the same component in Jetpack Compose.

To detect taps we can do:

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
}

And to detect drag gestures after long press:

Modifier.pointerInput(graphData) {
    detectDragGesturesAfterLongPress(
        ...
    )
}

But it is not possible to use both at the same time, since the first detect* will consume the pointer events:

Modifier.pointerInput(graphData) {
    detectTapGestures(
        ...
    )
    detectDragGesturesAfterLongPress(
        ...
    )
}

Is it possible to achieve this in a more convenient way then rolling our own custom function that replicates most of the code in detectDragGesturesAfterLongPress?

Solution

By chaining two Modifier.pointerInput(Unit) functions you will be able to detect both gestures. Of course you won't be able to detect tap if drag gesture has started

val context = LocalContext.current

val modifier = Modifier
    .pointerInput(Unit) {
        detectTapGestures(
            onPress = {
                Toast
                    .makeText(context, "onPress", Toast.LENGTH_SHORT)
                    .show()
            },
            onTap = {
                Toast
                    .makeText(context, "onTap", Toast.LENGTH_SHORT)
                    .show()
            }
        )
    }

    .pointerInput(Unit) {
        detectDragGesturesAfterLongPress(
            onDragStart = {
                Toast
                    .makeText(context, "onDragStart", Toast.LENGTH_SHORT)
                    .show()
            },
            onDrag = { change, dragAmount ->
                println("DRAGGING$ dragAmount")

            }
        )
    }

Answered By - Thracian