Refresh SwiftUI views

A nice addition to SwiftUI at WWDC21 is the new refreshable modifier to refresh view contents. This new feature is powered by maybe the biggest announcement at WWDC21: the new async/await pattern introduced in Swift 5.5.
While this isn’t an article about this specific topic is important to know that what we’re going to see here is powered by it, thus is not backwards compatible with older versions of SwiftUI.

One of the features iOS users love it the ability to pull down a list of content to refresh it. Up to this year, there wasn’t a first party API to implement this functionality, and if you’re interested in a solution compatible with the first version of SwiftUI you can check out my article about pull down to refresh.
We finally have that official API, is a modifier called refreshable and I’m going to show you how to use it on a List, and how to apply it to a custom view. As usual the code is available on GitHub
If you want to add the refreshable scroll view to your project via SwiftPM you can use this repository.

Refresh a List

Applying the new modifier to a List is straightforward

List(posts) { post in
    PostView(post: post)
}
.refreshable {
    await refreshListAsync()
}

you add the modifier .refreshable and you provide a function to refresh the content inside the closure.
As I told you, this feature is powered by async/await, so we need the new await keyword before the function call.
Let’s have a look at the declaration of refreshable

func refreshable(action: @escaping () async -> Void) -> some View

the action we are providing (our closure in the example above) is marked as async, that’s the reason why we need await. I haven’t written an article about async/await yet, but you’ll find plenty of them if you want to understand exactly what is going on.
For now, this is all you need to do to implement pull down to refresh with the new modifier. That’s because List implements the whole functionality and is able to display an indicator and hide it once the reload function (the one you implemented in the closure) ends.

Refresh a custom view

All right, refreshing a List is really easy but you may wonder how to use the new modifier in your view. Maybe you cannot use a List and you have an array of elements you display in a ForEach, the good news is that with a few more lines of code you can implement the same feature.
I’m going to show you a simple example from the repository I linked before, starting with my custom ScrollView implementing pull down to refresh. See the code here

struct ScrollViewPullRefresh<Content:View>: View {
    @Environment(\.refresh) var refreshAction: RefreshAction?

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        VStack {
            if isRefreshing {
                ProgressView()
            }
        }
        GeometryReader { geometry in
            ScrollView {
                content()
                    .anchorPreference(key: OffsetPreferenceKey.self, value: .top) {
                        geometry[$0].y
                    }
            }
            .onPreferenceChange(OffsetPreferenceKey.self) { offset in
                if offset > threshold && isRefreshing == false {
                    if let action = refreshAction {
                        Task {
                            isRefreshing = true
                            await action()
                            withAnimation {
                                isRefreshing = false
                            }
                        }
                    }
                }
            }
        }
    }

    private var content: () -> Content
    @State private var isRefreshing = false
    private let threshold = 50.0
}

this is the entire implementation. I won’t explain how to actually implement the pull down to refresh part, the onPreferenceChange modifier I applied to a ScrollView. Please refer to my previous article to find out more. In a nutshell, when the scroll view offset goes over a defined threshold I can perform an action, in this case the async action configured by the caller.
But how do I now what action to execute?
Alongside the refreshable modifier SwiftUI introduced a new environment value, called refresh

@Environment(\.refresh) var refreshAction: RefreshAction?

by referring to this value, we can call the async function passed to refreshable.
What is RefreshAction? Let’s take a look at its definition

public struct RefreshAction {
    ...
    public func callAsFunction() async
}

if you’re not familiar with callAsFunction, it is a way to treat objects as functions. In this case, you can call refreshAction() and execute the code passed to the closure of refreshable. It is not importa to know that, but I pasted the definition in case you were curious 🙂
Ok let’s get back to our example. We have refreshAction, so we know what to call when the user pulls down the ScrollView.

.onPreferenceChange(OffsetPreferenceKey.self) { offset in
    if offset > threshold && isRefreshing == false {
        if let action = refreshAction {
            Task {
                isRefreshing = true
                await action()
                withAnimation {
                    isRefreshing = false
                }
            }
        }
    }
}

his is the modifier. It is important to keep a @State variable to know whether we’re executing the refresh operation, otherwise we’d continue to call the async function as the user pulls down.
If we’re not refreshing and the action is set, we can call the async function.
What is Task? I won’t go into details, but tt is a way to execute asynchronous code inside a synchronous context. In this case we set the isRefreshing value to true, then we execute the async function (so we need the await keyword) and then set the refreshing value to false. I use withAnimation so the ProgressView disappears with an animation, otherwise you’d see the ScrollView jump at the top.

Let’s see how to refresh our custom ScrollView, full implementation here.

var body: some View {
    ScrollViewPullRefresh {
        VStack {
            ForEach(posts) { post in
                PostView(post: post)
            }
        }
    }
    .task {
        posts = await getPosts()
    }
    .refreshable {
        posts = await shufflePosts()
    }
}

As you see I added the refreshable modifier and inside I assign the posts variable the result of an async function to simply shuffle the posts. Let’s take a look at it

private func shufflePosts() async -> [Post] {
    await Task.sleep(2_000_000_000)
    return viewModel.allPosts.shuffled()
}

In order to simulate a network call, I use Task.sleep. As the name suggest, the function does nothing and sleeps for the given amount of microseconds. I find it useful to experiment with async await without setting up an API to retrieve data, you can simply have a JSON inside the project and await for the result.

Before ending, you may have noticed the .task modifier I applied to the custom view before refreshable.
This is another addition to SwiftUI, and gives us the ability to perform an asynchronous task when the view appears. In this example I load the list of posts when the view appears, and refresh them every time the user pulls down to refresh.
Of course you can implement alternative ways to refresh a list of contents. For example you can use a Button, like this

struct RefreshableView: View {
    @ObservedObject var viewModel: ListViewModel
    @Environment(\.refresh) var refreshAction: RefreshAction?

    var body: some View {
        VStack {
            Button {
                if let action = refreshAction {
                    Task {
                        await action()
                    }
                }
            } label: {
                Image(systemName: "arrow.counterclockwise")
            }
            ScrollView {
                ForEach(viewModel.beers) { beer in
                    HStack {
                        CustomImageView(url: URL(string: beer.imageUrl),
                                        placeHolder: Image(systemName: "xmark.octagon"))
                            .frame(width: 100, height: 100)
                        Text(beer.name)
                        Spacer()
                    }
                }
            }
        }
    }
}