Message List - CometChat Docs

The CometChatMessageList component displays a scrollable list of messages in a conversation. It supports text messages, media messages, reactions, threads, and real-time updates for new messages, edits, and deletions.

AI Agent Component Spec

{
  "component": "CometChatMessageList",
  "package": "CometChatUIKitSwift",
  "import": "import CometChatUIKitSwift\nimport CometChatSDK",
  "description": "Displays a scrollable list of messages in a conversation with real-time updates for new messages, edits, deletions, reactions, and typing indicators.",
  "inherits": "UIViewController",
  "primaryOutput": {
    "callback": "onMessageClick",
    "type": "(BaseMessage) -> Void"
  },
  "props": {
    "data": {
      "messagesRequestBuilder": {
        "type": "MessagesRequest.MessageRequestBuilder?",
        "default": "nil",
        "note": "Custom request builder for filtering messages"
      },
      "reactionsRequestBuilder": {
        "type": "ReactionsRequest.ReactionsRequestBuilder?",
        "default": "nil",
        "note": "Custom request builder for fetching reactions"
      }
    },
    "callbacks": {
      "onThreadRepliesClick": "(BaseMessage, MessageTemplate) -> Void",
      "onReactionClick": "(ReactionCount, BaseMessage) -> Void",
      "onReactionListItemClick": "(MessageReaction, BaseMessage) -> Void",
      "onError": "(CometChatException) -> Void",
      "onEmpty": "() -> Void",
      "onLoad": "([BaseMessage]) -> Void"
    },
    "visibility": {
      "hideAvatar": { "type": "Bool", "default": false },
      "hideReceipts": { "type": "Bool", "default": false },
      "hideDateSeparator": { "type": "Bool", "default": false },
      "hideHeaderView": { "type": "Bool", "default": false },
      "hideFooterView": { "type": "Bool", "default": false },
      "hideReactionOption": { "type": "Bool", "default": false },
      "hideReplyInThreadOption": { "type": "Bool", "default": false },
      "hideEditMessageOption": { "type": "Bool", "default": false },
      "hideDeleteMessageOption": { "type": "Bool", "default": false },
      "hideCopyMessageOption": { "type": "Bool", "default": false },
      "hideMessageInfoOption": { "type": "Bool", "default": false },
      "hideTranslateMessageOption": { "type": "Bool", "default": false },
      "hideMessagePrivatelyOption": { "type": "Bool", "default": false },
      "hideGroupActionMessages": { "type": "Bool", "default": false },
      "hideNewMessageIndicator": { "type": "Bool", "default": false },
      "hideEmptyView": { "type": "Bool", "default": false },
      "hideErrorView": { "type": "Bool", "default": false },
      "hideLoadingView": { "type": "Bool", "default": false }
    },
    "sound": {
      "disableSoundForMessages": { "type": "Bool", "default": false }
    },
    "behavior": {
      "scrollToBottomOnNewMessages": { "type": "Bool", "default": true },
      "startFromUnreadMessages": { "type": "Bool", "default": false },
      "showMarkAsUnreadOption": { "type": "Bool", "default": false },
      "messageAlignment": { "type": "MessageAlignment", "default": ".standard" }
    },
    "viewSlots": {
      "headerView": "() -> UIView",
      "footerView": "() -> UIView",
      "emptyStateView": "() -> UIView",
      "errorStateView": "() -> UIView",
      "loadingStateView": "() -> UIView",
      "newMessageIndicatorView": "() -> UIView"
    },
    "formatting": {
      "datePattern": "(Int?) -> String",
      "timePattern": "(Int) -> String",
      "dateSeparatorPattern": "(Int?) -> String",
      "textFormatters": "[CometChatTextFormatter]"
    }
  },
  "events": [],
  "sdkListeners": [
    "onMessageReceived",
    "onMessageEdited",
    "onMessageDeleted",
    "onTypingStarted",
    "onTypingEnded",
    "onMessageReactionAdded",
    "onMessageReactionRemoved"
  ],
  "compositionExample": {
    "description": "MessageList is typically used within CometChatMessages alongside MessageHeader and MessageComposer",
    "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessageComposer"],
    "flow": "User views messages → types in composer → sends message → MessageList updates"
  },
  "types": {
    "BaseMessage": {
      "id": "Int",
      "sender": "User?",
      "receiver": "AppEntity?",
      "sentAt": "Int",
      "type": "String",
      "category": "String"
    },
    "MessageAlignment": {
      "standard": "Outgoing messages on right, incoming on left",
      "left": "All messages aligned to left"
    }
  }
}

Where It Fits

CometChatMessageList is the core component for displaying messages in a chat. It’s typically used within CometChatMessages alongside CometChatMessageHeader and CometChatMessageComposer.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class ChatViewController: UIViewController {
    
    private var messageList: CometChatMessageList!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupMessageList()
    }
    
    private func setupMessageList(for user: User) {
        messageList = CometChatMessageList()
        messageList.set(user: user)
        
        // Handle thread replies
        messageList.set(onThreadRepliesClick: { [weak self] message, template in
            self?.openThreadView(for: message)
        })
        
        // Handle reactions
        messageList.set(onReactionClick: { [weak self] reactionCount, message in
            self?.showReactionDetails(reactionCount, for: message)
        })
        
        addChild(messageList)
        view.addSubview(messageList.view)
        messageList.didMove(toParent: self)
    }
    
    private func openThreadView(for message: BaseMessage) {
        let threadMessages = CometChatMessages()
        threadMessages.set(user: message.sender as? User)
        threadMessages.set(parentMessage: message)
        navigationController?.pushViewController(threadMessages, animated: true)
    }
    
    private func showReactionDetails(_ reactionCount: ReactionCount, for message: BaseMessage) {
        // Show reaction details
    }
}

Minimal Render

import CometChatUIKitSwift
import CometChatSDK

let messageList = CometChatMessageList()
messageList.set(user: user)

Filtering

Use MessagesRequest.MessageRequestBuilder to filter which messages appear in the list. The builder pattern allows chaining multiple filter conditions.

import CometChatUIKitSwift
import CometChatSDK

// Create a custom request builder
let messageRequestBuilder = MessagesRequest.MessageRequestBuilder()
    .set(uid: "user-id")
    .set(limit: 30)
    .set(types: ["text", "image", "video"])

let messageList = CometChatMessageList()
messageList.set(user: user)
messageList.set(messagesRequestBuilder: messageRequestBuilder)

Filter Recipes

Recipe	Code
Text messages only	`.set(types: ["text"])`
Media messages only	`.set(types: ["image", "video", "audio", "file"])`
Search by keyword	`.set(searchKeyword: "hello")`
Limit results	`.set(limit: 50)`
Messages after timestamp	`.set(timestamp: 1234567890)`
Hide deleted messages	`.hideDeletedMessages(true)`
Specific categories	`.set(categories: ["message", "custom"])`

Actions and Events

Callback Props

onThreadRepliesClick

Fires when a user taps on the thread indicator of a message bubble.

import CometChatUIKitSwift
import CometChatSDK

let messageList = CometChatMessageList()

messageList.set(onThreadRepliesClick: { [weak self] message, template in
    guard let self = self else { return }
    
    let threadMessages = CometChatMessages()
    if let user = message.sender as? User {
        threadMessages.set(user: user)
    }
    threadMessages.set(parentMessage: message)
    self.navigationController?.pushViewController(threadMessages, animated: true)
})

onReactionClick

Fires when a user taps on a reaction on a message bubble.

import CometChatUIKitSwift
import CometChatSDK

let messageList = CometChatMessageList()

messageList.set(onReactionClick: { [weak self] reactionCount, message in
    guard let self = self else { return }
    print("Reaction \(reactionCount.reaction) tapped on message \(message.id)")
})

onReactionListItemClick

Fires when a user taps on a specific reaction in the reaction list.

import CometChatUIKitSwift
import CometChatSDK

let messageList = CometChatMessageList()

messageList.set(onReactionListItemClick: { [weak self] messageReaction, message in
    guard let self = self else { return }
    print("User \(messageReaction.reactedBy?.name ?? "") reacted with \(messageReaction.reaction)")
})

onError

Fires when an error occurs while loading messages.

import CometChatUIKitSwift

let messageList = CometChatMessageList()

messageList.set(onError: { error in
    print("Error loading messages: \(error.errorDescription)")
})

onEmpty

Fires when the message list is empty.

import CometChatUIKitSwift

let messageList = CometChatMessageList()

messageList.set(onEmpty: {
    print("No messages found")
})

onLoad

Fires when messages are successfully loaded.

import CometChatUIKitSwift
import CometChatSDK

let messageList = CometChatMessageList()

messageList.set(onLoad: { messages in
    print("Loaded \(messages.count) messages")
})

Actions Reference

Method	Description	Example
`set(onThreadRepliesClick:)`	Triggered when thread indicator is tapped	Open thread view
`set(onReactionClick:)`	Triggered when a reaction is tapped	Show reaction details
`set(onReactionListItemClick:)`	Triggered when reaction list item is tapped	Show who reacted
`set(onError:)`	Triggered when an error occurs	Show error alert
`set(onEmpty:)`	Triggered when list is empty	Show empty state
`set(onLoad:)`	Triggered when messages load	Analytics tracking
`scrollToBottom(isAnimated:)`	Scrolls to the bottom of the list	Navigate to latest
`goToMessage(withId:)`	Scrolls to a specific message	Jump to message

SDK Events (Real-Time, Automatic)

SDK Listener	Internal behavior
`onMessageReceived`	Adds new message to the list
`onMessageEdited`	Updates the edited message in place
`onMessageDeleted`	Removes or marks message as deleted
`onTypingStarted`	Shows typing indicator
`onTypingEnded`	Hides typing indicator
`onMessageReactionAdded`	Updates reaction count on message
`onMessageReactionRemoved`	Updates reaction count on message

Custom View Slots

Slot	Signature	Replaces
`headerView`	`() -> UIView`	Header above message list
`footerView`	`() -> UIView`	Footer below message list
`emptyStateView`	`() -> UIView`	Empty state display
`errorStateView`	`() -> UIView`	Error state display
`loadingStateView`	`() -> UIView`	Loading state display
`newMessageIndicatorView`	`() -> UIView`	New message indicator

headerView

Add a custom header above the message list.

import UIKit
import CometChatUIKitSwift

let messageList = CometChatMessageList()

let headerView = UIView()
headerView.backgroundColor = UIColor.systemGray6

let label = UILabel()
label.text = "Pinned Messages"
label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
label.textColor = UIColor.secondaryLabel
headerView.addSubview(label)

messageList.set(headerView: headerView)

footerView

Add a custom footer below the message list.

import UIKit
import CometChatUIKitSwift

let messageList = CometChatMessageList()

let footerView = UIView()
footerView.backgroundColor = UIColor.systemGray6

let quickRepliesStack = UIStackView()
quickRepliesStack.axis = .horizontal
quickRepliesStack.spacing = 8

let replies = ["👍", "Thanks!", "Got it"]
for reply in replies {
    let button = UIButton(type: .system)
    button.setTitle(reply, for: .normal)
    button.backgroundColor = UIColor.systemBackground
    button.layer.cornerRadius = 16
    quickRepliesStack.addArrangedSubview(button)
}

footerView.addSubview(quickRepliesStack)
messageList.set(footerView: footerView)

emptyStateView

Customize the view shown when there are no messages.

import UIKit
import CometChatUIKitSwift

let messageList = CometChatMessageList()

let emptyView = UIView()
let imageView = UIImageView(image: UIImage(systemName: "bubble.left.and.bubble.right"))
imageView.tintColor = UIColor.tertiaryLabel

let label = UILabel()
label.text = "No messages yet. Start the conversation!"
label.textColor = UIColor.secondaryLabel
label.textAlignment = .center

emptyView.addSubview(imageView)
emptyView.addSubview(label)

messageList.set(emptyView: emptyView)

loadingStateView

Customize the loading indicator.

import UIKit
import CometChatUIKitSwift

let messageList = CometChatMessageList()

let loadingView = UIActivityIndicatorView(style: .large)
loadingView.color = UIColor.systemBlue
loadingView.startAnimating()

messageList.set(loadingView: loadingView)

errorStateView

Customize the error state view.

import UIKit
import CometChatUIKitSwift

let messageList = CometChatMessageList()

let errorLabel = UILabel()
errorLabel.text = "Something went wrong!"
errorLabel.textColor = .red
messageList.set(errorView: errorLabel)

newMessageIndicatorView

Set a custom view for the unread message indicator.

import UIKit
import CometChatUIKitSwift

let messageList = CometChatMessageList()

let newMessageIndicatorView = NewUnreadMessageIndicator()
messageList.set(newMessageIndicatorView: newMessageIndicatorView)

class NewUnreadMessageIndicator: UIView {
    
    private let label: UILabel = {
        let label = UILabel()
        label.text = "New Messages ↓"
        label.textColor = .white
        label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
        label.textAlignment = .center
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.systemBlue
        layer.cornerRadius = 16
        
        addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Text Formatters

Customize how text is displayed in messages using text formatters.

import CometChatUIKitSwift
import CometChatSDK

let myCustomTextFormatter = MyCustomTextFormatter(trackingCharacter: "#")

let cometChatMessages = CometChatMessages()
    .set(user: user)
    .set(textFormatter: [myCustomTextFormatter])

You can create a custom text formatter:

import Foundation
import CometChatSDK
import CometChatUIKitSwift

class MyCustomTextFormatter: CometChatTextFormatter {
    
    override func getRegex() -> String {
        return "(\\bsure\\b)"
    }

    override func getTrackingCharacter() -> Character {
        return "#"
    }

    override func search(string: String, suggestedItems: ((_: [SuggestionItem]) -> ())? = nil) {
        // This function would call an API or perform a local search
    }

    override func onScrollToBottom(suggestionItemList: [SuggestionItem], listItem: ((_: [SuggestionItem]) -> ())?) {
        // This function would call the next page of an API
    }

    override func onItemClick(suggestedItem: SuggestionItem, user: User?, group: Group?) {
        // Handle clicked item
    }

    override func handlePreMessageSend(baseMessage: BaseMessage, suggestionItemList: [SuggestionItem]) {
        // Modify the message before it's sent
    }

    override func prepareMessageString(
        baseMessage: BaseMessage,
        regexString: String,
        alignment: MessageBubbleAlignment = .left,
        formattingType: FormattingType
    ) -> NSAttributedString {
        let attrString = NSMutableAttributedString(string: "SURE")
        if alignment == .left {
            // Received message styling
            attrString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: attrString.length))
        } else {
            // Sent message styling
            attrString.addAttribute(.foregroundColor, value: UIColor.green, range: NSRange(location: 0, length: attrString.length))
        }
        attrString.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 18), range: NSRange(location: 0, length: attrString.length))
        return attrString
    }

    override func onTextTapped(baseMessage: BaseMessage, tappedText: String, controller: UIViewController?) {
        // Handle text tap action
    }
}

Styling

Style Hierarchy

Global styles (CometChatMessageList.style) apply to all instances
Instance styles override global for specific instances

Global Level Styling

import UIKit
import CometChatUIKitSwift

// Apply global styles that affect all CometChatMessageList instances
CometChatMessageList.style.backgroundColor = UIColor.systemBackground
CometChatMessageList.style.emptyStateTitleColor = UIColor.label
CometChatMessageList.style.emptyStateTitleFont = UIFont.systemFont(ofSize: 20, weight: .bold)
CometChatMessageList.style.emptyStateSubtitleColor = UIColor.secondaryLabel

// Customize message bubble styles
CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor.systemBlue
CometChatMessageList.messageBubbleStyle.incoming.backgroundColor = UIColor.systemGray5

Instance Level Styling

import UIKit
import CometChatUIKitSwift

// Create a custom style for a specific instance
let messageListStyle = MessageListStyle()
messageListStyle.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.97, alpha: 1.0)
messageListStyle.borderWidth = 0
messageListStyle.borderColor = .clear

let messageList = CometChatMessageList()
messageList.style = messageListStyle

Key Style Properties

Property	Type	Default	Description
`backgroundColor`	`UIColor`	`CometChatTheme.backgroundColor01`	Background color of the list
`borderWidth`	`CGFloat`	`0`	Border width for the component
`borderColor`	`UIColor`	`.clear`	Border color for the component
`cornerRadius`	`CometChatCornerStyle?`	`nil`	Corner radius for the component
`shimmerGradientColor1`	`UIColor`	`CometChatTheme.backgroundColor04`	First shimmer gradient color
`shimmerGradientColor2`	`UIColor`	`CometChatTheme.backgroundColor03`	Second shimmer gradient color
`emptyStateTitleColor`	`UIColor`	`CometChatTheme.textColorPrimary`	Empty state title color
`emptyStateTitleFont`	`UIFont`	`CometChatTypography.Heading3.bold`	Empty state title font
`emptyStateSubtitleColor`	`UIColor`	`CometChatTheme.textColorSecondary`	Empty state subtitle color
`emptyStateSubtitleFont`	`UIFont`	`CometChatTypography.Body.regular`	Empty state subtitle font
`errorStateTitleColor`	`UIColor`	`CometChatTheme.textColorPrimary`	Error state title color
`errorStateTitleFont`	`UIFont`	`CometChatTypography.Heading3.bold`	Error state title font
`newMessageIndicatorTextColor`	`UIColor?`	`nil`	New message indicator text color
`newMessageIndicatorBackgroundColor`	`UIColor?`	`nil`	New message indicator background

Customization Matrix

What to change	Where	Property/API	Example
Background color	Style	`backgroundColor`	`UIColor.systemBackground`
Empty state text	Style	`emptyStateTitleColor`, `emptyStateTitleFont`	Custom colors and fonts
Error state text	Style	`errorStateTitleColor`, `errorStateTitleFont`	Custom colors and fonts
Loading shimmer	Style	`shimmerGradientColor1`, `shimmerGradientColor2`	Custom gradient colors
Outgoing bubble	Style	`messageBubbleStyle.outgoing`	`UIColor.systemBlue`
Incoming bubble	Style	`messageBubbleStyle.incoming`	`UIColor.systemGray5`
Hide avatars	Property	`hideAvatar`	`messageList.hideAvatar = true`
Hide receipts	Property	`hideReceipts`	`messageList.hideReceipts = true`
Custom header	View Slot	`set(headerView:)`	See Custom View Slots section

Props

All props are optional. Sorted alphabetically.

disableSoundForMessages

Disables notification sounds for new messages.


Type	`Bool`
Default	`false`

hideAvatar

Hides the sender’s avatar in message bubbles.


Type	`Bool`
Default	`false`

hideCopyMessageOption

Hides the copy message option in message actions.


Type	`Bool`
Default	`false`

hideDateSeparator

Hides the date separator between messages.


Type	`Bool`
Default	`false`

hideDeleteMessageOption

Hides the delete message option in message actions.


Type	`Bool`
Default	`false`

hideEditMessageOption

Hides the edit message option in message actions.


Type	`Bool`
Default	`false`

hideEmptyView

Hides the empty state view when no messages are available.


Type	`Bool`
Default	`false`

hideErrorView

Hides the error view when an error occurs.


Type	`Bool`
Default	`false`

hideFooterView

Hides the footer view of the message list.


Type	`Bool`
Default	`false`

hideGroupActionMessages

Hides group action messages (join/leave notifications).


Type	`Bool`
Default	`false`

hideHeaderView

Hides the header view of the message list.


Type	`Bool`
Default	`false`

hideLoadingView

Hides the loading view when fetching messages.


Type	`Bool`
Default	`false`

hideMessageInfoOption

Hides the message info option in message actions.


Type	`Bool`
Default	`false`

hideMessagePrivatelyOption

Hides the option to message privately.


Type	`Bool`
Default	`false`

hideNewMessageIndicator

Hides the new message indicator.


Type	`Bool`
Default	`false`

hideReactionOption

Hides the reaction option on messages.


Type	`Bool`
Default	`false`

hideReceipts

Hides message read receipts (ticks).


Type	`Bool`
Default	`false`

hideReplyInThreadOption

Hides the reply in thread option.


Type	`Bool`
Default	`false`

hideTranslateMessageOption

Hides the message translation option.


Type	`Bool`
Default	`false`

messageAlignment

Sets the alignment of messages in the list.


Type	`MessageAlignment`
Default	`.standard`

messagesRequestBuilder

Custom request builder for filtering messages.


Type	`MessagesRequest.MessageRequestBuilder?`
Default	`nil`

reactionsRequestBuilder

Custom request builder for fetching reactions.


Type	`ReactionsRequest.ReactionsRequestBuilder?`
Default	`nil`

scrollToBottomOnNewMessages

Automatically scrolls to bottom when new messages arrive.


Type	`Bool`
Default	`true`

showMarkAsUnreadOption

Shows the “Mark as unread” option in message actions.


Type	`Bool`
Default	`false`

startFromUnreadMessages

Starts the message list from the first unread message.


Type	`Bool`
Default	`false`

textFormatters

Array of text formatters for customizing message text display.


Type	`[CometChatTextFormatter]`
Default	`[]`

Events

The MessageList component does not emit any global UI events. It relies on SDK listeners for real-time updates.

Date Time Formatter

Customize how timestamps appear in the message list using the CometChatDateTimeFormatter.

Global Level Formatting

import CometChatUIKitSwift

// Customize time format
CometChatMessageList.dateTimeFormatter.time = { timestamp in
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
    let formatter = DateFormatter()
    formatter.dateFormat = "HH:mm"
    return formatter.string(from: date)
}

// Customize today format
CometChatMessageList.dateTimeFormatter.today = { timestamp in
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
    let formatter = DateFormatter()
    formatter.dateFormat = "h:mm a"
    return "Today • " + formatter.string(from: date)
}

// Customize older dates format
CometChatMessageList.dateTimeFormatter.otherDay = { timestamp in
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
    let formatter = DateFormatter()
    formatter.dateFormat = "dd MMM yyyy"
    return formatter.string(from: date)
}

Instance Level Formatting

import CometChatUIKitSwift

let messageList = CometChatMessageList()

messageList.set(datePattern: { timestamp in
    guard let timestamp = timestamp else { return "" }
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp / 1000))
    let formatter = DateFormatter()
    formatter.dateFormat = "dd-MM-yyyy"
    return formatter.string(from: date)
})

messageList.set(timePattern: { timestamp in
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
    let formatter = DateFormatter()
    formatter.dateFormat = "HH:mm"
    return formatter.string(from: date)
})

Date Separator Pattern

import CometChatUIKitSwift

let messageList = CometChatMessageList()

messageList.set(dateSeparatorPattern: { timestamp in
    guard let timestamp = timestamp else { return "" }
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
    
    if Calendar.current.isDateInToday(date) {
        return "Today"
    } else if Calendar.current.isDateInYesterday(date) {
        return "Yesterday"
    } else {
        let formatter = DateFormatter()
        formatter.dateFormat = "EEEE, MMM d"
        return formatter.string(from: date)
    }
})

Available Formatters

Formatter	Purpose	Default Format
`time`	Standard time display	`h:mm a`
`today`	Messages sent today	`Today`
`yesterday`	Messages from yesterday	`Yesterday`
`lastweek`	Messages within last week	Day name
`otherDay`	Older messages	`MMM d, yyyy`
`datePattern`	Custom date pattern	Configurable
`timePattern`	Custom time pattern	Configurable
`dateSeparatorPattern`	Date separator between messages	Configurable

Troubleshooting

Issue	Solution
Messages not loading	Ensure user/group is set and SDK is initialized
Real-time updates not working	Check SDK connection status and listeners
Reactions not showing	Verify reactions are enabled in dashboard
Thread replies not working	Ensure `hideReplyInThreadOption` is not set to true
Custom views not appearing	Ensure custom view has proper constraints and non-zero frame
Scroll position issues	Check `scrollToBottomOnNewMessages` setting

Messages - Parent component containing MessageList
Message Composer - Send messages in a conversation
Message Header - Display user/group details
Message Template - Create custom message bubble templates
Threaded Messages - Display threaded conversations

​Where It Fits

​Minimal Render

​Filtering

​Filter Recipes

​Actions and Events

​Callback Props

​onThreadRepliesClick

​onReactionClick

​onReactionListItemClick

​onError

​onEmpty

​onLoad

​Actions Reference

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​headerView

​footerView

​emptyStateView

​loadingStateView

​errorStateView

​newMessageIndicatorView

​Text Formatters

​Styling

​Style Hierarchy

​Global Level Styling

​Instance Level Styling

​Key Style Properties

​Customization Matrix

​Props

​disableSoundForMessages

​hideAvatar

​hideCopyMessageOption

​hideDateSeparator

​hideDeleteMessageOption

​hideEditMessageOption

​hideEmptyView

​hideErrorView

​hideFooterView

​hideGroupActionMessages

​hideHeaderView

​hideLoadingView

​hideMessageInfoOption

​hideMessagePrivatelyOption

​hideNewMessageIndicator

​hideReactionOption

​hideReceipts

​hideReplyInThreadOption

​hideTranslateMessageOption

​messageAlignment

​messagesRequestBuilder

​reactionsRequestBuilder

​scrollToBottomOnNewMessages

​showMarkAsUnreadOption

​startFromUnreadMessages

​textFormatters

​Events

​Date Time Formatter

​Global Level Formatting

​Instance Level Formatting

​Date Separator Pattern

​Available Formatters

​Troubleshooting

​Related Components