IssueTracker

Component used: Navigation Version used: Jetpack Compose version:

const val compose = "1.0.0-alpha07"
const val nav_compose = "1.0.0-alpha02"

Android Studio Version:

Android Studio 4.2 Canary 16
Build #AI-202.7660.26.42.6939830, built on October 29, 2020

When following the Bottom Nav Bar section of Navigation with Compose:

val navController = rememberNavController()
Scaffold(
    bottomBar = {
        BottomNavigation {
            val navBackStackEntry by navController.currentBackStackEntryAsState()
            val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
            items.forEach { screen ->
                BottomNavigationItem(
                    icon = { Icon(Icons.Filled.Favorite) },
                    label = { Text(stringResource(screen.resourceId)) },
                    selected = currentRoute == screen.route,
                    onClick = {
                        // This is the equivalent to popUpTo the start destination
                        navController.popBackStack(navController.graph.startDestination, false)

                        // This if check gives us a "singleTop" behavior where we do not create a
                        // second instance of the composable if we are already on that destination
                        if (currentRoute != screen.route) {
                            navController.navigate(screen.route)
                        }
                    }
                )
            }
        }
    }
) {

    NavHost(navController, startDestination = Screen.Profile.route) {
        composable(Screen.Profile.route) { Profile(navController) }
        composable(Screen.FriendsList.route) { FriendsList(navController) }
    }
}

Composable content from the NavHost Composable will show under the BottomNavigation composable because PaddingValues provided from the root layout are not applied to the NavHost.

A workaround for this is to place the NavHost composable inside Box and apply the padding values there:

 Box(modifier = Modifier.fillMaxSize().padding(bottom = insets.bottom)) {
        NavHost(...