On using BottomNavBar and NavGraph When using Bot...

# compose

[Clament John]

On using BottomNavBar and NavGraph

When using Bottom Nav Bar we have to use a Scaffold and pass a NavHost to the content parameter for it to work. But for apps with multiple screen with and without the bottomNavBar (consider instagram home screen and it's user profile screen) - how do we manage navigation? Why isn't there a better approach here?
Currently the options we have are (if we wish to use BottomNavBar + other screens without the NavBar)
1. A single Scaffold and a single ViewModel that keeps track of the current screen and conditionally sets the TopBar, BottomNavBar, and content
a. Bad because the VM is too large and bloated
b. example -

gif▾

and the accompanying article
2. Start a new activity when you wish to move from the BottomNavBar activity
Questions
1. How to use NavGraphs and BottomNavbar?
a. Consider this example
i. splash screen
ii. login
iii. home screen with bottom nav
iv. profile screen
v. create new video screen

[Clament John]

We have to use a NavHost inside the Scaffold content to tell the system you want to switch composables inside the layout with the bottomBar .

This is the main issue. How can I have a parent NavHost with other routes and a Home route with its own NavHost . This won't work as we can't have nested NavHosts

[Clament John]

It seems the recommended solution (from reading multiple threads here on Slack and on the internet) is Use a single scaffold and set, unset appbar, bottomNavBar
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1627998794388300?thread_ts=1627934500.323000&cid=CJLTWPH7S

[Clament John]

Another thread
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1620346074115700

Again recommending a single Scaffold with NavHost inside as the content

[Ian Lake]

A single NavHost and controlling the visibility of global UI based on what destination you are on has always been the recommendation for Navigation, whether it is Navigation Compose or Navigation with Fragments

[Clament John]

@Ian Lake If I have to use BottomSheetScaffold and Scaffold I'll need to use a conditional

if (currentScreen == Screens.WithBottomSheet) {}
else if (currentScreen == Screen.WithBottomNav) {}

Is this fine? Does it have performance drawbacks?

Also I'll need to remember both Scaffold and BottomSheetScaffold states throughout the appplication

[K Merle]

I had an implementation where I'd show and hide top and bottom bars inside of the nested NavHost. One problem I had is when I use animations between screen where first screen shows and second does not show top bar I would get that bump where suddenly your top bar disappears during animation.

What I actually did is I left nested NavGraph main screens and child screens hoisted to the root navigation. This way I did not need to hide top and bottom bars of nested NavGraph, and I could still have nice looking animations when going from Account -> AccountChild screen.