hi everybody! I don’t know if this has already been asked around here, but here’s my question: I have a composable which is the one inside my main content, that has a scaffold with a top bar, a content and a bottom navigation bar. I’m creating more composables in the content part, and in this case I have a

LazyColumnFor

, and I’m also using the navigation for compose. My question is that when I click on an item from the composable that has the

LazyColumnFor

I’m navigating to the detail composable of that item (let’s call it

ItemDetail

) and here, I see that the content is between the top bar and the bottom nav bar of the scaffold of the parent component. Is it possible to have a reference to the top bar and the bottom nav bar? For example I want to add the back arrow to the top bar for the up navigation. Thanks in advance!

Your navhost is a child of the scaffold?

yes; it’s actually created inside the content of the bottomBar

Unless I’m reading something wrong, it looks to me like your NavHost is in the main body slot of the scaffold, not the bottom bar

Yep, the whole reason you use

rememberNavController()

outside of the NavHost itself is to hook up other things to changes in the NavController

Hi @Ian Lake, in relation to this.. doing something like this, is correct right?

val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()

Scaffold(
    bottomBar = {
        //----------- This right here -------//
        val isBottomBarVisible = navBackStackEntry?.arguments?.getString(MY_KEY) 
        //----------- This right here -------//

        if (isBottomBarVisible) {
            MyBottomBar()
        }
    }
) {
    NavHost(navController, startDestination = Screen.Profile.route) {  
        composable(Screen.Profile.route) { 
            Profile(navController) 
        }
        composable(
            Screen.MyScreen.route + "?${MY_KEY}=MY_KEY",
            ....
        ) { 
            MyScreen(navController) 
        }
    }
}

I figured I could also do something like this and achieve the same...

val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val isBottomBarVisible by rememeber { mutableStateOf(false) }

Scaffold(
    bottomBar = {
        if (isBottomBarVisible) {
            MyBottomBar()
        }
    }
) {
    NavHost(navController, startDestination = Screen.Profile.route) {  
        composable(Screen.Profile.route) { 
            Profile(navController) 
        }
        composable(
            Screen.MyScreen.route
        ) { 

            //----------- This right here -------//
            onCommit(navBackStackEntry) {
                isBottomBarVisible = true
            }
            //----------- This right here -------//

            MyScreen(navController) 
        }
    }
}

Was wondering if both approaches are valid?

Well, the former is using a single source of truth to automatically recompose your bottom nav in the same recomposition that the current destination changes and swaps from visible to not visible and back again while the later is building a whole other state that is set to true as a side effect of one destination being composed, forcing a second recomposition (since onCommit happens after the first composition finishes) and then never set back to false. So no, those aren't equivalent at all

I see... thank you very much!

thanks a lot guys!

@Ian Lake How about for things that couldn't be passed in as parameter? like Callbacks?

val navController = rememberNavController()
var onCloseClick: (() -> Unit)? = null

Scaffold(
    topBar = {
        TopAppBar(
            ...,
             actions = {
                 IconButton(onClick = {
                     onCloseClick?.invoke()
                  }) {
                      Icon(asset = Icons.Default.Close)
                   }
             }
         )
     },
) {
    NavHost(
        navController = navController,
        startDestination = ScreenA.route,
    ) {
        composable(startingRoute) {
            // ------- This here ------- //
            onCommit(currentBackStackEntry) {
                onCloseClick = {
                    // Do something
                }
            }
            onDispose {
                onCloseClick = null
            }
        }
        composable(otherRouter) {
            // ------- This here ------- //
            onCommit(currentBackStackEntry) {
                onCloseClick = {
                    // Do something else
                }
            }
            onDispose {
                onCloseClick = null
            }
        }
    }
}

thanks man!

No animation support as of yet - the previous thread we discussed animations in was https://kotlinlang.slack.com/archives/CJLTWPH7S/p1604093221008800, the issue you can star is https://issuetracker.google.com/172112072

Thanks a lot for the info @Ian Lake and keep up the good work! 👏