Purpose of the article: A simple guide for implementing basic navigation using Voyager Library in Compose Multiplatform.
Intended Audience: Technology Experts
Tools and Technology: SAP Analytics Cloud Tool.
Keywords: Kotlin, Compose Multiplatform, Voyager Library, Android, iOS, Navigation.
Kotlin has emerged as a versatile and powerful programming language in the ever-evolving software development landscape. Its ability to seamlessly combine concise syntax with interoperability has made it a favorite among developers. One of the exciting developments in the Kotlin ecosystem is Jetpack Compose Multiplatform, a framework that extends the reach of Compose UI beyond Android to various platforms. In this blog post, we will explore Compose Multiplatform’s potential for building stunning user interfaces across different devices.
What is Jetpack Compose Multiplatform?
Jetpack Compose is a cutting-edge UI toolkit revolutionizing the creation of native Android applications through its innovative approach and features. Compose Multiplatform takes this a step further by extending the power of Compose to non-Android platforms. This means you can use the same UI codebase to create user interfaces for Android, iOS, and other media, promoting code reusability and efficiency.
Key Features of Compose Multiplatform:
1) Code Sharing:
Compose Multiplatform allows developers to share a significant portion of the UI codebase across different platforms. This trims down the development time and guarantees a seamless and uniform user experience.
2) Declarative UI:
Just like Compose for Android, Compose Multiplatform adopts a declarative UI approach. Developers describe the UI concisely and intuitively, and the framework updates the UI based on the underlying state changes. This leads to more readable and maintainable code.
3) Platform-Specific Adaptations:
While sharing code is a significant advantage, Compose Multiplatform acknowledges the need for platform-specific adaptations. Developers can use conditional logic to handle platform-specific features or design patterns, ensuring a native look and feel on each platform.
4) Integration with Native APIs:
Compose Multiplatform seamlessly integrates with native APIs on different platforms. This means you can leverage platform-specific features and capabilities when needed, providing a native experience for users.
The Voyager Library: A Brief Overview
The Voyager Library is a navigation library designed for Kotlin Multiplatform projects. It builds on the principles of Compose and enables developers to define navigation routes and transitions declaratively. Whether you’re targeting Android, iOS, or other platforms, Voyager offers a consistent and efficient way to handle navigation in your Compose Multiplatform applications.
Setting Sail: Basic Navigation with Voyager
1. Integration into your Project
Let’s integrate the Voyager Library into our Compose Multiplatform project to begin our navigation exploration. Add the necessary dependencies and configurations to your shared code and platform-specific modules.
This library supports Android, iOS, and Desktop.
2. Create Screens
Within Voyager, screens manifest as classes with a composable function as the entry point. Crafting one involves implementing the Screen interface and overriding the Content() composable process. Whether leveraging a data class for parameter transmission, a regular class for scenarios sans parameters, or an object convenient for tabs, the flexibility in implementation enhances versatility.
I have created two screens in the Shared Folder— FirstScreen and Second Screen.
First Screen:
For the initial Screen, I have implemented a primary button. When the button clicks, the user-triggered action initiates, i.e., navigating to the second Screen and carrying the relevant user data.
Second Screen:
On the second Screen, I presented the user data retrieved from the first Screen.
3. Create Navigator and invoke this from different platforms(Android, iOS, etc.)
Navigator, a composable function intricately woven into Compose internals, adeptly handles lifecycle, back press, state restoration, and nested navigation seamlessly. To use it, simply designate the initial Screen and invoke MainApp() from different platforms.
MainApp.kt
Android — MainActivity.kt
Desktop — main. kt
iOS — main. ios. kt
4) Sample Output
Android:
iOS:
Desktop:
Smooth Sailing: Real-World Applications
Voyager Library shines in scenarios where a consistent navigation experience is essential across diverse platforms. Some real-world applications include:
- E-commerce Apps: Seamlessly navigate between product listings, details, and shopping carts.
- Social Media Apps: Move effortlessly between the feed, user profiles, and messaging screens.
- Content Streaming Apps: Enable users to smoothly transition between different sections like home, search, and user preferences.
Conclusion:
In the vast Kotlin seas, the Voyager Library is a powerful ally for developers navigating the challenges of creating cross-platform applications with Compose Multiplatform. By simplifying the process of handling navigation, Voyager empowers developers to deliver a consistent and enjoyable user experience across various platforms. As you set sail on your Kotlin Compose journey, let the Voyager Library be your guiding star, steering you towards a smoother and more efficient navigation experience for your multiplatform applications. Bon voyage!
Author Bio:
Prabhu Sandhya PINISETTI
Sr Principal Software Engineer - Mobility-Digital Transformation
I am a Software Developer with 8 years of experience, excels in Native Android Development and embraces the versatility of Kotlin Multiplatform.
