navigation

Mobile Navigation (Android + KMP/iOS)

This skill unifies the three navigation approaches. Pick one with the table, then jump to its section.

Which approach?

Approach	Use when	Section
Jetpack Navigation Compose (androidx.navigation)	Android-only app, mature & stable, NavHost + composable<Route>	A
Jetpack Navigation 3 (Nav3)	Android, want the new back-stack-as-state model, adaptive Scenes (list-detail/two-pane), multiple back stacks	B
Multiplatform (Voyager / Decompose / CMP nav / SwiftUI)	Shared navigation across Android + iOS from commonMain	C

KMP + iOS shops: use C for shared nav. Use A/B when the Android app drives navigation natively, or for the androidMain side.

---

A. Jetpack Navigation Compose (androidx.navigation) — Android

Dependencies

dependencies {
    implementation("androidx.navigation:navigation-compose:2.9.8")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.11.0")
}

Type-safe routes

@Serializable
sealed interface Route {
    @Serializable data object Home : Route
    @Serializable data object Settings : Route
    @Serializable data class UserProfile(val userId: String) : Route
    @Serializable data class PostDetail(val postId: Long, val showComments: Boolean = false) : Route
}

NavHost

@Composable
fun AppNavHost(
    navController: NavHostController = rememberNavController(),
    modifier: Modifier = Modifier,
) {
    NavHost(navController = navController, startDestination = Route.Home, modifier = modifier) {
        composable<Route.Home> {
            HomeScreen(
                onNavigateToProfile = { userId -> navController.navigate(Route.UserProfile(userId)) },
                onNavigateToSettings = { navController.navigate(Route.Settings) },
            )
        }
        composable<Route.Settings> { SettingsScreen(onBack = { navController.popBackStack() }) }
        composable<Route.UserProfile> { entry ->
            UserProfileScreen(userId = entry.toRoute<Route.UserProfile>().userId)
        }
        composable<Route.PostDetail> { entry ->
            val r = entry.toRoute<Route.PostDetail>()
            PostDetailScreen(postId = r.postId, showComments = r.showComments)
        }
    }
}