# compose

Clament John

11/16/2021, 5:09 AM
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 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
We have to use a
inside the Scaffold content to tell the system you want to switch composables inside the layout with the 
. This is the main issue. How can I have a parent NavHost with other routes and a Home route with its own
. This won't work as we can't have nested NavHosts
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
Another thread Again recommending a single Scaffold with NavHost inside as the content

Ian Lake

11/16/2021, 6:39 AM
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

11/16/2021, 7:01 AM
@Ian Lake If I have to use BottomSheetScaffold and Scaffold I'll need to use a conditional
Copy code
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

11/16/2021, 7:49 AM
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.