DEV Community

Eric Donovan
Eric Donovan

Posted on

I've just open sourced N8

Hiya

N8 is a pure kotlin, state based navigation library.

I've open sourced it a bit earlier than I usually would have 😬 but that means there is still stuff to do if anyone is interested...

There are some easy issues added already, but there is also more juicy stuff available (to do those, you'll need to understand what's there first though).

I think it's turning into something I'd like to use... but it's early days still.

It's a pretty small library, about 1000 lines at the moment. And the idea is to handle a back stack of locations for you, as your user navigates around the app.

The client code can call functions like this:

n8.navigateTo(Paris)
n8.navigateTo(Seoul)
n8.navigateTo(NewYork)
n8.navigateBack()
n8.navigateTo(Bangkok)
Enter fullscreen mode Exit fullscreen mode

And N8 would maintain an immutable navigation state that looks like this:

backStackOf(
    endNodeOf(Paris),
    endNodeOf(Seoul),
    endNodeOf(Bangkok), <--- current location
)
Enter fullscreen mode Exit fullscreen mode

You can use it to pass data to new locations, or pass data back to previous locations, it handles nested tab style navigation, handles screen rotations, persistence, deep links etc, and you can use it to drive the UI for a compose app like this:

setContent {

  N8Host { navigationState ->

    // this code runs whenever the navigation
    // state has changed e.g. the user has
    // pressed back or navigated to a new page

    val location = navigationState.currentPage()

    ModalNavigationDrawer(
        drawerContent = ...
        content = ...
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

The navigation state can get pretty complicated when nested tabs are involved:

backStackOf(
    endNodeOf(Welcome), <-- home location
    tabsOf(
        selectedTabHistory = listOf(0,2),
        tabHostId = "TABHOST_MAIN",
        backStackOf(
            endNodeOf(MyFeed),
            endNodeOf(Trending),
        ),
        backStackOf(
            endNodeOf(Subscriptions),
        ),
        backStackOf(
            endNodeOf(MyAccount),
            endNodeOf(Settings),
            tabsOf(
                selectedTabHistory = listOf(0),
                tabHostId = "TABHOST_SETTINGS",
                backStackOf(
                    endNodeOf(Audio),
                    endNodeOf(Dolby), <-- current location
                ),
                backStackOf(
                    endNodeOf(Video),
                )
            )
        ),
    )
)
Enter fullscreen mode Exit fullscreen mode

But the idea is that N8 handles all that (and calculating the back operations) for you.

Early feedback and PRs welcome!

Eric

PS it also needs a logo...

Top comments (0)