Image in trailingSwipeActionsConfigurationForRowAt doesn't seem to work

Question

I'm trying to implement a new iOS11 feature that allows you to officially use an image in a tableview swipe action.

so, I came up with this:

@available(iOS 11.0, *)
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let deleteAction = UIContextualAction(style: .normal, title:  "", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            //whatever
            success(true)
        })
        let theImage: UIImage? = UIImage(named:"Delete")?.withRenderingMode(.alwaysOriginal)

        deleteAction.image = theImage
        return UISwipeActionsConfiguration(actions: [deleteAction])
    }

I have this .png sitting in my assets catalog. I tried WITH and WITHOUt the rendering mode. In either case, the image is correctly shown in the debugger:

but fails to show up in the Simulator ("Nothing here" marks the place where I would expect the image to show up):

Am I doing something wrong?

Answer 1

Old question,

But for those who are still trying to solve this issue, make sure your image size is the same or smaller than your cell size.

For my case, my image is too huge and only shows white background

Answer 2

I have the same exact issue, been trying to solve this for days now. No solutions found yet anywhere.

One deprecated workaround though is to set the backgroundColor constructed as patternImage like this:

let deleteAction = UIContextualAction(style: .normal, title:  "", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
        //whatever
        success(true)
    })
let theImage: UIImage? = UIImage(named:"Delete")
deleteAction.backgroundColor = UIColor(patternImage: theImage!)

Answer 3

This happens because icons that set with myAction.image turn white by default, and .withRenderingMode(.alwaysOriginal) doesn't solve the issue. I'm fighting the same thing at the very this moment - rendering mode in that case doesn't seem to work at all.

I found only one way around it - use myAction.backgroundColor = UIColor(patternImage: theImage) instead of myAction.image .

But if you will use this trick - please, notice that you will need to create an image with exact height as cell's height and with extended colour field on the right side of the image. It will help to keep image from repeating in visible on the screen area. And also, the text title will appear, so if you don't need it, just put an empty string in it.

Code example:

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

            let action = UIContextualAction(style: .normal, title: "", handler: { _, _, completionHandler in
                completionHandler(true)
            })

            let theImage: UIImage? = UIImage(named:"MyImage")
            action.backgroundColor = UIColor(patternImage: theImage!)

            return UISwipeActionsConfiguration(actions: [action])
        }

Image example:

Answer 4

This is what worked for me in iOS 13.4, Swift 4.2, Xcode 11.4

let deleteActionImage = UIImage(systemName: "trash.fill")?.withTintColor(UIColor.systemRed, renderingMode: .alwaysOriginal)

That line resulted in this --and it works in dark mode and light mode.

In the photo: right side of my cell on the left and the red trash button on the right