Creating an Intuitive Custom Swipe Experience with SwiftUI
Tags: ios, swiftui, swift
Published: 2023-09-26 13:13:46

---
title: Creating an Intuitive Custom Swipe Experience with SwiftUI
published: true
date: 2023-01-04 22:33:45 UTC
tags: iOS,SwiftUI,Swift
cover_image: https://swift.my.id/content/images/2023/01/Screenshot-2023-01-05-at-05.25.49.jpg
canonical_url: https://swift.my.id/swipe-actions-modifier/
---

One of the new features in **SwiftUI 3** is the addition of the **swipeActions()** modifier for List rows. By using **swipeActions** , you can easily add buttons as left or right swipe actions in a List. This is something very popular and commonly used in mobile email client applications.

```swift
func swipeActions<T>(
    edge: HorizontalEdge = .trailing,
    allowsFullSwipe: Bool = true,
    content: () -> T
) -> some View where T : View
```

As shown in the description of the **swipeActions** modifier above, the `edge` parameter is used to set the swipe direction, whether from the left ( **leading** ) or from the right ( **trailing** ). `allowsFullSwipe` is used to determine whether a full swipe action can be performed (meaning swiping all the way to the left or right), which automatically triggers the action.

This is an example of how to use **swipeActions** with multiple buttons, both from left or right directions.

```swift
import SwiftUI

struct ContentView: View {
    @State private var info = ""
    var body: some View {
        VStack {
            Text("\(info)")           
            List {
                ForEach(0 ..< 10, id: \.self) { i in
                    Text("Item number \(i)")
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            Button {
                                info = "Mark read item \(i)"
                            } label: {
                                Label(
                                    "Mark read",
                                    systemImage: "envelope.open.fill"
                                )
                            }
                            .tint(.blue)

                            Button {
                                info = "Reply item \(i)"
                            } label: {
                                Label(
                                    "Reply",
                                    systemImage: "envelope.arrow.triangle.branch.fill"
                                )
                            }
                            .tint(.green)
                            
                            Button {
                                info = "Favorite item \(i)"
                            } label: {
                                Text(
                                    "Favorite"
                                )
                            }
                            .tint(.brown)
                        }
                        .swipeActions(edge: .leading) {
                            Button {
                                info = "Archive item \(i)"
                            } label: {
                                Label(
                                    "Archive",
                                    systemImage: "archivebox.fill"
                                )
                            }
                            .tint(.cyan)
                            
                            
                        }
                }
            }
        }
    }
}
```

_Example of using swipeActions_

<video src="https://swift.my.id/content/media/2023/01/Screen-Recording-2023-01-05-at-05.17.51-1.mp4" controls="controls"></video>
_Demo swipeActions_

In the example above, we use both **Buttons** with **Labels** and **Buttons** with **Text**. The difference is in their appearance. If you use Label, only the icon will appear, while with Text, the text will also appear.

```swift
Button {
	info = "Favorite item \(i)"
} label: {
	Text("Favorite")
}
.tint(.brown)
```
_Button with Text_


```swift
Button {
	info = "Archive item \(i)"
} label: {
	Label("Archive",systemImage: "archivebox.fill")
}
.tint(.cyan)
```
_Button with Label_

Feel free to also try changing the value of `allowsFullSwipe` to see the difference more clearly.

That's all for this tip/trick. Happy experimenting, and hopefully, this little tip will be useful.

{% github https://github.com/meshwara/SwiftUI-SwipeActions %}