How to add custom views to Context Menus iOS

Question

I want to add reactions like iMessage above the text like this:

Currently, I'm only able to display the menu and I'm unsure of how to add a custom view above. This is how mine looks:

How can I add a view that is similar to the iMessage reactions view?

This is how I created the context menu in my collection view:

override func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? {
        let post = isFiltering ? filteredPosts[indexPath.section] : posts[indexPath.section]
        let identifier = NSString(string: "\(post.createdAt)")
        if post.username == "" {return nil}
        return UIContextMenuConfiguration(identifier: identifier, previewProvider: nil) { _ -> UIMenu? in
            let deleteAction = UIAction(title: "Delete", image: UIImage(systemName: "trash")) { _ in
                Service.deletePost(post: post)
            }
            let replyAction = UIAction(title: "Reply", image: UIImage(systemName: "arrowshape.turn.up.left")) { _ in
                self.setReplyingView(post: post)
            }
            
            let noteTagAction = UIAction(title: "Add Note Tag", image: UIImage(named: "noteFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "note", toPostWithId: post.id)
                }
            }
            
            let examTagAction = UIAction(title: "Add Exam Tag", image: UIImage(named: "examFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "exam", toPostWithId: post.id)
                }
            }
            
            let assignmentTagAction = UIAction(title: "Add Assignment Tag", image: UIImage(named: "assignmentFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "assignment", toPostWithId: post.id)
                }
            }
            
            let questionTagAction = UIAction(title: "Add Question Tag", image: UIImage(named: "questionFilterBlack")) { _ in
                DispatchQueue.main.async {
                    Service.addTag(named: "question", toPostWithId: post.id)
                }
            }
            guard let user = Service.shared.getUser() else { return UIMenu(title: "", children: [replyAction, deleteAction])}
            if user.uid == post.userId {
                return UIMenu(title: "", children: [replyAction, noteTagAction, examTagAction, assignmentTagAction, questionTagAction ,deleteAction])
            } else {
                return UIMenu(title: "", children: [replyAction, noteTagAction, examTagAction, assignmentTagAction, questionTagAction])
            }
        }
    }

However, when returning a UIContextMenuConfiguration I see no option to add a custom view.

Procurance

Answer 1

when you create the UIContextMenuConfiguration, here is a parameter that takes a closure here as 'previewProvider' you can return your custom view. Below is an example..

UIContextMenuConfiguration(identifier: "unique-id", previewProvider: {
        let customView = CustomViewController()
        return customView
    }, actionProvider: {
        
    })

Marlee

but here we can only return a UIViewController not custom View? – Antibaryon

I tried with ViewController but i don't receive any touches at all – Entozoic

Answer 2

https://github.com/Hungs20/Reaction-message-ContextMenu. This is my solution, show custom view with UITargetedPreview

@available(iOS 13.0, *)
func tableView(_ tableView: UITableView, previewForHighlightingContextMenuWithConfiguration configuration: UIContextMenuConfiguration) -> UITargetedPreview? {
    // makeTargetedPreview
}

@available(iOS 13.0, *)
func tableView(_ tableView: UITableView, previewForDismissingContextMenuWithConfiguration configuration: UIContextMenuConfiguration) -> UITargetedPreview? {
    // makeTargetedDismissPreview
}

Cule

What about iOS 13 below? – Antibaryon

Answer 3

I just released publicly the implementation we are using at Roze Messenger here: https://github.com/Roze-im/ContextualMenu

Hospodar