Home > Mobile >  Composable in NavGraphBuilder is repeating 3 or more times
Composable in NavGraphBuilder is repeating 3 or more times

Time:01-07

I have a problem when do a call to my composable in the NavGraph, it is repeating 3 times or sometimes more times. I have looked where I do the call and I don't see any loop or something.

NavGraph

fun NavGraphBuilder.addScheduleDetails(
    navController: NavHostController,
    userDataViewModel: UserDataViewModel,
    titulos: MutableState<String>,
    datosViewModel: DatosViewModel,
){
    val animationState = mutableStateOf(true)
    composable(route = MainDestinations.SCHEDULE_DETAILS_ROUTE "/{${NavArguments.NOMBRE_HORARIO}}")
    {backStackEntry ->

            Log.w("Call", "ScheduleDetails")
            titulos.value = backStackEntry.arguments?.getString(NavArguments.NOMBRE_HORARIO)!! " "
            val actions = MainActions(navController = navController)

            DetallesHorarioScreen(
                nombreHorario = backStackEntry.arguments?.getString(NavArguments.NOMBRE_HORARIO),
                userDataViewModel = userDataViewModel,
                onNavToAddSubject = actions.navigateToAgregarMateria,
                datosViewModel = datosViewModel,
                animationState = animationState
            )
    }
}

Prints from LOG

2022-01-06 19:57:01.548 30533-30533/horarios W/Call: ScheduleDetails
2022-01-06 19:57:01.613 30533-30533/horarios W/Call: ScheduleDetails
2022-01-06 19:57:01.987 30533-30533/horarios W/Call: ScheduleDetails

Call to composable(route = MainDestinations.SCHEDULE_DETAILS_ROUTE ...)

Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(80.dp)
            .padding(10.dp)
            .clickable { onNavToHorario(nombre) },        //Call to navigator
        border = BorderStroke(width = 1.dp, color = primaryColorCustom),
        shape = RoundedCornerShape(10),
        backgroundColor = Color.White,
        elevation = 4.dp
    ) {...}

onNavToHorario()

val actions  = MainActions(navController = navController)
(...)
onNavToHorario = actions.navigateToHorario

MainActions()

class MainActions(navController: NavHostController){
    val navigateToHorario:(String) -> Unit = {nomHorario: String ->
        navController.navigate(route = MainDestinations.SCHEDULE_DETAILS_ROUTE "/${nomHorario}")
    }
}

In other case I had a similar problem and was occasioned for animations but I already delete all animations in NavGraph but the problem is still

CodePudding user response:

Navigation always crossfades destinations, so each screen will always recompose multiple times. This is expected as per the Thinking in Compose guide:

In some cases, a composable function might run for every frame of a UI animation. If the function performs expensive operations, like reading from device storage, the function can cause UI jank.

You aren't doing anything wrong (you aren't triggering side effects as part of composition), so your code is already fine.

  •  Tags:  
  • Related