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.

Dan Leonard · Accepted Answer · 2016-08-28T17:24:00.073

15

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
}

Good Luck

edited Aug 28 '16 at 17:24

answered Mar 16 '16 at 19:33

Dan Leonard

3,325
1
20
32

1

Thanks it worked. I just had to add another function as well to specify the height of the top label. – Tob Mar 16 '16 at 23:36
@Tob could you please post the function you used to specify the height of the top label? – MikeG Apr 18 '16 at 16:47
2

This is what I used: `override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForCellBottomLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat { return 15 }` – Tob Apr 19 '16 at 17:53
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). – Tob Apr 19 '16 at 17:56
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. – Samuel Rosenstein Jun 02 '16 at 20:05
Thanks @Tob I added that to the answer. – Dan Leonard Aug 28 '16 at 17:24
@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? https://stackoverflow.com/questions/51911924 – bibscy Aug 19 '18 at 11:23
@bibscy I don't have any experience with that specific implementation. But I will take a look and see what I can do. – Dan Leonard Aug 20 '18 at 19:03
@DanielLeonard I have found out. Thanks – bibscy Aug 20 '18 at 19:05

score 5 · Answer 2 · answered Jul 19 '17 at 05:52

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

        }
    }

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? — AlexVilla147, Sep 12 '17 at 13:31

score 0 · Answer 3 · answered Aug 25 '16 at 10:56

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
}

score 0 · Answer 4 · answered Jul 22 '17 at 05:47

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
    }

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

4 Answers4