Is there any way to disable swipe down on Jetpack Compose ModalBottomSheet (Material 3)?

Question

I'm trying to disable gestures using Material 3 ModalBottomSheet. I've seen this question asked, but the accepted answer was to use a different method such as ModalBottomSheetLayout (Material 1). I need to use ModalBottomSheet.

Every other method has a way to disable gestures except this one.

Looking at the implementation, I don't see any options. Even SheetState doesn't have any options. The reason I want to disable is because I'm showing a LazyColumn, and it "jolts" the bottomsheet when you reach the bottom. Any ideas?

Corporate

Answer 1

As of now, there's indeed no way of preventing swipe when using ModalBottomSheet. What you can do possibly improving the experience is using confirmValueChange from the state:

val state = rememberModalBottomSheetState(
    confirmValueChange = {
        it != SheetValue.Hidden
    }
)

ModalBottomSheet(
    sheetState = state,
    onDismissRequest = { }
) {
    Column {
        LazyColumn {
            items(30) {
                Text(
                    modifier = Modifier.fillMaxWidth().height(50.dp).padding(16.dp),
                    text = "Item $it"
                )
            }
        }
    }
}

It prevents the sheet from getting to hidden state, this way it still has the swipe down animation, but at least it doesn't close the sheet. But of course, then you would need to have an action in your sheet to close it.

Preamplifier

Thanks, but this is not the desired behavior. – Corporate

Answer 2

Adding custom NestedScrollConnection prevents the BottomSheet from consuming scroll when scroll reach the end of a LazyColumn. If Box fills the entire space of the ModelBottomSheet, this might be the behavior you're seeking. However, I've found that this solution doesn't prevent unexpected scrolling elsewhere on the screen not covered by the Box. I hope this information can help you to solve your problem🪁.

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

val connection = remember {
    object : NestedScrollConnection {
        override fun onPostScroll(consumed: Offset, available: Offset, source: NestedScrollSource): Offset {
            return available.copy(x = 0f)
        }

        override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
            return available.copy(x = 0f)
        }
    }
}

ModalBottomSheet(
    onDismissRequest = onDismiss,
    sheetState = sheetState,
) {
    Box(
        modifier = Modifier
            .fillMaxWidth() // Max size would be better
            .nestedScroll(connection),
        contentAlignment = Alignment.Center,
    ) {
        // LazyColumn Content
    }
}

Stinger