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