> For the complete documentation index, see [llms.txt](https://dev-comentry.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev-comentry.gitbook.io/docs/android/compose-navigation.md).

# Compose Navigation

[Permalink](https://github.com/doctor-blue/compose-navigation/blob/2bd5b05d30e5f0ed028cd701719f31f8c080a63f/README.md)

Cannot retrieve contributors at this time

## Compose Navigation

[![](https://camo.githubusercontent.com/a4b5083376e65ccd2514257b297c272bac3dbd99bb6fabe3e71b85f9871de5fd/68747470733a2f2f6a69747061636b2e696f2f762f646f63746f722d626c75652f636f6d706f73652d6e617669676174696f6e2e737667)](https://jitpack.io/#doctor-blue/compose-navigation) [![API](https://camo.githubusercontent.com/e4be58c2eb500c8634ceff111c34f70b52db29ed45acc60eaf229098fddc801c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4150492d32312532422d627269676874677265656e2e7376673f7374796c653d666c6174)](https://android-arsenal.com/api?level=21)

This library will make it easier to pass arguments between screens in Jetpack Compose

### Setup

```groovy
allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

dependencies {
	implementation 'com.github.doctor-blue:compose-navigation:1.1.0'
}
```

### How to use?

#### Step 1: Create your screen class and extend it with ComposeScreen class

* Example: I have 3 screens (MainScreen, Screen1, Screen2). As you can see the \_route variable is my screen name

```kotlin
mport com.devcomentry.lib.ComposeScreen

sealed class Screen(_route: String) : ComposeScreen(_route) {
    object MainScreen : Screen("main_screen")
    object Screen1 : Screen("screen1")
    object Screen2 : Screen("screen2")
}
```

#### Step 2: Create a class and implement it with Argument interface. Variables in this class is your argument you wanna pass to other screen.

* Example: I want to pass a number from MainScreen to Screen2. More variables means more arguments

```kotlin
package com.devcomentry.composenavigation.ui.screen

import com.devcomentry.lib.Argument

data class Screen2Argument(val number: Int = -1) : Argument
```

#### Step 3: Setup your navigation

* Same as using navigation component, but at the composable function you can give ComposeScreen and Argument object, let me help you with the rest.
* Support get argument from Bundle or SavedStateHandle. If Bundle or SavedStateHandle object doen't contains key argument will be default of Argument object

```kotlin
package com.devcomentry.composenavigation

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.rememberNavController
import com.devcomentry.composenavigation.ui.screen.*
import com.devcomentry.lib.composable
import com.devcomentry.lib.from

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Surface {
                Surface(
                    color = MaterialTheme.colors.background,
                ) {
                    val navController = rememberNavController()
                    NavHost(
                        navController = navController,
                        startDestination = Screen.MainScreen.route
                    ) {

                        composable(Screen.MainScreen) {
                            MainScreen(navController = navController)
                        }

                        composable(Screen.Screen1) {
                            Screen1()
                        }

                        composable(Screen.Screen2, Screen2Argument()) {
                            // get data from arguments
                            it.arguments?.let {  bundle->
                                val argument = Screen2Argument().from(bundle)
                                Screen2(argument)
                            }
                        }

                    }
                }
            }
        }
    }
}
```

#### Step 4: Navigate to other screen

* Example 1: just open Screen1

```kotlin
    navController.navigate(Screen.Screen1.route)
```

* Example 2: pass random number to Screen2

```kotlin
    navController.navigate(
                        Screen.Screen2.setParam(
                            Screen2Argument(
                                Random.nextInt(
                                    0,
                                    50
                                )
                            )
                        )
                    )
```

#### Note

* You can get Argument object from arguments (Instance of Bundle) like example above.

```kotlin
    val argument = Screen2Argument().from(bundle)
    // use your argument
```

* Or get data from SavedStateHandle like this

```kotlin
    val argument = Screen2Argument().from(savedStateHandle)
    // use your argument
```

### Want more an example?

* See [Note app](https://github.com/doctor-blue/clean-architecture-jetpack-compose-note-app-android)

### Donate

[![Buy Me A Coffee](https://camo.githubusercontent.com/3ba8042b343d12b84b85d2e6563376af4150f9cd09e72428349c1656083c8b5a/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f64656661756c742d6f72616e67652e706e67)](https://www.buymeacoffee.com/doctorblue) [![paypal](https://camo.githubusercontent.com/361950b331ef676b7eec436a4dbe5a7ce47211a6623dcc889b1f5b7b611b27df/68747470733a2f2f7777772e70617970616c6f626a656374732e636f6d2f656e5f55532f692f62746e2f62746e5f646f6e61746543435f4c472e676966)](https://www.paypal.me/doctorblue00)