How to exclude certain screen edge regions from system's back gesture in Jetpack Compose?

Question

I have a range slider in my compose app that stretches edge to edge horizontally but accessing the thumbs near the edges triggers the system back navigation gesture. How can I disable the system back gesture only for the range slider's thumb region on the edges?

I could find solutions like below when using view but none for compose.

https://developer.android.com/develop/ui/views/touch-and-input/gestures/gesturenav#conflicting-gestures

https://medium.com/androiddevelopers/gesture-navigation-handling-gesture-conflicts-8ee9c2665c69

Is this not available for Jetpack Compose yet? Or am I missing something?

Answer 1

You can use Modifier.systemGestureExclusion() to exclude a layout's rectangle from system gestures. Docs

There is also a version that will pass you in the measured rect of the parent layout. You could do something like

Box(
   modifier = Modifier.systemGestureExclusion { layoutCoords ->
      Rect(x = 0, y = 0, width = 10.dp, height = layoutCoords.size.height)
   }
) { ... }

to exclude the left 10pts of a Box.