Adding swipe actions to any SwiftUI scroll view

Until iOS 27, SwiftUI's swipeActions modifier worked with rows inside a List. Starting with iOS 27, we can also add swipe actions to views inside a ScrollView.

Let's look at how to do that.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Adding swipe actions to a List

In a List, we attach the swipeActions modifier directly to each row:

List {
    ForEach(tasks) { task in
        TaskRow(task: task)
            .swipeActions {
                Button("Delete", systemImage: "trash", role: .destructive) {
                    delete(task)
                }
            }
    }
}

SwiftUI's List provides the container behavior needed to reveal the action when the user swipes the row. Applying the same row modifier inside a regular ScrollView, however, is not enough.

Enabling swipe actions in a ScrollView

For a custom scroll view, we additionally apply the new swipeActionsContainer modifier to the ScrollView:

ScrollView {
    LazyVStack(spacing: 12) {
        ForEach(tasks) { task in
            TaskRow(task: task)
                .swipeActions {
                    Button("Delete", systemImage: "trash", role: .destructive) {
                        delete(task)
                    }
                }
        }
    }
    .padding()
}
.swipeActionsContainer()

The two modifiers have different responsibilities: swipeActions defines the actions for an individual view, while swipeActionsContainer enables the interaction for the surrounding scroll view.

Customizing swipe actions

The existing options for swipe actions work in the new container as well. For example, we can add actions to both edges and control whether a full swipe performs the first action:

TaskRow(task: task)
    .swipeActions(edge: .leading, allowsFullSwipe: false) {
        Button("Favorite", systemImage: "star") {
            favorite(task)
        }
        .tint(.yellow)
    }
    .swipeActions(edge: .trailing) {
        Button("Delete", systemImage: "trash", role: .destructive) {
            delete(task)
        }
    }

The action labels, roles, tints, edges, and full-swipe behavior are configured just as they are for a List row. The only new part is marking the parent ScrollView as a swipe actions container.

With this small addition, we can keep native swipe interactions while using LazyVStack or another custom scrollable layout.