0

In my project I'm using:

implementation "androidx.hilt:hilt-navigation-compose:1.1.0-alpha01"

Inside onCreate() I use:

setContent {
    val navController = rememberNavController()
    NavGraph(
        navController = navController
    )
}

And here is my very simple NavGraph:

fun NavGraph(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = "SignIn"
    ) {
        composable(
            route = "SignIn"
        ) {
            SignInScreen(
                onNavigateToForgotPasswordScreen = {
                    navController.navigate(Screen.ForgotPasswordScreen.route)
                }
            )
        }
        composable(
            route = "ForgotPassword"
        ) {
            ForgotPasswordScreen()
        }
    }
}

The problem comes when I try to navigate from SignInScreen to ForgotPasswordScreen. When I do that, the TopAppBar starts flashing / flickering. Somehow there is an animation, a crossfade that I don't want. How can I stop this from happening?

What I have tried, is to use Accompanist library, but according this the docs, it will be deprecated. I've searched all answers here and none was helping. How to solve this without Accompanist?

P.S.

Here is how a screen is represented:

fun SignInScreen {
    Scaffold(
        topBar = {
            SignInTopBar()
        },
        content = { padding ->
            SignInContent(
                padding = padding,
            )
        }
    )
Joan P.
  • 2,368
  • 6
  • 30
  • 63

1 Answers1

1

Make the AppBar part of the parent view at the setContent:

MyTheme {
     Scaffold(topBar = { MyTopAppBar() }) { paddingValues ->
         Surface(modifier = Modifier.fillMaxSize().padding(paddingValues),
              color = MaterialTheme.colorScheme.background) {
                        val startDestination = "tabs"
                        val navController = rememberNavController()
                        NavGraph(navController = navController)
                    }
                }
            }
Eliza Camber
  • 1,536
  • 1
  • 13
  • 21
  • Hey Eliza. Thank you for your response but I'm already using a Scaffold in each screen. I have edited my question. Please take a look. – Joan P. Jun 28 '23 at 12:49
  • I added the `Surface() { ... }` inside the content but I get the same behaviour. – Joan P. Jun 28 '23 at 12:58
  • The flickering happens because it's recomposing. The only way to stop it from flickering is to have 1 topbar; the content can be set after checking the current destination of the navController, and you should hide it for the screens you don't need it – Eliza Camber Jun 28 '23 at 13:56
  • So you basically say that I need to have the same TopBar in the entire app? So it's not about the Surface, right? – Joan P. Jun 29 '23 at 07:40
  • No, it's not the Surface. And yes, AFAIK the only way to stop recomposing the entire view is to use the same component everywhere. Then it will only recompose the composables that change (eg the title, icons etc). – Eliza Camber Jun 29 '23 at 09:13
  • I understand. I will also wait for other responses, maybe someone has other ideas. Thank you and voted-up. – Joan P. Jun 29 '23 at 09:19