How to implemented pull to refresh in Jetpack Compose

evgensuit

Yauheni Mokich

Posted on September 27, 2024

How to implemented pull to refresh in Jetpack Compose

Setup

Update your material3 version to at least 1.3.0-beta04,
or compose-bom to 2024.09.00


Now implement PullToRefreshBox:

PullToRefreshBox(
        isRefreshing = uiState.currentWeatherRefreshResult.isInProgress(),
        onRefresh = { onIntent(HomeIntent.RefreshCurrentWeather) },
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {

        }
    }
Enter fullscreen mode Exit fullscreen mode

If you're trying to use PullToRefreshBox on a regular Column, then make sure to add verticalScroll, without it pull to refresh will not work.
Use onRefresh parameter to perform your desired operation (intent) that would cause an update to it's result (represented in the form of currentWeatherRefreshResult here)

💖 💪 🙅 🚩
evgensuit
Yauheni Mokich

Posted on September 27, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related