Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jetpack-Compose ModalBottomSheetLayout throws java.lang.IllegalArgumentException with initial state "Hidden"

By playing with a ModalBottomSheet in Compose, I get the following issue:

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

My composable function has:

  1. a ModalBottomSheetState and a CoroutinScope,
  2. a ModalBottomSheetLayout with,
  3. a Scaffold as bottom sheet content.
// 1.
val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val coroutineScope = rememberCoroutineScope()

// 2. 
ModalBottomSheetLayout(
    sheetContent = {
        /* sheetContent */
    },
    sheetState = sheetState,
    // modifier = Modifier.fillMaxSize() --> it doesn't change the result
) {
    // 3.
    Scaffold {
        /* scaffold content */
    }
}

By setting the initial state of the bottom sheet to ModalBottomSheetValue.Expanded, the issue disappears. Note the exception is also thrown for ModalBottomSheetValue.HalfExpanded and without any initial value (the default is Hidden, so it seems logic).

Is there a known workaround or a version of the library where it is working (version of compose I use: 1.0.0 and I tried with 1.0.0-rc2) ?

UPDATE

After some investigation, it seems that the issue is due to a dynamic content in the sheet content. I have there a Column/LazyColumn that recomposes when data are available. By having a fixed content, the issue disappear for any ModalBottomSheetValue.

FIX

With "null" content (understand a content with a height of 0 dp), the composable function has probably not enough information to compose the modal bottom sheet. It is the case with dynamic column content (starting with no content, so height = 0 dp).

To fix this, set a minimal height of 1 dp somewhere in the sheet content hierarchy:

val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val coroutineScope = rememberCoroutineScope()

ModalBottomSheetLayout(
    sheetContent = {
        Box(modifier.defaultMinSize(minHeight = 1.dp)) {
            /* sheet content */
        }
    },
    sheetState = sheetState,
    // modifier = Modifier.fillMaxSize() --> it doesn't change the result
) {
    Scaffold {
        /* scaffold content */
    }
}
like image 270
Thaerith Avatar asked Aug 02 '21 15:08

Thaerith


1 Answers

With "null" content (understand a content with a height of 0 dp), the composable function has probably not enough information to compose the modal bottom sheet. It is the case with dynamic column content (starting with no content, so height = 0 dp).

To fix this, set a minimal height of 1 dp somewhere in the sheet content hierarchy:

val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val coroutineScope = rememberCoroutineScope()

ModalBottomSheetLayout(
    sheetContent = {
        Box(modifier.defaultMinSize(minHeight = 1.dp)) {
            /* sheet content */
        }
    },
    sheetState = sheetState,
    // modifier = Modifier.fillMaxSize() --> it doesn't change the result
) {
    Scaffold {
        /* scaffold content */
    }
}
like image 198
Thaerith Avatar answered Oct 22 '22 11:10

Thaerith