Pull-to-refresh (refreshable) in iOS Swift - Mini App: Build & Ship

Build: Refreshable List

A screen that shows a list of items and allows the user to pull down to refresh the list content.

Target UI

---------------------
| Refreshable List  |
---------------------
| * Item 1          |
| * Item 2          |
| * Item 3          |
| * Item 4          |
| * Item 5          |
---------------------
(Pull down to refresh)

Display a vertical list of 5 items labeled 'Item 1' to 'Item 5'.

Add pull-to-refresh functionality using SwiftUI's refreshable modifier.

When pulled, simulate a 2-second refresh delay and then update the list by appending a new item labeled 'New Item X'.

Show a loading spinner during refresh.

Starter Code

iOS Swift

import SwiftUI

struct RefreshableListView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

    var body: some View {
        NavigationView {
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                }
            }
            .navigationTitle("Refreshable List")
            // TODO: Add pull-to-refresh here
        }
    }
}

struct RefreshableListView_Previews: PreviewProvider {
    static var previews: some View {
        RefreshableListView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct RefreshableListView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

    var body: some View {
        NavigationView {
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                }
            }
            .navigationTitle("Refreshable List")
            .refreshable {
                try? await Task.sleep(nanoseconds: 2_000_000_000) // 2 seconds delay
                let newItemNumber = items.count + 1
                items.append("New Item \(newItemNumber)")
            }
        }
    }
}

struct RefreshableListView_Previews: PreviewProvider {
    static var previews: some View {
        RefreshableListView()
    }
}

This solution uses SwiftUI's .refreshable modifier to add pull-to-refresh functionality to the List. When the user pulls down, the refresh closure runs asynchronously.

Inside the closure, Task.sleep pauses for 2 seconds to simulate loading. Then, a new item labeled "New Item X" is appended to the items array, where X is the next number after the current count.

The list automatically updates because items is a @State variable. The loading spinner is shown automatically by SwiftUI during the refresh.

Final Result

Completed Screen

---------------------
| Refreshable List  |
---------------------
| * Item 1          |
| * Item 2          |
| * Item 3          |
| * Item 4          |
| * Item 5          |
---------------------
(Pull down to refresh)

After refresh:
---------------------
| Refreshable List  |
---------------------
| * Item 1          |
| * Item 2          |
| * Item 3          |
| * Item 4          |
| * Item 5          |
| * New Item 6      |
---------------------

User pulls down on the list to trigger refresh.

A spinner appears at the top indicating loading.

After 2 seconds, the spinner disappears and a new item labeled 'New Item 6' is added to the bottom of the list.

Each subsequent pull adds another new item with incremented number.

Stretch Goal

Add a button in the navigation bar that resets the list to the original 5 items.

💡 Hint

Use a toolbar item with a Button that sets the items array back to the initial list.

Practice

1. What does the .refreshable modifier do in a SwiftUI List?

easy

A. Disables scrolling in the list

B. Automatically sorts the list items alphabetically

C. Changes the list background color

D. Allows users to pull down to refresh the list content

Solution

1. Step 1: Understand the purpose of .refreshable

   The .refreshable modifier adds pull-to-refresh functionality to scrollable views like List.

2. Step 2: Identify what pull-to-refresh does

   Pull-to-refresh lets users pull down the list to trigger a data update or refresh action.

3. Final Answer:

   Allows users to pull down to refresh the list content -> Option D

4. Quick Check:

   Pull-to-refresh = update list by pulling down [OK]

Hint: Pull-to-refresh updates list by pulling down [OK]

Common Mistakes:

• Thinking it sorts the list automatically
• Confusing it with disabling scroll
• Assuming it changes UI colors

2. Which of the following is the correct syntax to add pull-to-refresh to a SwiftUI List?

easy

A. List { ... }.refreshable { await loadData() }

B. List { ... }.onRefresh { loadData() }

C. List { ... }.refresh { loadData() }

D. List { ... }.pullToRefresh { await loadData() }

Solution

1. Step 1: Recall the official SwiftUI modifier for pull-to-refresh

   The correct modifier is .refreshable with an async closure.

2. Step 2: Match syntax with options

   List { ... }.refreshable { await loadData() } uses .refreshable { await loadData() } which is correct syntax.

3. Final Answer:

   List { ... }.refreshable { await loadData() } -> Option A

4. Quick Check:

   Correct modifier = .refreshable [OK]

Hint: Use .refreshable with async closure for pull-to-refresh [OK]

Common Mistakes:

• Using .onRefresh instead of .refreshable
• Missing await keyword in async closure
• Using non-existent modifiers like .pullToRefresh

3. Given this SwiftUI code snippet, what happens when the user pulls down the list?

List(items, id: \.self) { item in
  Text(item)
}
.refreshable {
  await fetchNewItems()
}

medium

A. The list reloads with new items after fetchNewItems completes

B. The list scrolls to the top without changing data

C. Nothing happens because refreshable requires a button

D. The app crashes due to missing completion handler

Solution

1. Step 1: Understand the effect of .refreshable with async closure

   When user pulls down, fetchNewItems() runs asynchronously to update data.

2. Step 2: Identify expected behavior after data fetch

   After fetchNewItems() completes, the list reloads showing updated items.

3. Final Answer:

   The list reloads with new items after fetchNewItems completes -> Option A

4. Quick Check:

   Pull-to-refresh triggers async update = list reload [OK]

Hint: Pull triggers async fetch, then list updates [OK]

Common Mistakes:

• Thinking refreshable needs a button
• Assuming no data change happens
• Believing app crashes without completion

4. What is wrong with this SwiftUI pull-to-refresh code?

List(data) { item in
  Text(item.name)
}
.refreshable {
  fetchData()
}

medium

A. List requires an explicit id parameter

B. refreshable cannot be used on List

C. fetchData() is missing await and async keywords

D. Text cannot display item.name

Solution

1. Step 1: Check the refreshable closure requirements

   The closure must be async and await the async function inside.

2. Step 2: Identify missing async/await usage

   fetchData() is called without await and the closure is not marked async, causing a compile error.

3. Final Answer:

   fetchData() is missing await and async keywords -> Option C

4. Quick Check:

   refreshable closure must be async with await calls [OK]

Hint: Use async closure and await inside refreshable [OK]

Common Mistakes:

• Forgetting to mark closure async
• Calling async functions without await
• Thinking refreshable can't be used on List

5. You want to add pull-to-refresh to a SwiftUI ScrollView that shows a list of messages. Which approach correctly updates the messages asynchronously when pulled?

hard

A. Use .onPull modifier with a synchronous closure

B. Use .refreshable on ScrollView with an async closure that updates the messages array

C. Add a Button inside ScrollView to manually refresh messages

D. Wrap ScrollView in a VStack and call a refresh function onAppear

Solution

1. Step 1: Identify the correct modifier for pull-to-refresh on ScrollView

   The .refreshable modifier works on ScrollView and accepts an async closure.

2. Step 2: Confirm asynchronous update of messages

   The async closure should update the messages array to refresh the UI after pull.

3. Step 3: Evaluate other options

   The other options do not provide pull-to-refresh behavior: using non-existent modifiers, refreshing on appear, or requiring manual buttons.

4. Final Answer:

   Use .refreshable on ScrollView with an async closure that updates the messages array -> Option B

5. Quick Check:

   Pull-to-refresh on ScrollView = .refreshable async closure [OK]

Hint: Use .refreshable with async closure on ScrollView [OK]

Common Mistakes:

• Trying to refresh with onAppear instead of pull
• Using buttons instead of pull-to-refresh
• Using non-existent modifiers like .onPull