MarkerComposable content (Google Maps) doesn't recompose in Compose

40 views Asked by At

I have created my own marker with MarkerComposable because I want to add an animation when the icon is clicked. I want the selected marker to become larger when clicked. I can think of two options: either change the image to a larger one (I chose this) or use modifiers. But to my surprise, when I ran the code, I see that only the MarkerComposable is recomposed and not the Image. No matter how much I click on the marker, the image doesn't change.

I have tried changing several things but I haven't been able to make the Image Composable recompose. And I haven't found much documentation about MarkerComposable.

Do you know what could be causing this? Or any alternative for it to change when I click on the marker?

Thank you in advance!

@Composable
private fun MyMarker(
    location: Location,
    onPinClick: () -> Unit,
) {
    val markerState = rememberMarkerState(
        position = location.toLatLng(),
    )
    var iconSelected by rememberSaveable { mutableStateOf(false) }
    
    MarkerComposable(
        state = markerState,
        title = if (iconSelected) "true" else "false", // recompose
        onClick = { _ ->
            iconSelected = !iconSelected
            false
        },
    )
    {
    Image(
        painter = painterResource( // not recompose
            if (iconSelected) {
                R.drawable.low_availability_selected_pin
            } else {
                R.drawable.high_availability_fav_pin
            },
        ),
        contentDescription = null,
    }
}
1

There are 1 answers

0
Samuel Otis On BEST ANSWER

Just found out that you need to set the keys parameter of MarkerComposable or it will not re-render

MarkerComposable(
    keys = <THIS NEEDS TO CHANGE TO RE-RENDER>
    state = markerState,
    title = if (iconSelected) "true" else "false", // recompose
    onClick = { _ ->
        iconSelected = !iconSelected
        false
    },
)