Jetpack Compose: Screen freezes when dissmiss ModalBottomSheet by swiping down by touching drag handle

Question

I'm trying to create a ModalBottomSheet that will be visible and invisible depending on the value of a boolean state showBottomSheet. if showBottomSheet value is true, ModalBottomSheet will be displayed otherwise it won't be displayed, Once the ModalBottomSheet is visible then if I close it or dismiss it by dragging it down or swiping it down particularly by touching drag handle my phone screen freezes and I need to rerun the app.

Main Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScaffoldPractice01Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CreateScaffold()
                }
            }
        }
    }
}

CreateScaffold

fun CreateScaffold() {
    val bottomSheetState = rememberModalBottomSheetState()
    val coroutineScope = rememberCoroutineScope()
    val showBottomSheet = remember { mutableStateOf(false) }

    Scaffold(
        bottomBar = {
            TestBottomAppBar()
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                onClick = {
                    showBottomSheet.value = true
                }
            ) {
                Icon(imageVector = Icons.Default.Add, contentDescription = null, tint = Color.White)
            }
        }
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceAround,
            modifier = Modifier
                .fillMaxSize(1f)
                .padding(top = it.calculateTopPadding(), bottom = it.calculateBottomPadding())
        ) {
            Button(
                onClick = {
                    coroutineScope.launch {
                        bottomSheetState.hide()
                    }.invokeOnCompletion {
                        if (!bottomSheetState.isVisible) {
                            showBottomSheet.value = false
                        }
                    }
                }
            ) {
                Text(text = "Modal Bottom Sheet")
            }

            if (showBottomSheet.value) {
                ModalBottomSheet(
                    onDismissRequest = {
                        showBottomSheet.value = false
                    },
                    sheetState = bottomSheetState,
                    dragHandle = {
                        BottomSheetDefaults.DragHandle(
                            color = Color.DarkGray,
                            height = 3.dp,
                            width = 25.dp
                        )
                    },
                    modifier = Modifier.height(350.dp)
                ) {
                    Column(
                        modifier = Modifier.padding(15.dp)
                    ) {
                        LazyColumn {
                            items(25) {
                               Row(
                                    modifier = Modifier
                                        .fillMaxWidth(1f)
                                        .padding(vertical = 8.dp),
                                    horizontalArrangement = Arrangement.SpaceAround,
                                    verticalAlignment = Alignment.CenterVertically
                                ) {
                                    Icon(
                                        imageVector = Icons.Default.Share,
                                        contentDescription = null
                                    )
                                    Text(
                                        text = "Share now",
                                        fontStyle = FontStyle.Italic
                                    )
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

Answer 1

Use bottomSheetState.isVisible to add ModalBottomSheet only when it is visible:

if (showBottomSheet.value && bottomSheetState.isVisible) { // <-- use this condition
                ModalBottomSheet(
                    onDismissRequest = {
                        showBottomSheet.value = false
                    },
                    sheetState = bottomSheetState,
                    dragHandle = {
                        BottomSheetDefaults.DragHandle(
                            color = Color.DarkGray,
                            height = 3.dp,
                            width = 25.dp
                        )
                    },
                    modifier = Modifier.height(350.dp)
                ) {
                    //.......