MessageKit Collection View doesn't display any cells after adding support for a custom cell`

Question

I've read through the guide for creating a custom cell in MessageKit here, and SO questions like this

I'm trying to create a custom cell; here's my code for a cell that inherits from a UICollectionViewCell:

import UIKit
import MessageKit

open class ChatReferenceCell: UICollectionViewCell {
    
    @IBOutlet weak var authorLabel: UILabel!
    @IBOutlet weak var referenceText: UITextView!
    @IBOutlet weak var participantsLabel: UILabel!
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }
    
    public required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupSubviews()
    }
    
    open func setupSubviews() {
    }
    
    open override func layoutSubviews() {
        super.layoutSubviews()
    }
    
    open func configure(with message: MessageType, at indexPath: IndexPath, and messagesCollectionView: MessagesCollectionView) {
        // Do stuff
        switch message.kind {
        case .custom(let data):
            guard let systemMessage = data as? String else { return }
            referenceText.text = systemMessage
        default:
            break
        }
    }
    
}

This is the XIB file for the custom cell:

In my ChatViewController, I set up the chat view like so:

    messagesCollectionView.register(ChatReferenceCell.self)
    messagesCollectionView = MessagesCollectionView(frame: .zero, collectionViewLayout: MyCustomMessagesFlowLayout())
    messagesCollectionView.messagesDataSource = self
    messagesCollectionView.messagesLayoutDelegate = self
    messagesCollectionView.messagesDisplayDelegate = self
    messagesCollectionView.messageCellDelegate = self

As well as configure the custom layout:

open class CustomMessageSizeCalculator: MessageSizeCalculator {
    open override func messageContainerSize(for message: MessageType) -> CGSize {
    // Customize this function implementation to size your content appropriately. This example simply returns a constant size
    // Refer to the default MessageKit cell implementations, and the Example App to see how to size a custom cell dynamically
        return CGSize(width: 300, height: 130)
    }
}


open class MyCustomMessagesFlowLayout: MessagesCollectionViewFlowLayout {
    lazy open var customMessageSizeCalculator = CustomMessageSizeCalculator(layout: self)

    override open func cellSizeCalculatorForItem(at indexPath: IndexPath) -> CellSizeCalculator {
        let message = messagesDataSource.messageForItem(at: indexPath, in: messagesCollectionView)
        if case .custom = message.kind {
            return customMessageSizeCalculator
        }
        return super.cellSizeCalculatorForItem(at: indexPath);
    }
}

Prior to adding in a custom cell, I was able to add text cells and display them as expected in the chat view controller:

After trying to add in support for a custom cell, I get a layout like this:

EDIT I tried correcting the way I register the cell since I'm using a NIB file, but still getting the same results:

messagesCollectionView.register(UINib(nibName: "ChatReferenceCell", bundle: nil), forCellWithReuseIdentifier: "kChatReferenceCollectionViewCell")

Bloc

did you find any solution if yes please post the changes you made? – Fustian

One thing I want to mention, is that initWithCoder is actually called. So cell is loaded from a nib. But its height is wrong, like only few points... – Nutrilite

I solved this by overriding sizeForItem method of CellSizeCalculator class. You just need to calculate the size of your cell. – Nutrilite

Answer 1

try this way.

messagesCollectionView = MessagesCollectionView(frame: .zero, collectionViewLayout: MyCustomMessagesFlowLayout()
messagesCollectionView.register(ChatReferenceCell.self)
super.viewDidLoad()

.....

Hazen