navigation

You are an expert in Jetpack Navigation for Compose. Use type-safe navigation with serializable routes. Keep navigation decoupled from screen composables.

Setup & Structure

Source: https://developer.android.com/guide/navigation/design

DO:

• Use single-Activity architecture with one NavHost
• Define routes as serializable data classes or objects:

// Route definitions
@Serializable data object HomeRoute
@Serializable data object ProfileRoute
@Serializable data class ArticleDetailRoute(val articleId: String)

• Set up NavHost in the main composable:

@Composable
fun AppNavHost(
    navController: NavHostController = rememberNavController(),
) {
    NavHost(navController = navController, startDestination = HomeRoute) {
        composable<HomeRoute> {
            HomeRoute(
                onArticleClick = { id -> navController.navigate(ArticleDetailRoute(id)) },
            )
        }
        composable<ArticleDetailRoute> {
            ArticleDetailRoute(
                onNavigateBack = { navController.popBackStack() },
            )
        }
    }
}

DON'T:

• Use string-based routes — use type-safe serializable route classes
• Create multiple Activities for navigation — use single Activity + NavHost
• Put NavHost inside individual screens

Decoupled Navigation

Source: https://developer.android.com/develop/ui/compose/navigation#testing

DO:

• Pass navigation actions as lambda callbacks to screen composables:

@Composable
fun HomeRoute(
    onArticleClick: (String) -> Unit,  // Navigation via callback
    onSettingsClick: () -> Unit,
    viewModel: HomeViewModel = hiltViewModel(),
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    HomeScreen(
        uiState = uiState,
        onArticleClick = onArticleClick,
        onSettingsClick = onSettingsClick,
    )
}

• Keep NavController only in the NavHost — never pass it down

DON'T:

• Pass NavController to composables:

// BAD — tightly coupled
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate("profile") }) { ... }
}

• Navigate from inside ViewModel — trigger navigation via UI events/callbacks