1. Type-Safe Compose Navigation

Implementation

Make sure to annotate destinations and custom parcelables with @Serializable

1. Dependencies

libs.versions.toml

[versions]
kotlinxSerializationJson = "1.6.3"
kotlinxSerialization = "1.9.0"
navigationCompose = "2.8.0-alpha08"
  
[libraries]
androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
  
[plugins]
jetbrains-kotlin-serialization = { id ="org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlinxSerialization"}

build.gradle.kts (Project)

plugins {
  alias(libs.plugins.jetbrains.kotlin.serialization) apply false
}

build.gradle.kts (Module)

plugins {
  alias(libs.plugins.jetbrains.kotlin.serialization)
  id("kotlin-parcelize")
}
  
depencencies {
  implementation(libs.androidx.navigation.compose)
  implementation(libs.kotlinx.serialization.json)
}

2. Define Destinations

// Defines a home destination that doesn't take any arguments
@Serializable
object Home

// Defines a profile destination that takes an ID
@Serializable
data class Profile(val id: String)

3. Define NavHost

NavHost(navController = navController, startDestination = Home) {
  composable<Home> {
      HomeScreen()
  }

  composable<Profile> { backStackEntry: NavBackStackEntry ->
      val args = backStackEntry.toRoute<Profile>()
      ProfileScreen(id = args.id)
  }
}

4. Pass complex data

1. Annotate your data class with @Parcelize and implement Parcelable interface
2. Define Custom NavType for that data class - Generic mapper for CustomNavType

@Serializable
@Parcelize
data class User(val name: String, val age: Int) : Parcelable

4.1 Update Destination to take Custom Parcelable as args

composable<Profile>(
    typeMap = mapOf(typeOf<User>() to CustomNavType(User::class.java, User.serializer()))
) { backStackEntry: NavBackStackEntry ->
    val args = backStackEntry.toRoute<Profile>()
    ProfileScreen(user = args.user)
}

Demo

type-safe-compose-navigation.mov