compose-navigation

Name: compose-navigation
Author: hanamizuki

104stars8forks

How to install compose-navigation?

hanamizuki/solopreneur/compose-navigation

$npx -y skills add hanamizuki/solopreneur --skill compose-navigation

Installs into the current project.

Summary

Implement navigation in Jetpack Compose using Navigation Compose. Use when asked to set up navigation, pass arguments between screens, handle deep links, or structure multi-screen apps.

Files · 1

View on GitHub

SKILL.md

1	# Compose Navigation
2
3	## Overview
4
5	Implement type-safe navigation in Jetpack Compose applications using the Navigation Compose library. This skill covers NavHost setup, argument passing, deep links, nested graphs, adaptive navigation, and testing.
6
7	## Setup
8
9	Add the Navigation Compose dependency:
10
11	```kotlin
12	// build.gradle.kts
13	dependencies {
14	implementation("androidx.navigation:navigation-compose:2.8.5")
15
16	// For type-safe navigation (recommended)
17	implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3")
18	}
19
20	// Enable serialization plugin
21	plugins {
22	kotlin("plugin.serialization") version "2.0.21"
23	}
24	```
25
26	---
27
28	## Core Concepts
29
30	### 1. Define Routes (Type-Safe)
31
32	Use `@Serializable` data classes/objects for type-safe routes:
33
34	```kotlin
35	import kotlinx.serialization.Serializable
36
37	// Simple screen (no arguments)
38	@Serializable
39	object Home
40
41	// Screen with required argument
42	@Serializable
43	data class Profile(val userId: String)
44
45	// Screen with optional argument
46	@Serializable
47	data class Settings(val section: String? = null)
48
49	// Screen with multiple arguments
50	@Serializable
51	data class ProductDetail(val productId: String, val showReviews: Boolean = false)
52	```
53
54	### 2. Create NavController
55
56	```kotlin
57	@Composable
58	fun MyApp() {
59	val navController = rememberNavController()
60
61	AppNavHost(navController = navController)
62	}
63	```
64
65	### 3. Create NavHost
66
67	```kotlin
68	@Composable
69	fun AppNavHost(
70	navController: NavHostController,
71	modifier: Modifier = Modifier
72	) {
73	NavHost(
74	navController = navController,
75	startDestination = Home,
76	modifier = modifier
77	) {
78	composable<Home> {
79	HomeScreen(
80	onNavigateToProfile = { userId ->
81	navController.navigate(Profile(userId))
82	}
83	)
84	}
85
86	composable<Profile> { backStackEntry ->
87	val profile: Profile = backStackEntry.toRoute()
88	ProfileScreen(userId = profile.userId)
89	}
90
91	composable<Settings> { backStackEntry ->
92	val settings: Settings = backStackEntry.toRoute()
93	SettingsScreen(section = settings.section)
94	}
95	}
96	}
97	```
98
99	---
100
101	## Navigation Patterns
102
103	### Basic Navigation
104
105	```kotlin
106	// Navigate forward
107	navController.navigate(Profile(userId = "user123"))
108
109	// Navigate and pop current screen
110	navController.navigate(Home) {
111	popUpTo<Home> { inclusive = true }
112	}
113
114	// Navigate back
115	navController.popBackStack()
116
117	// Navigate back to specific destination
118	navController.popBackStack<Home>(inclusive = false)
119	```
120
121	### Navigate with Options
122
123	```kotlin
124	navController.navigate(Profile(userId = "user123")) {
125	// Pop up to destination (clear back stack)
126	popUpTo<Home> {
127	inclusive = false // Keep Home in stack
128	saveState = true // Save state of popped screens
129	}
130
131	// Avoid multiple copies of same destination
132	launchSingleTop = true
133
134	// Restore state when navigating to this destination
135	restoreState = true
136	}
137	```
138
139	### Bottom Navigation Pattern
140
141	```kotlin
142	@Composable
143	fun MainScreen() {
144	val navController = rememberNavController()
145
146	Scaffold(
147	bottomBar = {
148	NavigationBar {
149	val navBackStackEntry by navController.currentBackStackEntryAsState()
150	val currentDestination = navBackStackEntry?.destination
151
152	NavigationBarItem(
153	icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
154	label = { Text("Home") },
155	selected = currentDestination?.hasRoute<Home>() == true,
156	onClick = {
157	navController.navigate(Home) {
158	popUpTo(navController.graph.findStartDestination().id) {
159	saveState = true
160	}
161	launchSingleTop = true
162	restoreState = true
163	}
164	}
165	)
166	// Add more items...
167	}
168	}
169	) { innerPadding ->
170	AppNavHost(
171	navController = navController,
172	modifier = Modifier.padding(innerPadding)
173	)
174	}
175	}
176	```
177
178	---
179
180	## Argument Handling
181
182	### Retrieve Arguments in Composable
183
184	```kotlin
185	composable<Profile> { backStackEntry ->
186	val profile: Profile = backStackEntry.toRoute()
187	ProfileScreen(userId = profile.userId)
188	}
189	```
190
191	### Retrieve Arguments in ViewModel
192
193	```kotlin
194	@HiltViewModel
195	class ProfileViewModel @Inject constructor(
196	savedStateHandle: SavedStateHandle,
197	private val userRepository: UserRepository
198	) : ViewModel() {
199
200	private val profile: Profile = savedStateHand

People who liked this also viewed

6 picks

Type

compose-navigation

104stars8forks

View on GitHub

How to install compose-navigation?

hanamizuki/solopreneur/compose-navigation

$npx -y skills add hanamizuki/solopreneur --skill compose-navigation

Installs into the current project.

Summary

Implement navigation in Jetpack Compose using Navigation Compose. Use when asked to set up navigation, pass arguments between screens, handle deep links, or structure multi-screen apps.

Files · 1

View on GitHub

SKILL.md

1	# Compose Navigation
2
3	## Overview
4
5	Implement type-safe navigation in Jetpack Compose applications using the Navigation Compose library. This skill covers NavHost setup, argument passing, deep links, nested graphs, adaptive navigation, and testing.
6
7	## Setup
8
9	Add the Navigation Compose dependency:
10
11	```kotlin
12	// build.gradle.kts
13	dependencies {
14	implementation("androidx.navigation:navigation-compose:2.8.5")
15
16	// For type-safe navigation (recommended)
17	implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3")
18	}
19
20	// Enable serialization plugin
21	plugins {
22	kotlin("plugin.serialization") version "2.0.21"
23	}
24	```
25
26	---
27
28	## Core Concepts
29
30	### 1. Define Routes (Type-Safe)
31
32	Use `@Serializable` data classes/objects for type-safe routes:
33
34	```kotlin
35	import kotlinx.serialization.Serializable
36
37	// Simple screen (no arguments)
38	@Serializable
39	object Home
40
41	// Screen with required argument
42	@Serializable
43	data class Profile(val userId: String)
44
45	// Screen with optional argument
46	@Serializable
47	data class Settings(val section: String? = null)
48
49	// Screen with multiple arguments
50	@Serializable
51	data class ProductDetail(val productId: String, val showReviews: Boolean = false)
52	```
53
54	### 2. Create NavController
55
56	```kotlin
57	@Composable
58	fun MyApp() {
59	val navController = rememberNavController()
60
61	AppNavHost(navController = navController)
62	}
63	```
64
65	### 3. Create NavHost
66
67	```kotlin
68	@Composable
69	fun AppNavHost(
70	navController: NavHostController,
71	modifier: Modifier = Modifier
72	) {
73	NavHost(
74	navController = navController,
75	startDestination = Home,
76	modifier = modifier
77	) {
78	composable<Home> {
79	HomeScreen(
80	onNavigateToProfile = { userId ->
81	navController.navigate(Profile(userId))
82	}
83	)
84	}
85
86	composable<Profile> { backStackEntry ->
87	val profile: Profile = backStackEntry.toRoute()
88	ProfileScreen(userId = profile.userId)
89	}
90
91	composable<Settings> { backStackEntry ->
92	val settings: Settings = backStackEntry.toRoute()
93	SettingsScreen(section = settings.section)
94	}
95	}
96	}
97	```
98
99	---
100
101	## Navigation Patterns
102
103	### Basic Navigation
104
105	```kotlin
106	// Navigate forward
107	navController.navigate(Profile(userId = "user123"))
108
109	// Navigate and pop current screen
110	navController.navigate(Home) {
111	popUpTo<Home> { inclusive = true }
112	}
113
114	// Navigate back
115	navController.popBackStack()
116
117	// Navigate back to specific destination
118	navController.popBackStack<Home>(inclusive = false)
119	```
120
121	### Navigate with Options
122
123	```kotlin
124	navController.navigate(Profile(userId = "user123")) {
125	// Pop up to destination (clear back stack)
126	popUpTo<Home> {
127	inclusive = false // Keep Home in stack
128	saveState = true // Save state of popped screens
129	}
130
131	// Avoid multiple copies of same destination
132	launchSingleTop = true
133
134	// Restore state when navigating to this destination
135	restoreState = true
136	}
137	```
138
139	### Bottom Navigation Pattern
140
141	```kotlin
142	@Composable
143	fun MainScreen() {
144	val navController = rememberNavController()
145
146	Scaffold(
147	bottomBar = {
148	NavigationBar {
149	val navBackStackEntry by navController.currentBackStackEntryAsState()
150	val currentDestination = navBackStackEntry?.destination
151
152	NavigationBarItem(
153	icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
154	label = { Text("Home") },
155	selected = currentDestination?.hasRoute<Home>() == true,
156	onClick = {
157	navController.navigate(Home) {
158	popUpTo(navController.graph.findStartDestination().id) {
159	saveState = true
160	}
161	launchSingleTop = true
162	restoreState = true
163	}
164	}
165	)
166	// Add more items...
167	}
168	}
169	) { innerPadding ->
170	AppNavHost(
171	navController = navController,
172	modifier = Modifier.padding(innerPadding)
173	)
174	}
175	}
176	```
177
178	---
179
180	## Argument Handling
181
182	### Retrieve Arguments in Composable
183
184	```kotlin
185	composable<Profile> { backStackEntry ->
186	val profile: Profile = backStackEntry.toRoute()
187	ProfileScreen(userId = profile.userId)
188	}
189	```
190
191	### Retrieve Arguments in ViewModel
192
193	```kotlin
194	@HiltViewModel
195	class ProfileViewModel @Inject constructor(
196	savedStateHandle: SavedStateHandle,
197	private val userRepository: UserRepository
198	) : ViewModel() {
199
200	private val profile: Profile = savedStateHand

People who liked this also viewed

6 picks

Type