Navigation in Kotlin Compose Multiplatform (KMP KMM)

Today’s tutorial will teach us how to implement Navigation in Kotlin Compose Multiplatform (KMP KMM) using JetBrains’ official navigation-compose library for Android, iOS, and web apps. This guide will integrate two screens. You can navigate from Screen_1 to Screen_2 with a button click.

Navigation in Kotlin Compose Multiplatform (KMP KMM):

Multiple libraries are available online to integrate navigation in Kotlin Compose Multiplatform apps like Voyager and Decompose. But our main aim is to use JetBrains’ official navigation-compose library for Navigation and routing. A shared codebase makes navigation easier and more consistent across Android and iOS. In this tutorial, we will set up a navigation-compose library in a KMP KMM project, creating two screens and navigating between them using NavController and NavHost.

1. Add Navigation Compose Dependency in the project:

1. The navigation-compose library is still in its beta mode, and at the time of creating this tutorial, the current version is navigation-compose:2.8.0-alpha10. Now, there will be updates in the navigation dependency, so please visit the official page from HERE before integrating the dependency and check out the version as well.

2. Open your KMP KMM project’s build.gradle.kts present in composeApp -> build.gradle.kts .

3. Inside the commonMain.dependencies { } block, add the navigation-compose library.

4. After adding the dependency, you have to sync the project. So, click on the Sync Now button. It will take a few minutes to download and install all the required packages for this dependency.

2. Start coding for the app:

1. This is the fire structure of the app.

2. Code for Navigation.kt file.

Code explanation:

1. Creating a Navigation Controller:

• Inside the function, a NavController is initialized using rememberNavController().
• This controller manages the screen transitions and navigation stack.

2. Setting up NavHost:

• The NavHost component defines the navigation graph.
• It connects the NavController to the available routes (screens).
• A start destination is specified to determine the default screen shown when the app launches.

3. Defining the First Route (“first_screen”):

• A navigation route is registered with the name “first_screen“.
• The UI from FirstScreen() is displayed when this route is triggered.
• The navigation controller is passed into FirstScreen() to navigate to other screens when needed.

4. Defining the Second Route (“second_screen”):

• Another route is registered with the name “second_screen“.
• This displays the content of the SecondScreen(), which is composable when navigated to.
• Again, the navigation controller is passed for consistent routing access.

5. Composable Screens (FirstScreen & SecondScreen):

• These are the UI screens that you define elsewhere in your project.
• Each one can include buttons or UI events that call the navController.navigate(“target_route”) to move between screens.

6. Navigation Lifecycle Awareness:

• Since rememberNavController() is used inside a Composable, it is automatically lifecycle-aware and recreated if needed.
• This helps keep the navigation stack reliable across configuration changes.

3. Code for FirstScreen.kt file:

Code explanation:

1. Composable Function: FirstScreen(navController: NavHostController):

• This function is annotated with @Composable, meaning it’s a building block of your UI.
• It takes a NavHostController as a parameter to allow navigation to other screens.

2. Button component

• onClick action triggers navController.navigate(“second_screen”), which navigates the user to the second screen.

Screenshot:

3. Code for SecondScreen.kt file:

Code explanation:

1. Button Component – Navigation Logic

• When pressed, it triggers navController.popBackStack(), which removes the top screen (this one) from the navigation stack, effectively taking the user back to the previous screen (FirstScreen).

Screenshot:

3. Code for App.kt file:

Code explanation:

1. Imports the navigation function you created earlier (AppNavigation):

• This makes the navigation logic composable in the root app, so it’s executed when it runs.

Screenshots on an Android device:

 

 

In Android, when I am using this package, I am seeing this warning log: “OnBackInvokedCallback is not enabled for the application. Set ‘android:enableOnBackInvokedCallback=”true”‘ in the application manifest.” To resolve this error, you have to put

In the AndroidManifest.xml file, in the application tag.

Code:

Thank you, Happy coding.