:compass: Navigation : Nested navigation with `bottomSheet` :thread:

# compose

[theapache64]

🧭 Navigation : Nested navigation with bottomSheet 🧵

[theapache64]

What’s the correct way to implement nested navigation inside bottomSheet (Material Navigation)?

Can i use the navigation method?

ModalBottomSheetLayout{
    NavHost{
        composable("home"){}
        bottomSheet("detail"){
            navigation { ⬅️
                composable("a") {}
                composable("b") {}
                composable("c") {}
            }
        }
        composable("about"){}
    }
}

or should I use nested NavHost ?

ModalBottomSheetLayout{
    NavHost{
        composable("home"){}
        bottomSheet("detail"){
            NavHost { ⬅️
                composable("a") {}
                composable("b") {}
                composable("c") {}
            }
        }
        composable("about"){}
    }
}

🤔

[theapache64]

cc @Ian Lake

[Ian Lake]

The first doesn't do anything at all - you're calling a DSL builder method inside a random Composable

[theapache64]

Okay, i haven’t tried both. what abt the second one ?

[Ian Lake]

The second one seems like exactly the case where a nested NavHost would make sense (when the containing bounds of the NavHost are completely different)

[theapache64]

Cool.

[theapache64]

I’ve another follow up question. Suppose I am going from c to about , and when I press back from about, I need to go back to c , What’s the best way to do that?

Also note that, I can also go to about from home . Basically, about should be accessible from anywhere.

so what would be the best approach to do this?

[Ian Lake]

This is the same conversation we've already had, isn't it? You can't put a FloatingWindow destination like your bottom sheet on the back stack

[theapache64]

This is the same conversation we’ve already had, isn’t it?

Yes 😬

You can’t put a FloatingWindow destination like your bottom sheet on the back stack

Is there anyyyyy way I can make a regular destination transparent? I know its not available right now, but would it be possible if I raise a feature request? OR it’s completely impossible with respect to navigation lib’s current architecture and i shouldn’t expect that feature in future versions? 😐

[Ian Lake]

I mean, you can use a dialog destination if you want it to be displayed above other floating windows and regular destinations

[theapache64]

but as soon as i navigate to a regular destination, the dialog will be removed, right? means, when i nav back it won’t go to the dialog but the previous regular destination. isn’t it ? 🤔

[theapache64]

as per my design, destination should have the ability to become transparent as well as back-navigateable.

[Ian Lake]

I'm saying that about could be a dialog destination, then you could navigate to it from your bottom sheet and go back to your bottom sheet when it closes

[theapache64]

Wow 😮 I didn’t know about dialog destination. Didn’t see this in documentation either. Is this new?

[Ian Lake]

It was added in alpha04, which came out July 1st: https://developer.android.com/jetpack/androidx/releases/navigation#2.4.0-alpha04

[theapache64]

alright 👍 that should fix my problem. thank you so much 🤝

[Colton Idle]

@theapache64 curious if you figured out your issue. Let me know!

[theapache64]

@Colton Idle nope. i thought dialog would fix, but dialogs are also not back-navigate-able from a regular destination

[Colton Idle]

I wonder if you can just fake it. i.e.

Box{
YourContent()
FakeModal()
}

FakeModal is fullscreen, but it's just a transparent black background with a card in the middle. Effectively just faking it.

[theapache64]

My navigation graph is very dynamic and complex. Moving with a hack would be only a temporary solution. As the complexity increases, backstack management will become a pain in the ass.

The suggested solution would work for small/medium apps. In fact, the same behaviour can be achieved with a combination of dialog destination and saveState/restoreState flags. The problem is, we’ll need to na*vigate to the previous screen to navigate back the dialog*.

[Colton Idle]

Yeah. I mean I don't think dialogs ever stay on the back stack even in fragment based nav.

[Colton Idle]

https://developer.android.com/guide/navigation/navigation-navigate#back-stack

"My navigation graph is very dynamic and complex." I can't really relate to that so maybe I'm not seeing something that you are. In general though... navigation never supported floating windows in the backstack which is the main reason why I asked

"@theapache64 curious if you figured out your issue. Let me know!"

I was curious if you knew something I didn't know about it. lol. If anything... I think there are a few other libs for navigation. Zach Klippenstein (he/him) [MOD] has one I believe, and decompose is another mpp nav lib I think too.

[theapache64]

Yeah. the above given illustration is correct. My problem is i want to nav back to dialog from regular destination which is impossible at the moment 😄

[Colton Idle]

Yep. I'd try another nav library

[Colton Idle]

or create your own modal composable

[theapache64]

Yeah, I’ve decided to move with custom nav lib.