On using BottomNavBar and NavGraph When using Bottom Nav Bar

Question

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 and the accompanying 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 · Answer

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 · Answer

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 amp cid=CJLTWPH7S>

Clament John · Answer

Another thread <https kotlinlang slack com archives CJLTWPH7S p1620346074115700> Again recommending a single Scaffold with NavHost inside as the content

Ian Lake · Answer

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 · Answer

< 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 · Answer

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 gt AccountChild screen