Compse Navigation

A basic guide to compose navigation with latest type safe args

In this app we use

• navigation Compose library with 2.8.5 version
• kotlin serialization

Define routes

To use type-safe routes in Compose, you first need to define serializable classes or objects that represent your routes.

sealed class Destinations {
    @Serializable
    data object MainScreen : Destinations()

    @Serializable
    data class DetailsScreen(
        val name: String,
        val age: Int
    ) : Destinations()

    @Serializable
    data object UsersScreen : Destinations()


    @Serializable
    data class UserDetailsScreen(val user: User, val userType: UserType) : Destinations()
}

Build your graph

 val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = Destinations.MainScreen,
        modifier = Modifier.padding(innerPadding)
    ) {
        composable<Destinations.MainScreen> {
            MainScreen(
                onClick = {
                    navController.navigate(
                        Destinations.DetailsScreen(
                            name = FakeData.name,
                            age = FakeData.age
                        )
                    )
                }
            )
        }
        // this screen with simple args
        composable<Destinations.DetailsScreen> {
            val args = it.toRoute<Destinations.DetailsScreen>()
            DetailsScreen(
                args = args,
                onClick = {
                    navController.navigate(Destinations.UsersScreen)
                }
            )
        }
        composable<Destinations.UsersScreen> {
            UsersScreen(
                onClick = { user, type ->
                    navController.navigate(
                        Destinations.UserDetailsScreen(
                            user = user,
                            userType = type
                        )
                    )
                }
            )
        }
        // this screen with custom args
        composable<Destinations.UserDetailsScreen>(
            typeMap = mapOf(
                typeOf<User>() to CustomNavType.UserType,
                typeOf<UserType>() to NavType.EnumType(UserType::class.java)
            )
        ) {
            val arguments = it.toRoute<Destinations.UserDetailsScreen>()
            UserDetailsScreen(user = arguments.user, userType = arguments.userType)
        }
    }

For Custom Arg routes we tell compose how to serialize and deserialize arg like

object CustomNavType {

    val UserType = object : NavType<User>(
        isNullableAllowed = false
    ) {
        override fun get(bundle: Bundle, key: String): User? {
            return Json.decodeFromString(bundle.getString(key) ?: return null)
        }

        override fun parseValue(value: String): User {
            return Json.decodeFromString(Uri.decode(value))
        }

        override fun serializeAsValue(value: User): String {
            return Uri.encode(Json.encodeToString(value))
        }

        override fun put(bundle: Bundle, key: String, value: User) {
            bundle.putString(key, Json.encodeToString(value))
        }
    }
}