Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-material3

Navigation buttons on top of ModalBottomSheet

I use androidx.compose.material3:material3:1.2.0-beta02 for ModalBottomSheet. But on some devices with navigation buttons i have an issue:

    ModalBottomSheet(
        onDismissRequest = { onDismiss() },
        windowInsets = WindowInsets.Companion.navigationBars
    ) {
        Column {
            itemList.forEachIndexed { index, item ->
            ...
            }
        }
    }

enter image description here

I try to find some solutions like this - How to prevent ModalBottomSheet from overlapping with the system buttons?. Yes, indeed, from a certain version we can set up windowInsets for ModalBottomSheet. By default: windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,

But neither the default nor the others I tried (windowInsets = WindowInsets.Companion.navigationBars, windowInsets = WindowInsets.Companion.ime) solved my problem. Are there any other options to prevent the buttons from overlapping my ModalBottomSheet?

Solution

  • Upgrading to material3 version 1.3.0-beta01 resolved this issue for me

    androidx.compose.material3:material3:1.3.0-beta01