Jetpack Compose Bottom Sheet initialization error

Question

In Jetpack compose 1.0.0-beta01, I am calling the BottomSheetScaffold like this:

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = { Text("") },
    sheetShape = Shapes.large,
    backgroundColor = AppTheme.colors.uiBackground,
    modifier = modifier
    
) { (content) }

... and getting the following error:

java.lang.IllegalArgumentException: The initial value must have an associated anchor.

Any tips on fixing this?

Answer 1

Don't forget to add the following atribute:

sheetPeekHeight = 0.dp

So your code should be like this:

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = { Text("") },
    sheetShape = Shapes.large,
    sheetPeekHeight = 0.dp, // <--- new line
    backgroundColor = AppTheme.colors.uiBackground,
    modifier = modifier
    
) { (content) }

Answer 2

When bottomSheetState is expand, sheetContent must have real content to show.

You need check this.

Answer 3

In case you end up on this page because you use the BackdropScaffold, the suggested solution does the trick as well. Simply set the peekHeight. For example like this:

BackdropScaffold(
        appBar = {},
        backLayerContent = {},
        frontLayerContent = {},
        peekHeight = 0.dp
    )

Then Preview works like a charm again.

Fun fact though: Don't set it to 56.dp which is the default init value it normally should be initialised with (value of BackdropScaffoldDefaults.PeekHeight). 56.dp results in the anchor rendering problem in my current setup. (Using compose version '1.1.1')