Swipe actions in iOS Swift - Mini App: Build & Ship

Build: Swipe Actions List

A simple list where each item can be swiped left to reveal Delete and Edit actions.

Target UI

-------------------------
| Swipe Actions List     |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| Item 4                |
| Item 5                |
-------------------------

Swipe left on any item to show buttons:
[Delete] [Edit]

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

Enable swipe left gesture on each list item.

Reveal two swipe actions: Delete (red) and Edit (gray).

Delete action removes the item from the list with animation.

Edit action prints 'Edit tapped on Item X' to the console.

Starter Code

iOS Swift

import SwiftUI

struct SwipeActionsListView: 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)
                        // TODO: Add swipe actions here
                }
            }
            .navigationTitle("Swipe Actions List")
        }
    }
}

struct SwipeActionsListView_Previews: PreviewProvider {
    static var previews: some View {
        SwipeActionsListView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct SwipeActionsListView: 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)
                        .swipeActions(edge: .trailing) {
                            Button(role: .destructive) {
                                withAnimation {
                                    items.removeAll { $0 == item }
                                }
                            } label: {
                                Label("Delete", systemImage: "trash")
                            }
                            .tint(.red)

                            Button {
                                print("Edit tapped on \(item)")
                            } label: {
                                Label("Edit", systemImage: "pencil")
                            }
                            .tint(.gray)
                        }
                }
            }
            .navigationTitle("Swipe Actions List")
        }
    }
}

struct SwipeActionsListView_Previews: PreviewProvider {
    static var previews: some View {
        SwipeActionsListView()
    }
}

This solution uses SwiftUI's swipeActions modifier on each list item to add swipe gestures.

The Delete button has a destructive role and red tint. When tapped, it removes the item from the list with animation.

The Edit button has a gray tint and prints a message to the console identifying which item was tapped.

The list updates dynamically because the items array is marked with @State.

Final Result

Completed Screen

-------------------------
| Swipe Actions List     |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| Item 4                |
| Item 5                |
-------------------------

Swipe left on an item reveals:
[Delete (red)] [Edit (gray)]

Swipe left on any item to reveal Delete and Edit buttons.

Tap Delete to remove the item with a smooth animation.

Tap Edit to print 'Edit tapped on Item X' in the console.

Stretch Goal

Add a confirmation alert before deleting an item.

💡 Hint

Use the .alert modifier with a state variable to show a confirmation dialog before removing the item.