How do you pass two variables to NavHost to be then passed on to another screen?

Question

Hello and thank you so much for considering my question. I would like to know how to pass multiple variables to Navhost. I am able to send one variable but once I try two it no longer works?

I am trying to pass two variables to my NavHost.

Here is my Button:

 var playerOneName = "Mike"
 var playerTwoName = "Allison"
 
Button(onClick = { navController.navigate(Destination.TwoPlayerGame.route +playerOneName"+"$playerTwoName")}) {
                    Text(text = "Start Game")
                }

My NavHost Looks like:

@Composable
fun NavigationAppHost (navController: NavController) {

    NavHost(navController = navController as NavHostController, startDestination = "PlayerSelection") {
        composable(Destination.PlayerSelection.route)  { PlayerSelection(navController) }
        composable(Destination.TwoPlayerGame.route + "{playerOneName}" + "{playerTwoName}") {backStackEntry ->

        val playerOneName = backStackEntry.arguments?.getString("playerOneName")
        val playerTwoName = backStackEntry.arguments?.getString("playerTwoName")

            TwoPlayerGame(navController,playerOneName,playerTwoName) }

            composable(Destination.ThreePlayerGame.route)  {ThreePlayerGame(navController)}

            composable(Destination.FourPlayerGame.route)  {FourPlayerGame(navController)}
    }


}

lastly the Composable TwoPlayerGame looks like:

@Composable
fun TwoPlayerGame(navController: NavController, playerOneName: String?, playerTwoName: String?) {
    var plr1Name: String? by remember { mutableStateOf("") }
    var plr2Name: String? by remember { mutableStateOf("") }
    

plr1Name = playerOneName
plr2Name = playerTwoName

  
    Card(modifier = Modifier.fillMaxWidth()) {

        Column {
            Text("Two Player Game")
            Text("Player One = ${plr1Name}")
            Text("Player Two = ${plr2Name}")
        }



    }


}

So this works.... sort of. The Output is:

Player One = M Player Two = ikeAllison

So data is being passed by incorrectly.

I thank you in advance for letting me know what I'm doing wrong.

Answer 1

You should split multiple arguments with /, similar to deep links or web. Complete route should look like "TwoPlayerGame/Mike/Allison". So in your NavHost you would have something like:

...
composable(Destination.TwoPlayerGame.route + "{playerOneName}/{playerTwoName}")
...

And navigate to it:

navController.navigate(Destination.TwoPlayerGame.route + "$playerOneName/$playerTwoName")