Customizing Swipe to Delete Button

Question

Ammar S. Mitoori OP

Created Jan ’25

Replies 3

Boosts 1

Participants 3

Hi,

Im trying to customize the button that appear when swiping a for each list for deleting trying to show a red circle and a white trash icon inside it, but instead I get a white empty button ?

            .swipeActions(edge: .trailing) {
                Button {
                    deletePatient(patient: patient)
                } label: {
                    ZStack {
                        Circle()
                            .fill(Color.red)
                            .frame(width: 50, height: 50)
                        Image(systemName: "trash")
                            .foregroundColor(.white)
                    }
                }
                .tint(.white)
            }

Boost

Answer 1

Claude31 OP

Jan ’25

Problem is that a swipe action has its own styling that is applied by the system.

See details here: https://stackoverflow.com/questions/73783291/set-image-color-in-swipeaction

So, one workaround is to create and use your own image with the white trash inside a red circle.

.swipeActions(edge: .trailing) {
       Button {
             print("custom") // Your code here
        } label: {
             Image(uiImage: UIImage(named:"Trash in red circle")!) 
                .frame(width: 50, height: 50)
         }
         .tint(.white)

Here is the result:

The trash icon named:"Trash in red circle":

The swipe:

Capture d’écran 2025-01-25 à 14.57.40.png

Hope that helps.

1

Answer 2

DTS Engineer OP

Apple

Jan ’25

You might be able to implement a custom swipe action using a drag gesture and a contextShape. However this is something you'll have to implement and manage.

Apart from that, If you'd like us to consider adding more customizations to SwiftUI swipeActions please file an enhancement request using Feedback Assistant. Once you file the request, please post the FB number here.

If you're not familiar with how to file enhancement requests, take a look at Bug Reporting: How and Why?

1

Answer 3

Ammar S. Mitoori OP

Jan ’25

@DTS Engineer Hi, thanks allot I’ve already done it by implementing 2 views on top of each other and using the drag gesture. But now I’m facing new issue, this foreach list which is embedded in a Scroll View stopped responding to scrolling everything goes to the cells ? How to fix that ?

0