Jetpack Compose BottomSheetScaffold: Smooth closing - android-jetpack-compose

Question

I'm using Jetpack Compose with the BottomSheetScaffold. To be able to show and hide the bottom sheet from both within and outside the composable, I used a showBottomSheet: MutableState<Boolean> variable. The peek height within the composable is then determined like this:
val baseBottomSheetPeekHeight by remember { mutableStateOf(60.dp) }
val bottomSheetPeekHeight = if (showBottomSheet.value) baseBottomSheetPeekHeight else 0.dp
Later, in the BottomSheetScaffold, I use the variable like this:
BottomSheetScaffold(
...
sheetPeekHeight = bottomSheetPeekHeight,
...
)
(Full reproducer project here: https://github.com/dbrgn/compose-repro)
This generally works as intended, I can set showBottomSheet.value to false to hide the bottom sheet. However, the hiding looks janky, because not all sub-composables are hidden at the same time.
It's a bit hard to see in the animation above due to the GIF conversion, but when closing the bottom sheet peek pane, the other content (below it) is visible for a short moment, before the bottom sheet disappears.
Is there a way to avoid this janky hiding behavior? Or even better, is there a way to smoothly animate the hiding of the pane?

Answer 1

In my case for Smooth closing BottomSheetScaffold I used to: scaffoldState.bottomSheetState.animateTo(Collapsed, tween(duration))
-- (when duration is any Int you want).
The same for Expanding:
scaffoldState.bottomSheetState.animateTo(Expanded, tween(duration))
If you look at the source code of collapse() or expand() function, you will see there just calling animateTo(Expanded) and animateTo(Collapsed). You can customize animateTo() as you wish.
See animateTo() documentation.