Jetpack Compose Hide BottomNavigation When Navigate to New Screen

November 3, 2021

Refer to Jetpack Compose Navigation using BottomNavigation and also navigate to a new screen.

You use navController to check if current destination is part of the BottomNavigation's screen (show BottomNavigation if it is).

@Composable
fun JourneyApp() {
    JourneyTheme {
        val navController = rememberNavController()

        val onBack: () -> Unit = {
            navController.popBackStack()
        }

        val screens = listOf(
            Screen.Home,
            Screen.Collections,
            Screen.UserProfile
        )

        val showBottomBar = navController
            .currentBackStackEntryAsState().value?.destination?.route in screens.map { it.route }

        // https://developer.android.com/jetpack/compose/navigation
        Scaffold(
            bottomBar = {
                if (showBottomBar) {
                    BottomNavigation {
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentDestination = navBackStackEntry?.destination
                        screens.forEach { screen ->
                            BottomNavigationItem(
                                icon = { Icon(imageVector = screen.icon, contentDescription = screen.label) },
                                label = { Text(screen.label) },
                                selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
                                onClick = {
                                    navController.navigate(screen.route) {
                                        // Pop up to the start destination of the graph to
                                        // avoid building up a large stack of destinations
                                        // on the back stack as users select items
                                        popUpTo(navController.graph.findStartDestination().id) {
                                            saveState = true
                                        }
                                        // Avoid multiple copies of the same destination when
                                        // reselecting the same item
                                        launchSingleTop = true
                                        // Restore state when reselecting a previously selected item
                                        restoreState = true
                                    }
                                }
                            )

                        }
                    }
                }
            }
        ) { innerPadding ->
            Box(modifier = Modifier.padding(innerPadding)) {
                // nav graph
                NavHost(navController = navController, startDestination = Screen.Home.route) {
                    // add new navigation function
                    composable(Screen.Home.route) { HomeScreen(navigateToImportPhoto = { navController.navigate("importPhoto") }) }
                    composable(Screen.Collections.route) { CollectionsScreen() }
                    composable(Screen.UserProfile.route) { UserProfileScreen() }

                    // new screen, not part of bottom nav
                    composable("importPhoto") { ImportPhotoScreen(onBack = onBack) }
                }
            }
        }
    }
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.