Combine Bottom Navigation with NavHostController Jetpack Compose

Question

I am trying to implement navigation in my Android app using JetpackCompose. What I am trying to do is I have a Bottom Bar with 4 buttons (Home, categories, cart, settings) Each of this screens have its own navigationHostController and multiple screens inside that can be navidated forward and back. My problem is the following, when I use bottom nav button to navigate to othe screen, I want my NavHost to remember that screen I have left at and show it to me.

Example: In my Home tab i have Screen A, Screen B, and Screen C. I can Navigate A->B->C using button and also navigate back using the Back button. In my Category Screen I have Screen E and Screen D. If I am on my Home Tab Screen C and tap on my Category Tab, it will navigate me to the Category Tab, and if I click on Home Tab again, I will see Home Tab Screen A not the Screen C I was on when I left.

Is this funcionality Possible in Android? I come from iOS world and this is done automatically there. I am not putting any code in the question for now. Just want to know if this can be done in Jetpack and what would the steps be.

Thanks in advance!

I'm in the exact same situation coming from SwiftUI development and wondering why this is so complicated in Jetpack. Did you find a solution? — user1195883, Jun 28 '23 at 14:43
Thanks, unfortunately I still don't get it. Would you mind posting the full setup with the nested `navigationHostController`s? — user1195883, Jun 30 '23 at 11:41
Its so many different files, If you share your code par where you create your bottomBar in scaffold, Ill fix your code for you — Dave Kababyan, Jul 03 '23 at 06:30

Dave Kababyan · Answer 1 · 2023-07-05T06:32:35.970

0

I found the solution:

Scaffold(
    bottomBar = {
        B2CBottomBar(navController) {
            navController.navigate(it.route) {

                popUpTo(navController.graph.findStartDestination().id) {
                    saveState = true
                }

                launchSingleTop = true
                restoreState = true     //this is the part that preserves the state
            }
        }
    }
)

more detailed explanation can be found in Docs

edited Jul 05 '23 at 06:32

answered Jun 30 '23 at 07:55

Dave Kababyan

41
4

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 04 '23 at 08:36

Combine Bottom Navigation with NavHostController Jetpack Compose

1 Answers1