Implement Compose Navigation in Compose Multiplatform

Recently Google has announced official support for Kotlin Multiplatform in Google IO.

Now we have multi-platform support for some popular Jetpack Libraries like DataStore, Room, Navigation etc.

Till now we were dependent on third-party libraries like decompose, voyager etc. for handling navigation in our Compose Multiplatform projects.

Compose Multiplatform now supports the Jetpack Compose approach to navigation.

Note: The navigation library is currently Experimental.

The key components of Compose Navigation include:

• NavHost: The container for navigation graph that hosts the destinations.
• NavController: Manages app navigation within a NavHost.
• NavGraph: Defines a set of destinations and actions that represent the navigation structure.

Lets see the steps to implement it in our next project.

Step 1: Add Dependency

To use the navigation library, add the following dependency to your commonMain source set:

kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation("org.jetbrains.androidx.navigation:navigation-compose:2.7.0-alpha07")
        }
        // ...
    }
}

Step 2: Create Navigation Routes

Just as with Jetpack Compose create list of routes that should be included in the navigation graph. Each route must be a unique string that defines a path.

enum class SpotifyScreen(val title: StringResource) {
    Home(title = Res.string.home),
    MusicList(title = Res.string.music_list),
    MusicDetail(title = Res.string.music_detail),
    Profile(title = Res.string.profile)
}

Step 3: Setup Navigation Controller

Instantiate NavController and use it in your main composable.

val navController: NavHostController = rememberNavController()

Step 4: Create Navigation Graph

Define your navigation graph using a NavHost and NavController.

1. Choose the starting destination from the list of routes.
2. Create a navigation graph which included your list of routes(screens).

NavHost(
    navController = navController,
    startDestination = SpotifyScreen.Home.name,
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        .padding(innerPadding)
) {
    composable(route = SpotifyScreen.MusicList.name) {
        MusicListScreen(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        )
    }
    composable(route = SpotifyScreen.MusicDetail.name) {
        MusicDetailScreen(
            modifier = Modifier.fillMaxHeight()
        )
    }
}

That’s it. You are ready to navigate.

Limitations

Compared to Jetpack Compose, the current limitations of navigation in Compose Multiplatform include:

• Deep links (handling or following them) are not supported.
• The BackHandler function and predictive back gestures are not supported on any platform besides Android.

Third-Party Alternatives

If the Compose Multiplatform navigation components do not meet your needs, there are several third-party alternatives you can consider:

Decompose: Provides a flexible and powerful way to handle navigation across different platforms.

Voyager: Offers a type-safe and easy-to-use API for managing navigation.

Appyx: Supports complex navigation scenarios, such as nested navigators and parallel navigation flows.

Precompose: Simplifies navigation and lifecycle management in Compose applications.

Thank you for taking the time to read this article. If you found the information valuable, please consider giving it a clap or sharing it with others who might benefit from it.

Any Suggestions are welcome. If you need any help or have questions for Code Contact US. You can follow us on LinkedIn for more updates 🔔