Jetpack Compose LazyColumn text disappearing

Question

I'm trying the Jetpack Compose and ran into a problem where all the text in the list disappears when scrolling up and down

List before scrolling down

Now when i scroll down it gets like this:

List after scrolling down

And then i scroll up again

List after scrolling up to the top

And here is the code for the composable

val cityList = listOf<String>(
    "Los Angels",
    "New York",
    "São Paulo",
    "Rio de Janeiro",
    "San Diego",
    "Santa Monica",
    "Miami",
    "Orlando",
    "Tampa",
    "Denver"
)

Scaffold(topBar = {
    TopAppBar(
        title = { Text(stringResource(id = R.string.app_name)) },
    )
}) {

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        items(cityList) { city ->
            Card(
                elevation = 8.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 16.dp, end = 16.dp, bottom = 8.dp, top = 8.dp)
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Column(modifier = Modifier.padding(16.dp)) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth(),
                            horizontalArrangement = Arrangement.Center
                        ) {
                            Icon(
                                imageVector = Icons.Filled.LocationOn,
                                contentDescription = null,
                                modifier = Modifier.padding(end = 8.dp)
                            )
                            Text(text = "City $city")
                        }
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.Center
                        ) {
                            Text(
                                text = "Weather"
                            )
                        }
                        Row(verticalAlignment = Alignment.CenterVertically) {
                            Column() {
                                Text(
                                    text = "Max Temperature 10c"
                                )
                                Text(
                                    text = "Max Temperature 10c"
                                )
                                Text(
                                    text = "Max Temperature 10c"
                                )
                            }
                            Icon(
                                imageVector =
                                Icons.Filled.Favorite,
                                contentDescription = null,
                                modifier = Modifier
                                    .padding(end = 8.dp)
                                    .fillMaxWidth()
                            )
                        }

                    }
                }
            }
        }
    }


}

Can anyone point what i'm doing wrong ?

Answer 1

Which compose version are you using?

Looks like this was an issue on beta07 as you can see here: https://issuetracker.google.com/issues/188566058

I checked your code on beta08 and seems to be working.