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)

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay