How do you make the sender display name appear with JSQMessageViewController?

Question

I have the following function that gets called for adding a message:

    func addMessage(text: String, displayName: String) {
        let message = JSQMessage(senderId: "tester", displayName: displayName, text: text)
        messages.append(message)

        finishReceivingMessage()

}

Then in this function

    override func collectionView(collectionView: JSQMessagesCollectionView!,
    messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {
        return messages[indexPath.item]
}

I return the message date for that indexPath. The message appears correctly but there is no display name.

Benzine

Answer 1

I think you are missing the attributedTextForMessageBubbleTopLabelAtIndexPath should look something like this

 override func collectionView(collectionView: JSQMessagesCollectionView?, attributedTextForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> NSAttributedString! {
    let message = messages[indexPath.item]
    switch message.senderId {
    case CURRENTUSERID:
        return nil
    default:
        guard let senderDisplayName = message.senderDisplayName else {
            assertionFailure()
            return nil
        }
        return NSAttributedString(string: senderDisplayName)
        
    }
}

Edit:

Also make sure you give the label a hight with this function

override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat {
   return 13 //or what ever height you want to give
}    

Magdamagdaia

Thanks it worked. I just had to add another function as well to specify the height of the top label. – Benzine

@Benzine could you please post the function you used to specify the height of the top label? – Browning

This is what I used: override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForCellBottomLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat { return 15 } – Benzine

Just type "collectionView" and you should be able to scroll down until you find heightForCellBottomLabelAtIndexPath (There is also a function to specify the height of the top label). – Benzine

For those who are looking to have the NSAttributedString appear on the top of the message bubble, override the heightForMessageBubbleTopLabelAtIndexPath method. The heightForCellBottomLabelAtIndexPath sets the height above the bubble, but not the bubble's top label. – Register

Thanks @Benzine I added that to the answer. – Magdamagdaia

@DanielLeonard I see that you know your thinkg when it comes to JSQMessageViewController. Could you please help me understand why I get no sound when trying to play a video message in a JSQMessageViewController? stackoverflow.com/questions/51911924 – Heritable

@Heritable I don't have any experience with that specific implementation. But I will take a look and see what I can do. – Magdamagdaia

@DanielLeonard I have found out. Thanks – Heritable

Answer 2

New Updated Methods

override func collectionView(_ collectionView: JSQMessagesCollectionView!, attributedTextForMessageBubbleTopLabelAt indexPath: IndexPath!) -> NSAttributedString!
     {
        let message = messages[indexPath.item]

        if message.senderId == senderId {
            return nil
        } else {
            guard let senderDisplayName = message.senderDisplayName else {
                assertionFailure()
                return nil
            }
            return NSAttributedString(string: senderDisplayName)

        }

    }

     override func collectionView(_ collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAt indexPath: IndexPath!) -> CGFloat
    {
        //return 17.0
        let message = messages[indexPath.item]

        if message.senderId == senderId {
            return 0.0
        } else {

            return 17.0

        }
    }

Pittance

Hey, that's exactly what I was looking for, however, there occurs an error. It gives back an error, saying, that initializer for conditional binding must have optional type, not String. How can I solve this? – Bethought

Answer 3

Make sure to add this function in order to display the name:

 override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat {
    return 15
}

Tetchy

Answer 4

Here is the code for swift 3

override func collectionView(_ collectionView: JSQMessagesCollectionView!, attributedTextForMessageBubbleTopLabelAt indexPath: IndexPath!) -> NSAttributedString! {
        return  NSAttributedString(string: senderDisplayName)
    }

     override  func collectionView(_ collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAt indexPath: IndexPath!) -> CGFloat {
        return 15 //your height
    }

Arliearliene