Thoughts on this concept for a Jetpack Compose navigation library supporting nested NavHosts?

46 views Asked by At

While working on an Android app recently, I was disappointed to find that the default Jetpack Compose navigation library does not support nesting Navhosts inside other Navhosts. The reason I wanted to do this is to allow for sharing of common UI elements between different screens. I have a set of screens that all share a navigation bar on the side of the screen, but I also have some other full-screen screens that should not include the navigation bar. However, accomplishing this with Navhosts seems impossible without messy hacks that also ruin the animated transitions between screens.

I am relatively new to Jetpack Compose and Android development, but I wanted to try my hand at implementing a solution as a learning experience. I decided to make a proof of concept navigation system that supports nesting NavHosts. It's extremely minimal and shouldn't be used in its current state, but I think its enough to showcase my idea.

Below is a simplified example of what it looks like. Note that PageSwitcher replaces NavHost, and all PageSwitchers have to be called within a PageNavigationRoot.

PageNavigationRoot(
    startingRoute = "Tabs/Tab1",
    transitionSpec = fullScreenTransition
) {
    PageSwitcher() {
        page("Tabs") {
            Column() {
                PageSwitcher() {
                    page("Tab1") {
                        // composable here
                    }
                    page("Tab2") {
                        // composable here
                    }
                }
                BottomNavigationBar()
            }
        }
        page("FullScreenPage") {
            // composable here
        }
    }
}
val nav = rememberLocalPageNavigator()

nav.navigateTo("Tabs/Tab2")

A full example app with the source code can be found on GitHub. A higher quality video can be found there, but here's a demo:

enter image description here

I'd appreciate any thoughts on this idea, and whether or not it has already been done before. I'd like to add in more of the features that most navigation libraries have so this can become a usable alternative, but digging into the the source code of the default navigation library makes me think that's above my pay grade for the time being.

0

There are 0 answers