How to add image in UITableViewRowAction?

Finally in iOS 11, SWIFT 4 We can add add image in UITableView's swipe action with help of UISwipeActionsConfiguration

@available(iOS 11.0, *)
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

            let action =  UIContextualAction(style: .normal, title: "Files", handler: { (action,view,completionHandler ) in
                //do stuff
                completionHandler(true)
            })
        action.image = UIImage(named: "apple.png")
        action.backgroundColor = .red
        let configuration = UISwipeActionsConfiguration(actions: [action])

        return configuration
    }

WWDC video at 28.34

Apple Doc

Note: I have used 50*50 points apple.png image with 50 tableview row height

I had the same problem with my project, so I did a workaround for this. I think, this is helpful for you.

When I swipe table cell to the left only for image width, it is working fine.

But when I swipe table cell more than image width, table cell display like this:

This happen because to add image I use 'backgroundColor' property.

copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)

So to fix this, I increase image width to the same as table width.

old image >>>>>>>>>>>> new image

>>>>

this is the new look:

This is my sample code:

func tableView(_ tableView: UITableView, editActionsForRowAt: IndexPath) -> [UITableViewRowAction]? {
    let copyButton = UITableViewRowAction(style: .normal, title: "") { action, index in

         print("copy button tapped")

    }
    copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)


    let accessButton = UITableViewRowAction(style: .normal, title: "") { action, index in

       print("Access button tapped")

    }
    accessButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaAccess.png")!)


    return [accessButton, copyButton]
}

I came across this same problem and discovered a really good pod for this called SwipeCellKit that makes it really easy to implement an image into your swipe cell action without the swipe action causing multiple images to show. it also allows for more customization such as different swipe directions.

Steps:

1. add pod
2. import SwipeCellKit
3. make cell conform to SwipeTableViewCell
4. in cellForRow function set the cells delegate to self
5. follow the implementation below or via the link

link to pod -> https://github.com/SwipeCellKit/SwipeCellKit

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> [SwipeAction]? {
    guard orientation == .right else { return nil }

    let deleteAction = SwipeAction(style: .destructive, title: "Delete") { action, indexPath in
        // handle action by updating model with deletion
    }

    // customize the action appearance
    deleteAction.image = UIImage(named: "delete")

    return [deleteAction]
}

func tableView(_ tableView: UITableView, editActionsOptionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> SwipeOptions {
    var options = SwipeOptions()
    options.expansionStyle = .destructive
    return options
}