Jetpack Compose TopAppBar flickers after setting BottomNavView with Navigation component

Question

Working on a Jetpack Compose app with a BottomNavigationView and Navigation component, I did the usual setup for the bottom bar inside the activity:

val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
navigationView.setupWithNavController(navController)

In each screen I am using a composable TopAppBar. Unfortunately, after adding the setupWithNavController call, the TopAppBar started flickering in all the navigation bar destinations (but not in deeper destinations).

How can I fix the flickering?

Answer 1

I got the same issue. What helped, to my surprise, was lowering androidx.navigation:navigation-compose version to 2.4.0-alpha04.

Answer 2

I cannot answer you exactly how to fix the flickering, but I can tell you that the recommended way to work with a Navigation component, TopBars and BottomBars in Jetpack Compose, is to use the Scaffold component and the navigation-compose component.

Compose Navigation component dependency:

// Navigation
implementation "androidx.navigation:navigation-compose:1.0.0-alpha09"

It is still in alpha, but so far it has been working really well. Just try to keep posted about all updates.

Example usage:

@Composable
fun App() {
    val navController = rememberNavController()

    Scaffold(
        topBar = {
            TopAppBar {
                Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
                    Text(text = "App Title")
                }
            }
        },
        bottomBar = {
            BottomAppBar {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    TextButton(onClick = { navController.navigate("home") }) {
                        Text(text = "Home")
                    }
                    TextButton(onClick = { navController.navigate("favorites") }) {
                        Text(text = "Favorites")
                    }
                    TextButton(onClick = { navController.navigate("profile") }) {
                        Text(text = "Profile")
                    }
                }
            }
        }
    ) {
        NavHost(navController, startDestination = "home") {
            composable("home") {
                Home()
            }
            composable("favorites") {
                Favorites()
            }
            composable("profile") {
                Profile()
            }
        }
    }
}