Enable Auto-scrolling LazyColumn to the bottom when reverseLayout = false

Question

I have a LazyColumn holding some Items. I listen a Flow from Room and everything works great when reverseLayout = true. When new Item get inserted into the database, the LazyColumn scrolls to the bottom and shows last Item just fine. But reverseLayout = true inverts the headers too. So I disabled it with reverseLayout = false. This does not work in that when Item get inserted, it is shown on the list but the list does not get scrolled to show the bottom item. I have to manually scroll.

How can I scroll to the bottom Item when the LazyColumn get recomposed on items change?

I don't think I need to put the code since the problem happens with any use of LazyColumn but if that is important let me know and I can redact the code and post them!

this is a [known bug](https://issuetracker.google.com/issues/178707569), star it to bring more attention — Phil Dukhov, May 04 '22 at 18:03
Thanks for bringing attention to that one. I have starred it. Hope it get fixed — Stefano Mtangoo, May 04 '22 at 19:09
@Stefano Mtangoo did you find an answer for your question ? because I'm looking for the answer to the same question and I couldn't find a suitable answer for my own code. — NewPartizal, Jan 15 '23 at 17:04

score 6 · Answer 1 · answered May 04 '22 at 10:28

6

In a messaging app i scroll to bottom using size of items and LazyListState

as

coroutineScope.launch {
    scrollState.animateScrollToItem(messages.size - 1)
}

and whenever user inputs a message it gets added to

 val messages = remember { mutableStateListOf<ChatMessage>() }

you can call scroll in a LaunchedEffect(messages.size){...} for it to be invoked only when recomposition happens and item count has changed

answered May 04 '22 at 10:28

Thracian

43,021
16
133
222

for some reason, this does not work. The first one produces an error LaunchEffect is calling `animateScrollToItem` but it does not actually scroll! – Stefano Mtangoo May 04 '22 at 20:02
I used this solution it works but produces a flickering effect on the screen as it scrolls down, is there a way I can work around it such that the flickering is not seen as it scrolls or a way to make it scroll more smoothly maybe? – Felix Kariuki May 09 '23 at 12:42
You might have all your items recomposing while you scroll. To prevent this you can us SnapshotStateList via `mutableStateListOf ` and if you do use keys with unique ids and check if all of items are recomposing. That might be causing the flickering if all of the items are being added again – Thracian May 09 '23 at 12:45

score 2 · Answer 2 · answered May 23 '23 at 14:54

It is a very late answer, but I wrote on the LazyColumn a corroutineScope with the lazyColumnState call to scroll, my problem was on the first 10 items and I needed to stay on the first item. Maybe with this you can figure it out.

val lazyColumnListState = rememberLazyListState()
val corroutineScope = rememberCoroutineScope()

LazyColumn(
          modifier = Modifier.fillMaxWidth(),
          contentPadding = PaddingValues(vertical = 4.dp),
          state = lazyColumnListState
         ) {

            corroutineScope.launch {
                  if(itemCount == 10){
                     lazyColumnListState.scrollToItem(0)
                  }
            }

           items(
                items = ...

Enable Auto-scrolling LazyColumn to the bottom when reverseLayout = false

2 Answers2