How about nested nav graph in Jetpack Compose

[freeletics]

How about nested nav graph in Jetpack Compose

[gabrielittner]

I assume that Auth Nav and Home Nav completely separate graphs that are not used at the same time. From the navigation side the only special thing would be the tabs. For those you simply use NavRoot instead of NavRoute for the tab destinations themselves. When you then call navigateToRoot(TabXNavRoot) the library will take care of the back stack management. There is an optional parameter whether the back stack of the passed in root should be restored and the next release will also add an optional parameter whether the current back stack should be cleared.

For sharing the view models between screens there are 2 variations

• if you are not using whetstone you'd need to use some APIs that are marked as internal, then you could get the destination id for register step 1 and through that obtain the view model, there will be some changes here in the next release (will be out mid January)
• if you are using whetstone you can use @NavEntryComponent which unfortunately is not documented yet (#255), essentially you'd do something like this

@ComposeScreen(
    scope = Register1Scope::class,
    parentScope = RegisterSharedScope::class,
    stateMachine = ExampleStateMachine::class,
)
@NavDestination(
    route = Register1Route::class
    type = DestinationType.SCREEN,
    destinationScope = AppScope::class,
)
@NavEntryComponent(
   scope = RegisterSharedScope::class,
   parentScope = AppScope::class,
)
@Composable
internal fun Register1Screen(...) { ... }

(the annotations will be simplified in one of the next releases to reduce boilerplate)

This will create a component that will be alive as long as Register Step 1 is on the back stack. The following screens can then also use RegisterSharedScope as their parent scope (those other screens don't need @NavEntryComponent). With this you could then simply add @ScopeTo(RegisterSharedScope::class) to any class you want to make it shared between all screens that have RegisterSharedScope as their parent.

[gabrielittner]

Our nav graphs are completely flat and more a collection of destinations than an actual graph. This has been working well for us with fragments for the past 3 years and compose for the past year. What is your use case for nested graphs?

[hoc081098]

With the normal way, I am having:

• Auth Nav
  • Login
  • Register Step 1
  • Register Step 2
  • Register Step 3
• Home Nav
  • Tab 1 Nav
    • ...
  • Tab 2 Nav
    • ...
  • Tab 3 Nav
    • ...
  • Tab 4 Nav
    • ...
• ...
  My use case is that I want Register Step 1 Fragment, Register Step 2 Fragment, and Register Step 3 Fragment
  to use the same ViewModel scoped to Auth Nav scope.

[hoc081098]

thank @gabrielittner for the detailed explanation.
I got the idea, we will use the ViewModel scoped to the Register Step 1's EntryNav.