If I have the following navigation structure in my...

# compose

[eygraber]

If I have the following navigation structure in my app:

login
main
  main-bottom-nav1
  main-bottom-nav2
  main-bottom-nav3
admin
  admin-bottom-nav1
  admin-bottom-nav2
  admin-bottom-nav3

where main and admin have their own separate scaffolds with top app bar and bottom nav bar, and login doesn't have a scaffold.

Can I navigate between bottom nav items within each group without using a nested NavHost and without having to redraw the whole scaffold?

For example can I navigate from main-bottom-nav1 to main-bottom-nav2 without redrawing/recomposing `main`'s scaffold?

[Stylianos Gakis]

You either have to have a have a global scaffold or wait for the .sharedElement modifiers to come in the next animation alphas and use that. Those are pretty much your options here.

[Stylianos Gakis]

We have the “global scaffold” approach here which impl is here.

[eygraber]

Do you have any screens that go "over" the scaffold?

[Stylianos Gakis]

No, we do not, if I understand what you mean here properly.
Just what you see here, and the fact of if the navigation bar is shown or not is purely driven by this here.

[Stylianos Gakis]

What would you want to show above the scaffold? and is that part of your NavHost content?

[eygraber]

For example, if a user clicks on a button on one of the bottom nav screens, I want to show a new screen that takes up the whole window, but is logically nested under the screen with the scaffold.

So I might display a list of albums in a bottom nav screen, and when the user clicks an album, I want to open a new screen that "covers" the scaffold, showing all the photos in the album.

[Stylianos Gakis]

Yeah sounds like to me you just want to hide the navigation bars from the scaffold in those cases then.
We do the same. We show the scaffold for the “top level” screens, and then a select few more, but for the rest the scaffold hides itself.

[eygraber]

I have to think more on that. It's an interesting approach, but technically this isn't a top level screen. I do have other to level screens without a scaffold, but those are logically siblings of the scaffold screen.

[Stylianos Gakis]

Yeah notice how here we just have a way to “opt-in” to have the nav stuff show on a per-screen basis. Whether it’s not level or not that’s not a blocker here.
The screens without a scaffold just don’t opt-in to this.

[Stylianos Gakis]

If you can wait like 2-3 months though or are okay with using experimental compose you can also just go with shared element transitions https://x.com/GakisStylianos/status/1776910738616959118
Put the scaffold stuff on a per-screen basis (use a shared composable to make this easy) and mark them with the same shared element ID and this will just work there.
I do this in this video with the top app bar, but doing it for the navigation bar should be the exact same thing.

[eygraber]

I'll probably have to wait because I'm using CMP but that's also a cool idea

[Stylianos Gakis]

Yeah, that’s the “proper” solution tbh, the global nav one has caveats like people clicking the thing as it is animating out if they are quick, so you need to guard for that, or if there’s no animation then you get some jumpy layouts and. Shared elements make this very crisp. And the screen animating does not have to have a different animation (like screen sliding sideways as the nav bar slides down), it will all go away together as it should.

[eygraber]

So with the shared element transition, if the screen that is transitioning in does not have the shared element it would just animate out?

[Stylianos Gakis]

Exactly, it should just act as if there was no shared element and move exactly along with the rest of the screen.

[Stylianos Gakis]

And vice versa, if you come into a screen which has a shared element but in your current screen you don't have it, it just comes normally with the rest of the screen.

Think of this sample https://twitter.com/GakisStylianos/status/1776691881243553937?t=gejNt0CbE5O7gXGtwJ40lA&s but if you've scrolled enough down that the card is no longer on the screen (in a lazy column) then you just shouldn't get this animation playing.

[eygraber]

Looking forward to playing around with it 😅