uitableview - Custom UITableViewCell changes width randomly (swift)

Question

I'm making a chess app for swift with a chat function. I upload my messages to firebase firestore and then, download them into a [Message] array and display them in a UITableView.

I've been looking around for this on stackoverflow and found that several people are having trouble with sizes of a custom UITableViewCell. I've run into the same problem, but in my case the width of the cell seems to randomly change every time I call .reloadData(). To illustrate :

The first 2 times or so when I type something in my chat it should look like this (the cells in the circle)

But as you can see after a few times this happens :

My code : Custom cell class

class MessageCustomCell: UITableViewCell {

    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var bgView: UIView!
    @IBOutlet weak var leftImage: UIImageView!
    @IBOutlet weak var messageBubble: UIView!
    @IBOutlet weak var messageLabel: UILabel!
    @IBOutlet weak var rightImage: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        messageLabel.numberOfLines = 0
        messageBubble.layer.cornerRadius = 5
    }
}

TableView delegate methods (TableView = messageView)

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return allMessages.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = messageView.dequeueReusableCell(withIdentifier: "MessageCustomCell") as! MessageCustomCell
    //cell.width = tableView.frame.width
    let msg = allMessages[indexPath.row]
    //cell.frame.size.width = messageView.frame.width
    //cell.contentView.frame.size.width = messageView.frame.width
    let date = msg.time
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "d/M/yy, h:mm"
    let realDate = dateFormatter.string(from: date)
    print(msg.fromUserName!)

    if msg.fromUserName! == currentUserName {
        cell.messageBubble.backgroundColor = UIColor(named: "lightSquare")
        cell.messageLabel.textColor = .black
        cell.rightImage.isHidden = true
    } else {
        cell.messageBubble.backgroundColor = UIColor(named: "darkSquare")
        cell.messageLabel.textColor = .white
        cell.leftImage.isHidden = true
    }
    cell.dateLabel.text = realDate
    cell.messageLabel.text = msg.text!
    return cell
}

In my MessageCustomcell.xib file I have a few constraints :

• I've put the leftImage, messageBubble (UIView), rightImage in a horizontal stackview. The images have only width and height constraints. The label in the messageBubble has constraints to its superview (top,bottom,trailing,leading)
• The stackView has constraints to the bgView (UIView), also top bottom trailing and leading.
• Same for the bgView to the safe area.

I've tried setting the frame for the custom cell, but that didn't seem to work, so I've commented that out.

Really hope someone can help me out. If you guys need more info then please do let me know :) Thanks all.

EDIT :

Here are my constraints for the custom cell xib file.

Answer 1

Alright thanks to @SPatel, who pointed out to make 2 separate .xib files for the receiver chat bubble and the sender chat bubble. This actually worked for my situation and was the right way to go in the first place, instead of manipulating one custom cell for both sender and receiver.

I'm thinking the constraint issue had to do with me trying to hide either the right image or the left image, to change the custom cell appearance for both sides. That must have messed up the whole constraints situation for the custom cell.

Anyway, happy man. Moving on!