Save and retain LazyColumn scroll position while using Paging 3

Question

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

Answer 1

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()
    ...
}

Answer 2

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: https://issuetracker.google.com/issues/177245496

Answer 3

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.