# compose

Solomon Tolu Samuel

01/23/2022, 4:56 PM
Hello, I find my self in this situation where I have a Home screen (with a bottom navigation bar of three other screens) and a login screen. I tried having multiple navhosts like having a navhost for the entire app and another just for the home route with the bottom bar – that didn't work. I also tried nested navigation, but I am not able to utilize the NavGraphBuilder extension function in the home screen with the bottom bar. Please, do anyone have an idea of how I can structure the navigation?

Colton Idle

01/23/2022, 5:07 PM
I have an app that works like this. I just have a single NavHost. I have 4 destinations (Tab1, Tab2, Tab3, Login) and start destination is Tab1. Tab1 checks if I'm logged in, if not then it uses LaunchedEffect to navigate to Login screen. My App() composable is a column that consists of a NavHost() and BottomNavigation(). The bottom navigation hides and shows based on
Copy code
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
My logic for the above was taken from 3 places: 1. Ian Lakes help on #compose (would literally be lost without him 🙏 ) 2. Docs on compose + nav + bottom nav 3. Docs on handling VM events has login/logout as an example. Super helpful: Overall, it sounds like you're on the right track but you need to move your navigation bar up one level.

Solomon Tolu Samuel

01/24/2022, 2:17 AM
Thanks, a lot. Got it to work.
👍 1