Hi, about using Paging 3 with Compose and keeping ...

# compose

[Cyril Find]

Hi, about using Paging 3 with Compose and keeping the scroll state while using Navigation, I made a one-file sample and found out it works if I do the collectAsLazyPagingItems() before declaring the NavHost but it seems to me like I should be able to do it right before LazyColumn
Is there something I’m missing ? (I’ll share the code in the thread 🧵 )

[Cyril Find]

gist: https://gist.github.com/CyrilFind/5c7d108dd8d030fe7a6a556e43f29f6f
code: (sorry it’s long)

const val LIST = "list"
const val OTHER = "other"

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            ComposeSampleTheme {
                Scaffold(
                    bodyContent = { MainNavHost(navController) },
                    bottomBar = { BottomNav(navController) }
                )
            }
        }
    }
}

@Composable
fun BottomNav(navController: NavHostController) {
    BottomNavigation {
        val screens = listOf(LIST, OTHER)
        screens.forEach {
            BottomNavigationItem(
                icon = { Text(it) },
                selected = false,
                onClick = {
                    navController.navigate(it) {
                        launchSingleTop = true
                        popUpTo = navController.graph.startDestination
                    }
                }
            )
        }
    }
}

@Composable
fun MainNavHost(navController: NavHostController) {
    val lazyListState = rememberLazyListState()
    val listViewModel: ListViewModel = viewModel()
    val items = listViewModel.pagerFlow.collectAsLazyPagingItems()
    NavHost(navController = navController, startDestination = LIST) {
        composable(LIST) {
            LazyColumn(
                modifier = Modifier.fillMaxSize(),
                state = lazyListState
            ) {
                items(items) { Text("Item #$it") }
            }
        }
        composable(OTHER) { Text("Coucou !") }
    }
}

class ListViewModel : ViewModel() {
    private val pagingConfig = PagingConfig(pageSize = 10)
    private val pager = Pager(pagingConfig) { IntsPagingSource() }
    val pagerFlow = pager.flow.cachedIn(viewModelScope)
}

class IntsPagingSource : PagingSource<Int, Int>() {
    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Int> {
        val page = params.key ?: 0
        val pageSize = params.loadSize
        Log.d("FETCH", "PAGE #$page")
        return LoadResult.Page(
            data = List(pageSize) { (page * pageSize) + it },
            prevKey = null,
            nextKey = page + 1,
        )
    }
}

[Cyril Find]

so, this works but if I declare the viewModel and/or items down inside the composable, it doesn’t, which is weird to me

[Andrey Kulikov]

so if you keep viewModel declaration where it is now, but move collectAsLazyPagingItems inside the NavHost’s child it doesn’t work?

[Cyril Find]

yes exactly @Andrey Kulikov

[Andrey Kulikov]

could you please file a bug?

[Cyril Find]

sure, can you tell me where and how ? 😅

[Cyril Find]

ok i found out 🙂 https://issuetracker.google.com/issues/177245496

[Cyril Find]

@Andrey Kulikov let me know if I did something wrong or forgot anything

[Andrey Kulikov]

no, everything is correct. thank you!

[Cyril Find]

cool, thank you !