Bottom sheets¶

Similar to dialogs, you may use BottomSheetNavHost to handle a backstack of bottom sheets alongside the backstack of screens.

To use it, you need to add the dependency:

// if you are using Material
implementation("dev.olshevski.navigation:reimagined-material:<latest-version>")

// if you are using Material 3
implementation("dev.olshevski.navigation:reimagined-material3:<latest-version>")

The usage would look like this:

@Composable
fun NavHostScreen() {
    val navController = rememberNavController<ScreenDestination>(
        startDestination = ScreenDestination.First,
    )

    val sheetController = rememberNavController<SheetDestination>(
        initialBackstack = emptyList()
    )

    NavBackHandler(navController)

    NavHost(navController) { destination ->
        when (destination) {
            ScreenDestination.First -> { /* ... */ }
            ScreenDestination.Second -> { /* ... */ }
        }
    }

    NavBackHandler(
        controller = sheetController,
        allowEmptyBackstack = true
    )

    BottomSheetNavHost(
        controller = sheetController,
        onDismissRequest = { sheetController.pop() }
    ) { destination ->
        Surface(
            elevation = ModalBottomSheetDefaults.Elevation
        ) {
            when (destination) {
                SheetDestination.First -> { /* ... */ }
                SheetDestination.Second -> { /* ... */ }
            }
        }
    }
}

BottomSheetNavHost is based on the source code of ModalBottomSheetLayout, but with some improvements for switching between multiple bottom sheets. The API also has some similarities.

Tip

You can access current sheetState through the BottomSheetNavHostScope receiver of the contentSelector parameter.