How to change the background color of the Message Header - iOS UI Kit

[ashfaq-cometchat]

How To Change The Background Color Of Message Header In iOS UI Kit

This guide provides an outline of how you can change the background color of the Message Header provided in our iOS UI Kit.

Guide Details

Language/Framework: Swift

UI Kit Version:

  pod 'CometChatUIKitSwift', '4.3.10'

CometChat MessageHeader Documentation:
Documentation

Solution

Changing the background color of the CometChat Message Header straightforward. To achieve this, follow this guide :

If you are using CometChatConversationWithMessages:

1. Create the object of the MessageHeaderConfiguration, MessageHeaderStyle, and MessagesConfiguration:

let messagesConfiguration = MessagesConfiguration()
let messageHeaderConfigurations = MessageHeaderConfiguration()
let messageHeaderStyle = MessageHeaderStyle()

2. Set the background using the .set() property in the MessageHeaderStyle:

messageHeaderStyle.set(background: UIColor.red)

3. Pass the messageHeaderStyle to the messageHeaderConfigurations:

messageHeaderStyle.set(background: UIColor.red)

4. Pass the messageHeaderConfigurations to the messagesConfiguration:

messagesConfiguration.set(messageHeaderConfiguration: messageHeaderConfigurations)

5. Finally, pass the messagesConfiguration to the CometChatConversationsWithMessages component:

conversationsWithMessages.set(messagesConfiguration: messagesConfiguration)

Full Code

let conversationsWithMessages = CometChatConversationsWithMessages()
let messagesConfiguration = MessagesConfiguration()
let messageHeaderConfigurations = MessageHeaderConfiguration()
let messageHeaderStyle = MessageHeaderStyle()

messageHeaderStyle.set(background: UIColor.red)
messageHeaderConfigurations.set(messageHeaderStyle: messageHeaderStyle)
messagesConfiguration.set(messageHeaderConfiguration: messageHeaderConfigurations)
        
conversationsWithMessages.set(messagesConfiguration: messagesConfiguration)

Run Your App

After implementing the changes, run your app and you’ll see that the background color of the Message Header is changed.