Animated LazyColumn and LazyRow

Question

Animating items in LazyColumn and LazyRow in Compose is not yet supported: https://developer.android.com/jetpack/compose/lists#item-animations

Follow issue tracker: https://issuetracker.google.com/issues/150812265

However I created a small POC on a potential workaround until it's officially supported (Check answer), it's far from production ready and definitely contains bugs but just thought of sharing my small playground project

Answer 1

EDIT: The issue tracker now has an update with a solution using a modifier

Just made a small POC of a workaround on animating items in LazyColumn and LazyRow until a proper support is added:

https://github.com/RoudyK/AnimatedLazyColumn

DEF not production ready and happy to get any feedback

EDIT:

Example usage:

data class MainItem(
    val id: String,
    val text: String
)

val items = List(10) { MainItem(UUID.randomUUID().toString(), UUID.randomUUID().toString()) }
val state = rememberLazyListState()

AnimatedLazyColumn(
   state = state,
   items = items.map {
       AnimatedLazyListItem(key = it.id, value = it.text) {
           TextItem(viewModel, it)
       }
   }
)

AnimatedLazyRow(
   state = state,
   items = items.map {
       AnimatedLazyListItem(key = it.id, value = it.text) {
           TextItem(viewModel, it)
       }
   }
)