DEV Community

Yauheni Mokich
Yauheni Mokich

Posted on

3

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)

Sentry mobile image

Tired of users complaining about slow app loading and janky UI?

Improve performance with key strategies like TTID/TTFD & app start analysis.

Read the blog post

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools