Save and retain LazyColumn scroll position while using Paging 3

I am using the Paging 3 Library with Lazy Column and a BottomNavigation Menu in my Activity. Each Composable Screen attached to the BottomNavMenu uses a Composable that in turn uses Lazy Columns. When I navigate between the Composables using the compose navigation library I want the recomposed composable to retain the scroll position and the lazyListState

I have tried the following but doesn't work:


val listState = rememberLazyListState()
val scrollState = rememberScrollState()

LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(bottom = 56.dp)
.scrollable(scrollState, Orientation.Vertical),
state = listState,
) {

//draw the items and hook the loadState to the lazy paging items


Every time I navigate to this composable, it is recomposed with the scroll position set to 0 which is not what I want.
What is the right way to handle this

You probably need to do `collectAsLazyPagingItems()` before declaring your `NavHost`

I filed a bug about this you can read it for more detail and star it to follow the issue:

[To see links please register here]

It seems like this a bug in the Compose Navigation component.

`rememberLazyListState()` does not work correctly on configuration changes (screen rotation, dark theme toggle etc) for composables inside a `NavHost`.

You can cache paging data in a ViewModel and then collect it in the UI. The ViewModel part can look something like this:

val items: Flow<PagingData<YourItem>> =
Pager(PagingConfig(PAGE_SIZE)) {
YourSource()
}
.flow
.cachedIn(viewModelScope)
And then you can use it in the UI like this:

@Composable
fun YourScreen(viewModel: YourViewModel) {
val items = viewModel.items.collectAsLazyPagingItems()
...
}

To solve this problem I used:

val items: Flow<PagingData<YourItem>> =
Pager(PagingConfig(PAGE_SIZE)) {
YourSource()
}
.flow
.cachedIn(GlobalScope)

With the respective clean in the viewmodel