How to enable pull to refresh

About 2 min

How to enable pull to refresh 관련

SwiftUI by Example

Back to Home

How to enable pull to refresh | SwiftUI by Example

How to enable pull to refresh

Updated for Xcode 15

New in iOS 15

SwiftUI's refreshable() modifier lets you attach functionality to a List to be triggered when the user drags down far enough. iOS will automatically show an activity indicator for as long as it takes for your code to finish running.

To get started, simply add a refreshable() modifier to your list where you do your work, like this:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(1..<100) { row in
                Text("Row \(row)")
            }
            .refreshable {
                print("Do your refresh work here")
            }
        }
    }
}

Download this as an Xcode projectopen in new window

The code you place inside refreshable() is already running in an async context, so it's the perfect place to put something like networking. For example, here's a complete example that uses pull to refresh to download some news stories into a List:

struct NewsItem: Decodable, Identifiable {
    let id: Int
    let title: String
    let strap: String
}

struct ContentView: View {
    @State private var news = [
        NewsItem(id: 0, title: "Want the latest news?", strap: "Pull to refresh!")
    ]

    var body: some View {
        NavigationStack {
            List(news) { item in
                VStack(alignment: .leading) {
                    Text(item.title)
                        .font(.headline)
                    Text(item.strap)
                        .foregroundStyle(.secondary)
                }
            }
            .refreshable {
                do {
                    // Fetch and decode JSON into news items
                    let url = URL(string: "https://www.hackingwithswift.com/samples/news-1.json")!
                    let url = URL(string: "https://hackingwithswift.com/samples/news-1.json")!
                    let (data, _) = try await URLSession.shared.data(from: url)
                    news = try JSONDecoder().decode([NewsItem].self, from: data)
                } catch {
                    // Something went wrong; clear the news
                    news = []
                }
            }
        }
    }
}