BottomSheet.kt

@Composable
fun BottomSheet(
  isShown: Boolean,
  modifier: Modifier = Modifier,
  onDismissRequest: () -> Unit = {},
  shape: Shape = BottomSheetDefaults.ExpandedShape,
  sheetGesturesEnabled: Boolean = true,
  dismissOnBack: Boolean = sheetGesturesEnabled,
  windowInsets: WindowInsets = WindowInsets(0), // This is a nice default if the app is edge to edge
  content: @Composable ColumnScope.() -> Unit,
) {
  val sheetState = rememberModalBottomSheetState(
    skipPartiallyExpanded = true,
    confirmValueChange = { sheetGesturesEnabled },
  )

  var visible by remember { mutableStateOf(isShown) }
  val scope = rememberCoroutineScope()
  DisposableEffect(isShown) {
    if (!isShown) {
      // Only remove the sheet from composition once the dismiss animation is done
      scope.launch { sheetState.hide() }.invokeOnCompletion { visible = false }
    } else {
      visible = true
    }
    onDispose {}
  }

  if (visible) {
    ModalBottomSheet(
      onDismissRequest = {
        visible = false
        onDismissRequest()
      },
      modifier = modifier,
      sheetState = sheetState,
      shape = shape,
      tonalElevation = 0.dp,
      dragHandle = null,
      windowInsets = windowInsets,
      properties = ModalBottomSheetDefaults.properties(shouldDismissOnBackPress = dismissOnBack),
      content = content,
    )
  }
}