0
0
iOS Swiftmobile~5 mins

Pull-to-refresh (refreshable) in iOS Swift

Choose your learning style9 modes available
Introduction

Pull-to-refresh lets users update content by pulling down on a list. It feels natural and keeps data fresh without extra buttons.

When showing a list of news articles that can update with new stories.
In a chat app to load the latest messages by pulling down.
On a weather app to refresh the current weather data.
In a social media feed to get new posts without restarting the app.
Syntax
iOS Swift
List {
    // your list items here
}
.refreshable {
    // code to refresh data
}

The .refreshable modifier is added to a List or scrollable view.

Inside the closure, you put the code to update your data asynchronously.

Examples
This example shows a list of items that refreshes when pulled down.
iOS Swift
List(items, id: \.self) { item in
    Text(item)
}
.refreshable {
    await fetchData()
}
You can also add pull-to-refresh to a ScrollView, not just lists.
iOS Swift
ScrollView {
    VStack {
        Text("Pull down to refresh")
    }
}
.refreshable {
    await loadNewContent()
}
Sample App

This app shows a list of fruits. When you pull down, it waits 1 second and adds "Date" to the list.

iOS Swift
import SwiftUI

struct ContentView: View {
    @State private var items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                Text(item)
            }
            .refreshable {
                await refreshItems()
            }
            .navigationTitle("Fruits")
        }
    }

    func refreshItems() async {
        try? await Task.sleep(nanoseconds: 1_000_000_000) // simulate delay
        await MainActor.run {
            items.append("Date")
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
OutputSuccess
Important Notes

Use await inside .refreshable to handle asynchronous data loading smoothly.

Make sure your data update is on the main thread if it affects UI.

Pull-to-refresh works best with scrollable views like List or ScrollView.

Summary

Pull-to-refresh lets users update lists by pulling down.

Use the .refreshable modifier on scrollable views.

Inside the refresh closure, update your data asynchronously.