Jetpack Compose Hide BottomNavigation When Navigate to New Screen

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).

@Composablefun 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) }                }            }        }    }}

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.