Have you heard of Voyager?
It's a multiplatform navigation library seamlessly integrated with Jetpack Compose.
I've learned some interesting things about it 👇
#kotlin #AndroidDev #JetpackCompose #ios
Yesterday I mentioned that I discovered this library and decided it was the perfect time to try it out
I thought it would be great to share my findings with others
I created an open source starter template with Compose mp and this navigation library
twitter.com/louisduboscq/status/1646491393987170306
Voyager is really interesting for Compose mp apps because it allows for shared navigation implementation across all platforms.
It integrates seamlessly with Compose's lifecycle and state management, making it a powerful and efficient solution for multiplatform navigation
To set up Voyager in your app, use the Navigator composable in your MainActivity (or any other activity that uses Jetpack Compose):
To navigate to a new screen using Voyager, call the push method of the Navigator instance.
Here's an example of how to navigate from the HomeScreen to the DetailScreen:
The code above initializes the Navigator with the HomeScreen as the starting screen.
When the user taps the “View details” button, the push method is called to navigate to the DetailScreen.
The LocalNavigator is used to obtain a reference to the current navigator instance.
Voyager provides an easy-to-use navigation stack that supports push, pop, and replace operations...
The lib includes a class called ScreenModel, which is similar to Android's ViewModel but is designed for multiplatform use (not tightly coupled to the Android framework).
ScreenModel can handle configuration changes and manages UI data with the UI lifecycle in mind.
The ScreenModel class includes a coroutineScope property, which is automatically cancelled when the ScreenModel is disposed.
With StateScreenModel's integrated mutableState property, devs don't need to manually define both a public StateFlow and a private mutableStateFlow for the same state.
This eliminates a lot of boilerplate code.
Voyager has good integration with Koin.
To define a Koin module for a screen model, you can use the factory method (Koin) and provide a lambda that returns an instance of the screen model :
After defining the Koin module for a screen model, you can inject the screen model in your screen using the getScreenModel() function from the Koin Voyager library :
Why you will love it?
• Easy stack api
• Reduces code duplication
• Seamless integration with Compose
• ScreenModel class for multiplatform state management
• Integrates well with popular Kotlin tools like Koin and Coroutines
• 1k stars on Github
Finally i sumed up this into a blog post , feel free to share
appkickstarter.com/blog/multiplatform-navigation-with-voyager
Star the open source repository to use it later :
github.com/AppKickstarter/KMPStarterOS
If you found this interesting, then you'll love my upcoming content where I'll be sharing more tips and tricks for mobile development.
If you want to help others in the mobile dev community, feel free to share this information with your friends.