Member-only story
Jetpack Compose navigation simplified with Voyager for Android & Kotlin Multiplatform
How to implement a bottom bar with nested navigation graphs by example..
Implementing navigation in a bug-free, clean and easy to comprehend way can be a bit of a cumbersome or even daunting process if you have not fully delved into the matter before.
Recently I was faced with refactoring an app’s UI from Android’s old XML standard to fully using Jetpack Compose. With that consequently also came the desire to refactor the navigation from a Fragment-based Jetpack Navigation to Navigation Compose.
Next to that, since the app is being develop for Kotlin Multiplatform, the newly choosen navigation system should also accomodate for this requirement of working on non Android platforms.
There are a couple of libraries out there that provide a solution for the KMP environment. Most notably I found Decompose and Voyager; Decompose being more than just a library one can use for handling Compose Navigation.
Voyager stood out for me in it’s simplicity and minimization of boiler plate code that one needs to write to get a project up and running, even when consider slightly complexer (and very common!) use cases like having a bottom bar to navigate between screen and having nested navigation graphs for each BottomNavigation item including store their states.
Below I’ll describe the step necessary for creating a simple single Activity app with a bottom bar, all Compose UI and the usage of Voyager for handling navigation.
If you want to check out the fully working app you can find it’s source code at my GitHub Repo.
Project setup
To get started we need to add a couple of dependencies to our project.
The androidx.compose.material library contains the BottomNavigation component we’ll make use of. And the voyager artifacts are required for implementing our bottom bar “tabbed” navigation.
