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.
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 } } } The full series is available on my profile and the components can also be found at shipios.app/components.
Happy Coding! 🎊
Top comments (0)