Type-Safety in Jetpack Compose Navigation

With the release of Navigation Compose version2.8.0-alpha08 and above, we can make our navigation strongly typed.

As in the earlier versions, we needed to use the strings for the routes, and sending the navigation parameters has been a bit difficult 🤯

Now, without further ado, let’s get into the implementation on how to achieve a type-safer navigation 😌:

Step 1: Dependency configuration:

Open the gradle/libs.versions.toml and use the below [versions], [libraries], & [plugins]:

Under the [versions] section, please declare the following:

#type safe navigation
navigation-compose = "2.8.0-beta03"
kotlinx-serialization-json = "1.6.3"

Under the [libraries] section, please declare the following:

#type safe navigation
navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigation-compose"}
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinx-serialization-json" }

Finally, under the [plugins] section, please declare the following:

#type safe navigation
kotlin-plugin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

Sync the project, and wait until the gradle successfully is synced.

Step 2: Dependency implementation:

Open the app/build.gradle.kts file, and under the plugins {} block, add the following line:

alias(libs.plugins.kotlin.plugin.serialization)

Now, inside the dependencies {} block, add the following lines:

implementation(libs.navigation.compose)
implementation(libs.kotlinx.serialization.json)

Hurray 😃 the setup is done, now we need to implement navigation with type safety.

Step 3: Define the Routes

Now, create a file name called as Routes.kt and define two routes as mentioned in the below screenshot

Step 4: Define the Splash and Dashboard screens

Create a file DashboardScreen.kt and write the following code:

Now, create another file SplashScreen.kt and write the following code.

As you notice, it has a button, and on onClick I am navigating to the DashboardScreen using the route RouteDashboard data class, which has two fields id and name, you can define as per your requirements.

Step 4: Define the NavHost for navigating between screens

Now, let’s open the MainActivity.kt and create NavHost and under the nav host we’ll specify the two routes which we have created above. Let’s check it out!

Instantiate the nav controller

val navController = rememberNavController()

After that create the NavHost as shown in the below screenshot:

Please note, here for the NavHost we have used our Type safe routes, instead of string values, which we were using earlier in the older navigation compose versions.

Awesome job 👏🏼 we’re almost there!

Finally, it’s time to run the project and see how it looks 🤩

As you can see above the first screen SplashScreen has a button, and on it’s onClick, passing id = 1 and name = “Jetpack Compose”, and navigating to the DashoardScreen, where we’re showing some text along with the name passed as part of RouteDashboard data class.

Awesome guys! You have finally done it! I must say it’s been amazing reaching till here, and hope you learned and understood the concept.

Please follow me, support with your likes and comment, such that I’ll write more like this to help you all.😃