user19514642
user19514642

Reputation:

How to implement swipe to refresh in Jetpack compose

How to create swipe to refresh in Jetpack compose using kotlin? Please Share proper reference link

SwipeRefresh is not available

 SwipeRefresh(
        state = rememberSwipeRefreshState(isRefreshing),
        onRefresh = {  },
    ) {
        LazyColumn {
           
        }
    }

Upvotes: 3

Views: 7402

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365038

Now you can use the built-in pullRefresh modifier.

Something like:

val refreshScope = rememberCoroutineScope()
var refreshing by remember { mutableStateOf(false) }

fun refresh() = refreshScope.launch {
    refreshing = true
    //...do something
    refreshing = false
}

val state = rememberPullRefreshState(refreshing, ::refresh)

Box(Modifier.pullRefresh(state)) {
    LazyColumn(Modifier.fillMaxSize()) {
        if (!refreshing) {
            items(itemCount) {
                //...
            }
        }
    }

    PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
}

Upvotes: 7

user19514642
user19514642

Reputation:

To create a swipe-to-refresh layout, we need to add dependency in buld.gradle which will provide swipe to refresh layout just like SwipeRefreshLayout in traditional android.

  implementation 'com.google.accompanist:accompanist-swiperefresh:0.24.13-rc'

..

To create this kind of layout we require two APIs one SwipeRefresh for layout and another rememberSwipeRefreshState which will remember the state.

@Composable
fun SwipeRefreshCompose() {

    var refreshing by remember { mutableStateOf(false) }
    LaunchedEffect(refreshing) {
        if (refreshing) {
            delay(3000)
            refreshing = false
        }
    }

    SwipeRefresh(
        state = rememberSwipeRefreshState(isRefreshing = refreshing),
        onRefresh = { refreshing = true },
    ) {

       // list view

    }

}

Upvotes: 2

Related Questions