Jetpack compose navigation with multiple optional argments

Question

https://developer.android.com/jetpack/compose/navigation#optional-args

been going through documentation to figure out how to use multiple optional arguments and how to pass them

but in docs only one param is mentioned.

composable(
    "profile?userId={userId}",
    arguments = listOf(navArgument("userId") { defaultValue = "me" })
)

and call it with

composable("profile")
composable("profile/user123") // if you want to pass param

how to declare and call for two params ?

The whole idea behind the definition compose navigation through a string that looks like a URL is to increase support towards deep links, i.e. web page link and the app link would look identical, and as for multiple args, the idea is that use in-memory cache probably a map and use identifiers i.e. single arg for any page/screen where it may be required. Using that identifier destination composable can pull data it needs. — rahat, Aug 15 '23 at 14:55

score 44 · Answer 1 · answered Aug 11 '21 at 18:58

how to declare ?

  composable(
    "profile?userId={userId}&userType={userType}",
    arguments = listOf(
      navArgument("userType") {
        defaultValue = "ADMIN"
        type = NavType.StringType
      }, navArgument("userId") {
        nullable = true
        defaultValue = null
        type = NavType.StringType
      })
  )

how to call ?

navController.navigate("profile?userId=user123&userType=user")
navController.navigate("profile?userType=user")
navController.navigate("profile")

How to do it for " NavType.StringArrayType " – Tippu Fisal Sheriff Sep 07 '22 at 10:01 — Tippu Fisal Sheriff, Sep 07 '22 at 10:01

score 4 · Answer 2 · edited Feb 03 '23 at 13:00

Here is a detailed answer for using multiple optional parameters

// Syntax to declare 
NavHost(...) {
    composable(
        "profile?userId={userId}&username={username}&address={address}",
        arguments = listOf(
            navArgument("userId") { 
                type = NavType.IntType  
                defaultValue = 86 
            } 
            navArgument("username") { 
                type = NavType.StringType  
                defaultValue = "rahul2211" 
            } 
            navArgument("address") { 
                type = NavType.StringType  
                defaultValue = "India" 
            } 
        ) 
    ) { backStackEntry -> 
        val userId = backStackEntry.arguments?.getInt("userId") 
        val username = backStackEntry.arguments?.getString("username") 
        val address = backStackEntry.arguments?.getString("address") 
        Profile(navController, userId, username, address) 
    } 
}

This is how you can optionally pass parameters to the Profile() composable

// Syntax to call 

navController.navigate("profile?userId=102&username=shrekssid&address=Germany")     
// userId = 102, username = "shrekssid", address = "Germany"

navController.navigate("profile?address=Italy")                                     
// userId = 86, username = "rahul2211", address = "Italy"

navController.navigate("profile?userId=991&address=Germany")                        
// userId = 991, username = "rahul2211", address = "Germany"

navController.navigate("profile")                                                   
// userId = 86, username = "rahul2211", address = "India"

score 0 · Answer 3 · answered Aug 15 '23 at 14:41

#Extension Function

 import android.os.Bundle
    import androidx.core.net.toUri
    import androidx.navigation.*
    
    fun NavController.navigate(
        route: String,
        args: Bundle,
        navOptions: NavOptions? = null,
        navigatorExtras: Navigator.Extras? = null
    ) {
        val routeLink = NavDeepLinkRequest
            .Builder
            .fromUri(NavDestination.createRoute(route).toUri())
            .build()
    
        val deepLinkMatch = graph.matchDeepLink(routeLink)
        if (deepLinkMatch != null) {
            val destination = deepLinkMatch.destination
            val id = destination.id
            navigate(id, args, navOptions, navigatorExtras)
        } else {
            navigate(route, navOptions, navigatorExtras)
        }
    }

#Send

 val args = Bundle().apply {
                putString("emailId", emailId)
                putString("password", password)
            }
            navController.navigateWithArgs(
                route = NavRoute.LoginScreen.route, args = args
            )

#Receive

navGraphBuilder.composable(
        route = NavRoute.LoginScreen.route
    ) { navBackStackEntry ->
        val args = navBackStackEntry.arguments
        val emailId: String = args?.getString("emailId").toString()
        val password: String = args?.getString("password").toString()
     
    }

Dulicate question of Pass Parcelable argument with compose navigation

Jetpack compose navigation with multiple optional argments

3 Answers3

Linked