Hi all. I've been testing decompose navigation as ...

# decompose

[Mateu]

Hi all.
I've been testing decompose navigation as a POC for a new app. I share my example here if anyone needs it:
https://github.com/mateuy-dev/DecomposeNavigationSample

To do the navigation I've used many different nested navigations (a kind of a tree).
• One Top Child slot to automatically navigate from authentication to authenticated depending on authentication flow.
◦ One Stack inside authenticated to move between bottom bar options
▪︎ One stack inside the screen selected in the bottom bar to navigate inside it.
Is this a correct approach?

[Arkadii Ivanov]

One Top Child slot to automatically navigate from authentication to authenticated

Is there any reason for using Child Slot for auth flow? I would implement it as a stack in the root. You can extract the auth flow to a separate AuthComponent. When you need to start the auth flow in the root, you can just replaceAll(Config.Auth). Once auth is ok, you can replaceAll(Config.Main) , where MainComonent manages the authenticated sub-tree.

One stack inside the screen selected in the bottom bar to navigate inside it

This is valid if you need your stack to never cover the bottom bar (i.e. always inside the selected tab).

[Mateu]

The auth flow itself is not done, but would be done with a BackStack in AuthComponent.

What I've done is, insted of having a centralized BackStack that is what you propose (if I understood it correctly) I've created a different navigations with subnavigations.

The main app can be either in Splash, Authentication, Authenticated (main). You can't go back, so no need for an Stack. I've used a child slot.

The main has tabs, and I want to user to be able to go to the last selected tab, so I've created a Stack in the AuthenticatedComponent.
Inside one of the tabs there is subnavigation. I've created a new stack in this component.
As I said, Authentication is not done, but if so, I would create a new Stack in authentication Component.

> This is valid if you need your stack to never cover the bottom bar (i.e. always inside the selected tab).
I hide bottom bars. The main component check the subnavitation in orther to display or not the bars. For now its done in a not generic way, but was ok for the POC.

[Arkadii Ivanov]

The main app can be either in Splash, Authentication, Authenticated (main)

This is essentially what I proposed. 👍

I've used a child slot.

I'd recommend to use Child Stack instead. Child Slot can be empty (null), whereas Child Stack can't. It still makes sense even if you need to disallow going back. Just don't pass handleBackButton argument.

I hide bottom bars.

That's up to you, but with decompose you can avoid doing this. You can have your Authenticated component to manage a stack of full-screen components. Then you can have HomeComponent with bottom bar and it's own stack of non-fullscreen components (tabs).

[Mateu]

That's up to you, but with decompose you can avoid doing this. You can have your Authenticated component to manage a stack of full-screen components. Then you can have HomeComponent with bottom bar and it's own stack of non-fullscreen components (tabs).

What you propose is having a stack for fullscreen components. In a component of this 1st stack, another stack of screens with bottom bar. If a child component of the 2n stack needs to go full screen we add it as a child of the main 1st stack.
Is this it?

[Arkadii Ivanov]

That's correct, and from my point of view it's also logical. As your fullscreen child needs to cover the bottom bar. With the predictive back animation you also want to see the previous screen with the bottom bar.