Trying to navigate between screens with jetpack compose-CodePudding

I'm fairly new to jetpack and android development and I'm trying to navigate between views. Coming from Swift I thought I could pass NavController to update the view.

My RootScreen looks like this

@Composable
fun RootScreen() {
    val navigationController = rememberNavController()
    Scaffold(
        bottomBar = {
            BottomBar(navigationController)
        }
    ) {
        NavHost(
            navController = navigationController,
            startDestination = NavigationItem.Home.route
        ) {
            composable(NavigationItem.Home.route) {
                HomeScreen(navController = navigationController)
            }
            composable(NavigationItem.Routes.route) {
                RouteList()
            }
            composable(NavigationItem.Settings.route) {
                Text("Settings")
            }
        }
    }
}

From my HomeScreen I'm tapping a view that has a navigationAction where I am updating the route, but the view does not update.

@Composable
fun HomeScreen(navController: NavController) {
    ...
    HomeCard(title = homeScreen[0].title,
        image = painterResource(id = homeScreen[0].image),
        frameHeight = 250,
        frameWidth = 175,
        navigationAction = {
            navController.navigate(NavigationItem.Routes.route)
            }
    )
}

Here's where I'm clicking the action

@Composable
fun HomeCard(
    title: String,
    image: Painter,
    frameHeight: Int,
    frameWidth: Int,
    navigationAction: () -> Unit
) {
    Card(
        elevation = 13.dp,
        modifier = Modifier
            .padding(top = 8.dp)
            .clip(RoundedCornerShape(13.dp))
            .height(frameHeight.dp)
            .width(frameWidth.dp)
            .clickable { navigationAction }
    ) {
      ....
    }

CodePudding user response：

Your screen is not getting navigated because the navigationAction never invoked.

@Composable
fun HomeCard(
    navigationAction: () -> Unit
) {
    Card(
        modifier = Modifier
            .clickable { navigationAction.invoke() }
    ) {
      ....
    }