How to create Preview function to ModalBottomSheet

Question

I'm trying to create a @Preview function for a ModalBottomSheet in Jetpack Compose, but I'm only seeing a white screen. Here's my SomeModalBottomSheet composable:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SomeModalBottomSheet(
    uiState: MyUiState,
    onDismiss: () -> Unit,
) {
    Scaffold() {
        ModalBottomSheet(
            onDismissRequest = onDismiss,
            sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
        ) {
            Column(modifier = Modifier.fillMaxHeight()) {
                // other inner composable (custom items I built)
            }
        }
    }
}

And here's my @Preview function:

@Preview(showBackground = true)
@Composable
private fun MyModalBottomSheetPreview(
    @PreviewParameter(MyUiStatePreviewParameterProvider::class)
    myUiState: MyUiState
) {
    MyTheme {
        SomeModalBottomSheet(
            uiState = myUiState,
            onDismiss = {},
        )
    }
}

I attempted to create a preview function for a ModalBottomSheet composable in Jetpack Compose. My expectation was that the preview would display a visual representation of the ModalBottomSheet with some content inside it from the PreviewParamteuProvider I built (working). Despite setting the initial value of the sheetState and trying to trigger the BottomSheet for another composable preview, I still only saw a white screen, which was not the expected result.

Answer 1

rememberModalBottomSheetState sets the initial sheet state to Hidden by default, so it's expected that you don't see it on the Preview. If you want to see it, you can instead try using rememberStandardBottomSheetState and set initialValue to PartiallyExpanded or Expanded.

Alternatively, you can create a SheetState directly.