Hi, I have a bottom nav bar that I want to displa...

# compose-android

[M Saif Ullah]

Hi,

I have a bottom nav bar that I want to display only on top level destinations. Each of my bottom nav item has nested screens. How can I show the bottom nav bar only on the top screens and not on the nested screens?

I'm trying to achieve this with listening to desitanion chages on the main screen and hide/show the nav bar but that makes the navigation very clumsy e.g. When I navigate to one of the nested screens, the nav bar hides and makes the home screen UI go down a little before actually navigatig to the nested screen, and the same happens when I navigate back from nested screen. See the Video attached below.

Thanks

[M Saif Ullah]

val rootNavController = rememberNavController()
val currentNavBackStackEntry by rootNavController.currentBackStackEntryAsState()
val isHomeScreen = currentNavBackStackEntry?.destination?.hierarchy?.any {
    it.hasRoute(NavGraphs.Home::class) ||
            it.hasRoute(NavGraphs.Transactions::class) ||
            it.hasRoute(NavGraphs.Category::class) ||
            it.hasRoute(NavGraphs.Profile::class)
} == true

[M Saif Ullah]

floatingActionButton = {
    if (isHomeScreen) {
        MainFab {
            rootNavController.navigate(NavGraphs.AddExpense(it))
        }
    }
}

[M Saif Ullah]

screen-20240820-170404~2.mp4

screen-20240820-170404~2.mp4

[Alexandru Caraus]

Try to Wrap the navhost of the screen holding the bottom bar, in another nav host, and place those full screens in the outer navhost

[Alexandru Caraus]

Should work theoretically