CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack-navigationjetpack-compose-accompanist
Arpit Shukla
Arpit Shukla

Reputation: 10523

How to keep bottom sheet in backstack when navigating forward?

I am using Accompanist Bottom Sheet Destinations in my project. The setup is exactly the same as shown in docs.

@Composable
fun MyApp() {
    val bottomSheetNavigator = rememberBottomSheetNavigator()
    val navController = rememberNavController(bottomSheetNavigator)
    ModalBottomSheetLayout(bottomSheetNavigator) {
        NavHost(navController, Destinations.Home) {
           composable(route = "home") {
               HomeScreen(
                   openBottomSheet = { navController.navigate("sheet")  }
               )
           }
           bottomSheet(route = "sheet") {
               MyBottonSheet(
                   navigateToSomeRoute = { navController.navigate("some_route") }
               )
           }
           composable(route = "some_route") {
               SomeComposable(
                   onBackPress = { navController.navigateUp() }
               )
           }
        }
    }
}

Here I have a button in MyBottomSheet which opens the SomeComposable screen. But when I navigateUp from there, I reach HomeScreen i.e. the bottom sheet was popped off the backstack when I navigated away from it. How can I keep my bottom sheet in the backstack so that when I press Back in SomeComposable I go back to the previous state with MyBottonSheet open (on top of HomeScreen)?

Upvotes: 2

Views: 2500

Answers (2)

Reza Dizaji
Reza Dizaji

Reputation: 53

I achieved this actually buy not making the second bottomSheet a destination of NavHost but a regular BottomSheet. After which I realized that using this way everything works like a charm except one thing, and that would be the first BottomSheet not being hid while the second one is shown. Then I did go ahead to test out the similar behavior in Google's own Tasks app (which I mentioned in my comment on the first answer) and turned out it's the exact behavior there, too. So that's how devs at Google done it and this is the way to go.

Here is my code inside the first BottomSheet destination:

    var isSecondSheetVisible by rememberSaveble { mutableStateOf(false) }
    Button(
//        onClick = navigateToSelectListScreen,
        onClick = { isSecondSheetVisible = true },
        text = {...}
    )

    if (isSecondSheetVisible) ModalBottomSheet(
        onDismissRequest = {
            isSecondSheetVisible = false
    }) {
        SelectTaskListBottomSheetContent()
    }

Upvotes: 0

ianhanniballake
ianhanniballake

Reputation: 200130

This is not possible. As per the Navigation and the back stack documentation:

Dialog destinations implement the FloatingWindow interface, indicating that they overlay other destinations on the back stack. As such, one or more FloatingWindow destinations can be present only on the top of the navigation back stack. Navigating to a destination that does not implement FloatingWindow automatically pops all FloatingWindow destinations off of the top of the stack. This ensures that the current destination is always fully visible above other destinations on the back stack.

Bottom sheet destinations are also FloatingWindow destinations that float above the other destinations. As such, it is expected that they are automatically popped off the back stack when you navigate to anything other than another dialog or bottomSheet destination.

Upvotes: 6

Related Questions