CODEWITHSUNDEEP
kotlinandroid-jetpackandroid-jetpack-composeandroid-jetpack-navigation
Anudeep Ananth
Anudeep Ananth

Reputation: 1123

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

Upvotes: 17

Views: 8960

Answers (4)

lau
lau

Reputation: 489

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

Upvotes: 2

Andrei Aulaska
Andrei Aulaska

Reputation: 1118

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

Upvotes: 8

John Doe
John Doe

Reputation: 1131

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.

Upvotes: 4

CyrilFind
CyrilFind

Reputation: 814

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

Upvotes: 7

Related Questions