DEV Community

Cover image for Pull-to-Refresh in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

1

Pull-to-Refresh in iOS 18 - #30DaysOfSwift

Day 20: Adding a Pull-to-Refresh Feature to Your Lists or Views 🔄

Let's implement the pull-to-refresh feature in SwiftUI, a common gesture that enhances user experience by allowing users to refresh content easily.

Implementing Pull-to-Refresh

To add a pull-to-refresh feature, we can use the .refreshable modifier available in SwiftUI. This modifier simplifies the implementation process and allows us to handle the refresh action with minimal code.

Image description

Code Example

import SwiftUI

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"] // Sample data
    @State private var isLoading = false // State to manage loading state

    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                Text(item) // Display items in the list
            }
            .navigationTitle("Pull to Refresh")
            .refreshable {
                await loadData() // Call the async function to load data
            }
        }
    }

    func loadData() async {
        isLoading = true // Set loading state
        // Simulate network delay
        try? await Task.sleep(nanoseconds: 2 * 1_000_000_000) // Wait for 2 seconds
        // Update items with new data
        items.append("Item \(items.count + 1)") // Add a new item for demonstration
        isLoading = false // Reset loading state
    }
}

@main
struct PullToRefreshApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎊

Retry later

Top comments (0)

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay