Groups - CometChat Docs

The CometChatGroups component displays a searchable list of groups, enabling users to browse, join, and interact with group conversations.

Prerequisites

Before using this component, ensure you have:

Completed Getting Started setup
User logged in with CometChatUIKit.login()
At least one group created in your CometChat dashboard

Usage

Basic Implementation

Display a groups list and open messages when a group is tapped:

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class GroupsViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupGroups()
    }
    
    private func setupGroups() {
        let groups = CometChatGroups()
        
        // Handle group selection
        groups.set(onItemClick: { [weak self] group, indexPath in
            self?.openMessages(for: group)
        })
        
        let navController = UINavigationController(rootViewController: groups)
        navController.modalPresentationStyle = .fullScreen
        present(navController, animated: true)
    }
    
    private func openMessages(for group: Group) {
        let messages = CometChatMessages()
        messages.set(group: group)
        
        if let nav = presentedViewController as? UINavigationController {
            nav.pushViewController(messages, animated: true)
        }
    }
}

Production Implementation

Complete implementation with selection mode, error handling, and navigation:

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class ProductionGroupsViewController: UIViewController {
    
    private var groups: CometChatGroups!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        setupGroups()
        setupEventListeners()
    }
    
    private func setupGroups() {
        // Configure request builder for joined groups only
        let requestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
            .set(joinedOnly: true)
        
        groups = CometChatGroups(groupsRequestBuilder: requestBuilder)
        
        // Handle group tap
        groups.set(onItemClick: { [weak self] group, indexPath in
            self?.openGroupChat(group)
        })
        
        // Handle long press for options
        groups.set(onItemLongClick: { [weak self] group, indexPath in
            self?.showGroupOptions(group)
        })
        
        // Handle back button
        groups.set(onBack: { [weak self] in
            self?.navigationController?.popViewController(animated: true)
        })
        
        // Handle errors
        groups.set(onError: { [weak self] error in
            self?.showError(error)
        })
        
        // Handle empty state
        groups.set(onEmpty: { [weak self] in
            print("No groups available")
        })
        
        // Handle loaded groups
        groups.set(onLoad: { groups in
            print("Loaded \(groups.count) groups")
        })
        
        navigationController?.pushViewController(groups, animated: true)
    }
    
    private func setupEventListeners() {
        CometChatGroupEvents.addListener("groups-vc-listener", self as CometChatGroupEventListener)
    }
    
    private func openGroupChat(_ group: Group) {
        let messages = CometChatMessages()
        messages.set(group: group)
        navigationController?.pushViewController(messages, animated: true)
    }
    
    private func showGroupOptions(_ group: Group) {
        let alert = UIAlertController(title: group.name, message: nil, preferredStyle: .actionSheet)
        
        alert.addAction(UIAlertAction(title: "View Details", style: .default) { [weak self] _ in
            self?.showGroupDetails(group)
        })
        
        alert.addAction(UIAlertAction(title: "Leave Group", style: .destructive) { [weak self] _ in
            self?.leaveGroup(group)
        })
        
        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
        
        present(alert, animated: true)
    }
    
    private func showGroupDetails(_ group: Group) {
        let details = CometChatGroupDetails()
        details.set(group: group)
        navigationController?.pushViewController(details, animated: true)
    }
    
    private func leaveGroup(_ group: Group) {
        CometChat.leaveGroup(GUID: group.guid) { [weak self] _ in
            DispatchQueue.main.async {
                self?.groups.remove(group: group)
            }
        } onError: { error in
            print("Leave group error: \(error?.errorDescription ?? "")")
        }
    }
    
    private func showError(_ error: CometChatException) {
        let alert = UIAlertController(
            title: "Error",
            message: error.errorDescription,
            preferredStyle: .alert
        )
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
    
    deinit {
        CometChatGroupEvents.removeListener("groups-vc-listener")
    }
}

// MARK: - Group Event Listener
extension ProductionGroupsViewController: CometChatGroupEventListener {
    
    func onGroupCreate(group: Group) {
        groups.insert(group: group, at: 0)
    }
    
    func onGroupDelete(group: Group) {
        groups.remove(group: group)
    }
    
    func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
        groups.update(group: joinedGroup)
    }
    
    func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
        groups.update(group: leftGroup)
    }
    
    func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
        groups.update(group: group)
    }
    
    func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
        groups.update(group: bannedGroup)
    }
    
    func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
        groups.update(group: unbannedUserGroup)
    }
    
    func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
        groups.update(group: kickedGroup)
    }
    
    func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
        groups.update(group: group)
    }
    
    func onOwnershipChange(group: Group?, member: GroupMember?) {
        if let group = group {
            groups.update(group: group)
        }
    }
}

Actions

Actions let you customize component behavior through callbacks.

Action	Description
`set(onItemClick:)`	Triggered when a group is tapped
`set(onItemLongClick:)`	Triggered on long press
`set(onBack:)`	Triggered when back button is pressed
`set(onSelection:)`	Triggered when groups are selected (selection mode)
`set(onError:)`	Triggered when an error occurs
`set(onEmpty:)`	Triggered when the list is empty
`set(onLoad:)`	Triggered when groups are loaded

let groups = CometChatGroups()

groups.set(onItemClick: { group, indexPath in
    print("Tapped: \(group.name ?? "")")
})

groups.set(onItemLongClick: { group, indexPath in
    print("Long pressed: \(group.name ?? "")")
})

groups.set(onBack: {
    print("Back button pressed")
})

groups.set(onSelection: { selectedGroups in
    print("Selected \(selectedGroups.count) groups")
})

groups.set(onError: { error in
    print("Error: \(error.errorDescription)")
})

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

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

Filters

Filter the groups list using GroupsRequestBuilder.

Method	Type	Description
`setLimit`	Int	Maximum groups per request
`setSearchKeyword`	String	Filter by search term
`joinedOnly`	Bool	Show only joined groups
`setTags`	[String]	Filter by tags
`withTags`	Bool	Include tag information

Show Only Joined Groups

let requestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
    .set(joinedOnly: true)

let groups = CometChatGroups(groupsRequestBuilder: requestBuilder)

Search Groups

let searchBuilder = GroupsRequest.GroupsRequestBuilder(limit: 20)
    .set(searchKeyword: "design")

let groups = CometChatGroups(groupsRequestBuilder: searchBuilder)

Filter by Tags

let tagBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
    .set(tags: ["engineering", "marketing"])
    .set(withTags: true)

let groups = CometChatGroups(groupsRequestBuilder: tagBuilder)

Events

Listen for group-related events across your app.

Event	Description
`onGroupCreate`	Group was created
`onGroupDelete`	Group was deleted
`onGroupMemberJoin`	User joined a group
`onGroupMemberLeave`	User left a group
`onGroupMemberAdd`	Members were added
`onGroupMemberBan`	Member was banned
`onGroupMemberUnban`	Member was unbanned
`onGroupMemberKick`	Member was kicked
`onGroupMemberChangeScope`	Member scope changed
`onOwnershipChange`	Group ownership transferred

Add Event Listener

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class GroupEventsViewController: UIViewController {
    
    private let listenerID = "group-events-listener"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        CometChatGroupEvents.addListener(listenerID, self as CometChatGroupEventListener)
    }
    
    deinit {
        CometChatGroupEvents.removeListener(listenerID)
    }
}

extension GroupEventsViewController: CometChatGroupEventListener {
    
    func onGroupCreate(group: Group) {
        print("Group created: \(group.name ?? "")")
    }
    
    func onGroupDelete(group: Group) {
        print("Group deleted: \(group.name ?? "")")
    }
    
    func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
        print("\(joinedUser.name ?? "") joined \(joinedGroup.name ?? "")")
    }
    
    func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
        print("\(leftUser.name ?? "") left \(leftGroup.name ?? "")")
    }
    
    func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
        print("\(members.count) members added to \(group.name ?? "")")
    }
    
    func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
        print("\(bannedUser.name ?? "") banned from \(bannedGroup.name ?? "")")
    }
    
    func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
        print("\(unbannedUserUser.name ?? "") unbanned from \(unbannedUserGroup.name ?? "")")
    }
    
    func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
        print("\(kickedUser.name ?? "") kicked from \(kickedGroup.name ?? "")")
    }
    
    func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
        print("\(updatedUser.name ?? "") scope changed to \(scopeChangedTo)")
    }
    
    func onOwnershipChange(group: Group?, member: GroupMember?) {
        print("Ownership transferred to \(member?.name ?? "")")
    }
}

Emit Events

// Emit group created event
CometChatGroupEvents.emitOnGroupCreate(group: group)

// Emit group deleted event
CometChatGroupEvents.emitOnGroupDelete(group: group)

// Emit member joined event
CometChatGroupEvents.emitOnGroupMemberJoin(joinedUser: user, joinedGroup: group)

// Emit member left event
CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: user, leftGroup: group)

// Emit members added event
CometChatGroupEvents.emitOnGroupMemberAdd(group: group, members: members, addedBy: user)

// Emit member banned event
CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: user, bannedGroup: group, bannedBy: admin)

// Emit member unbanned event
CometChatGroupEvents.emitOnGroupMemberUnban(unbannedUserUser: user, unbannedUserGroup: group, unbannedBy: admin)

// Emit member kicked event
CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: user, kickedGroup: group, kickedBy: admin)

Styling

Customize the appearance using GroupsStyle.

Global Styling

Apply styles to all CometChatGroups instances:

// Configure avatar style
let avatarStyle = AvatarStyle()
avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

// Configure groups style
CometChatGroups.style.titleColor = UIColor(hex: "#F76808")
CometChatGroups.style.titleFont = UIFont.systemFont(ofSize: 34, weight: .bold)
CometChatGroups.avatarStyle = avatarStyle

Instance Styling

Apply styles to a specific instance:

let avatarStyle = AvatarStyle()
avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)

let groupsStyle = GroupsStyle()
groupsStyle.titleColor = UIColor(hex: "#F76808")
groupsStyle.titleFont = UIFont.systemFont(ofSize: 34, weight: .bold)
groupsStyle.backgroundColor = .systemBackground
groupsStyle.listItemTitleTextColor = .label
groupsStyle.listItemSubTitleTextColor = .secondaryLabel

let groups = CometChatGroups()
groups.style = groupsStyle
groups.avatarStyle = avatarStyle

Style Properties

Property	Description	Code
`listItemSelectedImage`	Check box image when a list item is selected	`listItemSelectedImage`
`listItemDeSelectedImage`	Check box image when a list item is deselected	`listItemDeSelectedImage`
`searchIconTintColor`	Tint color for the search icon	`searchIconTintColor`
`searchBarStyle`	Style of the search bar	`searchBarStyle`
`searchTintColor`	Tint color for the search bar	`searchTintColor`
`searchBarTintColor`	Background color of the search bar	`searchBarTintColor`
`searchBarPlaceholderTextColor`	Placeholder text color for the search bar	`searchBarPlaceholderTextColor`
`searchBarPlaceholderTextFont`	Font for the placeholder text in the search bar	`searchBarPlaceholderTextFont`
`searchBarTextColor`	Color of the text entered in the search bar	`searchBarTextColor`
`searchBarTextFont`	Font for the text in the search bar	`searchBarTextFont`
`searchBarBackgroundColor`	Background color of the search bar	`searchBarBackgroundColor`
`searchBarCancelIconTintColor`	Tint color for the cancel icon in the search bar	`searchBarCancelIconTintColor`
`searchBarCrossIconTintColor`	Tint color for the cross icon in the search bar	`searchBarCrossIconTintColor`
`backgroundColor`	Background color of the overall view	`backgroundColor`
`borderWidth`	Width of the border around the view	`borderWidth`
`borderColor`	Color of the border around the view	`borderColor`
`cornerRadius`	Corner radius settings for the view	`cornerRadius`
`titleColor`	Color for the title text	`titleColor`
`titleFont`	Font used for the title text	`titleFont`
`largeTitleColor`	Color for the large title text	`largeTitleColor`
`largeTitleFont`	Font used for the large title text	`largeTitleFont`
`navigationBarTintColor`	Background color of the navigation bar	`navigationBarTintColor`
`navigationBarItemsTintColor`	Tint color for items in the navigation bar	`navigationBarItemsTintColor`
`errorTitleTextFont`	Font used for the error title text	`errorTitleTextFont`
`errorTitleTextColor`	Color of the error title text	`errorTitleTextColor`
`errorSubTitleFont`	Font used for the error subtitle text	`errorSubTitleFont`
`errorSubTitleTextColor`	Color of the error subtitle text	`errorSubTitleTextColor`
`retryButtonTextColor`	Color for the retry button text	`retryButtonTextColor`
`retryButtonTextFont`	Font used for the retry button text	`retryButtonTextFont`
`retryButtonBackgroundColor`	Background color for the retry button	`retryButtonBackgroundColor`
`retryButtonBorderColor`	Border color for the retry button	`retryButtonBorderColor`
`retryButtonBorderWidth`	Width of the border around the retry button	`retryButtonBorderWidth`
`retryButtonCornerRadius`	Corner radius settings for the retry button	`retryButtonCornerRadius`
`emptyTitleTextFont`	Font used for the empty state title text	`emptyTitleTextFont`
`emptyTitleTextColor`	Color of the empty state title text	`emptyTitleTextColor`
`emptySubTitleFont`	Font used for the empty state subtitle text	`emptySubTitleFont`
`emptySubTitleTextColor`	Color of the empty state subtitle text	`emptySubTitleTextColor`
`tableViewSeparator`	Color of the table view separator	`tableViewSeparator`
`listItemTitleTextColor`	Color of the title text in list items	`listItemTitleTextColor`
`listItemTitleFont`	Font used for the title text in list items	`listItemTitleFont`
`listItemSubTitleTextColor`	Color of the subtitle text in list items	`listItemSubTitleTextColor`
`listItemSubTitleFont`	Font used for the subtitle text in list items	`listItemSubTitleFont`
`listItemBackground`	Background color for list items	`listItemBackground`
`listItemSelectedBackground`	Background color for list items if selected	`listItemSelectedBackground`
`listItemBorderWidth`	Width of the border around list items	`listItemBorderWidth`
`listItemBorderColor`	Color of the border around list items	`listItemBorderColor`
`listItemCornerRadius`	Corner radius settings for list items	`listItemCornerRadius`
`listItemSelectionImageTint`	Tint color for the selection image in list items	`listItemSelectionImageTint`
`listItemDeSelectedImageTint`	Tint color for the deselected image in list items	`listItemDeSelectedImageTint`
`passwordGroupImageTintColor`	Tint color for the password group image	`passwordGroupImageTintColor`
`passwordGroupImageBackgroundColor`	Background color for the password group image	`passwordGroupImageBackgroundColor`
`privateGroupImageTintColor`	Tint color for the private group image	`privateGroupImageTintColor`
`privateGroupImageBackgroundColor`	Background color for the private group image	`privateGroupImageBackgroundColor`
`privateGroupIcon`	Image for a private group icon	`privateGroupIcon`
`protectedGroupIcon`	Image for a protected group icon	`protectedGroupIcon`

Functionality

Configure component behavior with these properties and methods:

Method	Description	Code
`set(groupsRequestBuilder:)`	Sets the request builder for fetching groups	`set(groupsRequestBuilder: requestBuilder)`
`set(searchRequestBuilder:)`	Sets the request builder for searching groups	`set(searchRequestBuilder: searchRequestBuilder)`
`set(searchKeyword:)`	Sets the search keyword to filter groups	`set(searchKeyword: "group_name")`
`hideErrorView`	Hides the error state view	`hideErrorView = true`
`hideNavigationBar`	Hides or shows the navigation bar	`hideNavigationBar = true`
`hideSearch`	Hides the search bar	`hideSearch = true`
`hideBackButton`	Hides the back button	`hideBackButton = true`
`hideLoadingState`	Hides the loading state indicator	`hideLoadingState = true`
`hideReceipts`	Hides message read/delivery receipts	`hideReceipts = true`
`hideDeleteConversationOption`	Hides the option to delete a conversation	`hideDeleteConversationOption = true`
`hideUserStatus`	Hides the online/offline status of users	`hideUserStatus = true`
`hideGroupType`	Hides the group type (private/public)	`hideGroupType = true`

let groups = CometChatGroups()
groups.hideSearch = true
groups.hideGroupType = false
groups.hideBackButton = true
groups.hideErrorView = false
groups.hideLoadingState = false

Custom Views

SetOptions

You can define custom options for each group using .set(options:). This method allows you to return an array of CometChatGroupOption based on the group object.

cometChatGroups.set(options: { group in  
    return [CometChatGroupOptions]  
})  

AddOptions

You can dynamically add options to groups using .add(options:). This method lets you return additional CometChatGroupOption elements.

cometChatGroups.add(options: { group in  
    return [ArchiveOption()]  
})  

SetListItemView

With this function, you can assign a custom ListItem to the groups Component.

let cometChatGroups = CometChatGroups()
cometChatGroups.set(listItemView: { group in
    let view = GroupCellView()
    return view
})

Custom List Item

Replace the default group cell with a custom view:

let groups = CometChatGroups()
groups.set(listItemView: { group in
    let customView = CustomGroupCell()
    customView.configure(with: group)
    return customView
})

import UIKit
import CometChatSDK

class CustomGroupCell: UIView {
    
    private let avatarImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.layer.cornerRadius = 20
        imageView.clipsToBounds = true
        imageView.backgroundColor = .systemGray5
        return imageView
    }()
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 16, weight: .semibold)
        label.textColor = .label
        return label
    }()
    
    private let membersLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 14)
        label.textColor = .secondaryLabel
        return label
    }()
    
    private let joinButton: UIButton = {
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("JOIN", for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 12, weight: .bold)
        button.layer.cornerRadius = 12
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.systemBlue.cgColor
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        addSubview(avatarImageView)
        addSubview(titleLabel)
        addSubview(membersLabel)
        addSubview(joinButton)
        
        NSLayoutConstraint.activate([
            avatarImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
            avatarImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            avatarImageView.widthAnchor.constraint(equalToConstant: 40),
            avatarImageView.heightAnchor.constraint(equalToConstant: 40),
            
            titleLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 12),
            titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8),
            
            membersLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
            membersLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
            membersLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12),
            
            joinButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
            joinButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            joinButton.widthAnchor.constraint(equalToConstant: 60),
            joinButton.heightAnchor.constraint(equalToConstant: 24)
        ])
    }
    
    func configure(with group: Group) {
        titleLabel.text = group.name
        membersLabel.text = "\(group.membersCount) members"
        
        if let iconURL = group.icon, let url = URL(string: iconURL) {
            URLSession.shared.dataTask(with: url) { [weak self] data, _, _ in
                if let data = data, let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.avatarImageView.image = image
                    }
                }
            }.resume()
        }
        
        let isJoined = group.hasJoined
        joinButton.setTitle(isJoined ? "JOINED" : "JOIN", for: .normal)
        joinButton.setTitleColor(isJoined ? .systemGray : .systemBlue, for: .normal)
        joinButton.layer.borderColor = isJoined ? UIColor.systemGray.cgColor : UIColor.systemBlue.cgColor
    }
}

SetLeadingView

You can modify the leading view of a group cell using .set(leadingView:).

cometChatGroups.set(leadingView: { group in  
    let view = CustomLeadingView()
    return view  
})  

You can create a CustomLeadingView as a custom UIView. Which we will inflate in setLeadingView():

import UIKit

class CustomLeadingView: UIView {

    private let iconImageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "person.2.fill"))
        imageView.tintColor = .white
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()

    private let joinButton: UIButton = {
        let button = UIButton()
        button.setTitle("Join", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
        button.backgroundColor = .orange
        button.layer.cornerRadius = 8
        return button
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupView() {
        backgroundColor = .purple
        layer.cornerRadius = 12

        addSubview(iconImageView)
        addSubview(joinButton)

        iconImageView.translatesAutoresizingMaskIntoConstraints = false
        joinButton.translatesAutoresizingMaskIntoConstraints = false
    }
}

SetTitleView

You can customize the title view of a group cell using .set(titleView:).

cometChatGroups.set(titleView: { group in  
    let view = CustomTitleView()
    return view
})  

You can create a CustomTitleView as a custom UIView. Which we will inflate in setTitleView():

class CustomTitleView: UIView {

    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Artistic Design"
        label.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        label.textColor = .black
        return label
    }()

    private let publicBadge: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        view.layer.cornerRadius = 10

        let icon = UIImageView(image: UIImage(systemName: "person.3.fill"))
        icon.tintColor = .white
        icon.contentMode = .scaleAspectFit

        let label = UILabel()
        label.text = "Public"
        label.font = UIFont.systemFont(ofSize: 12, weight: .bold)
        label.textColor = .white

        let stackView = UIStackView(arrangedSubviews: [icon, label])
        stackView.spacing = 4
        stackView.alignment = .center
        stackView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(stackView)

        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            view.widthAnchor.constraint(equalToConstant: 60),
            view.heightAnchor.constraint(equalToConstant: 20)
        ])
        
        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupView() {
        addSubview(titleLabel)
        addSubview(publicBadge)

        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        publicBadge.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),

            publicBadge.leadingAnchor.constraint(equalTo: titleLabel.trailingAnchor, constant: 6),
            publicBadge.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
}

SetTrailView

You can modify the trailing view of a group cell using .set(trailView:).

cometChatGroups.set(trailView: { group in  
    let view = CustomTrailView() 
    return view  
})  

You can create a CustomTrailView as a custom UIView. Which we will inflate in setTrailView():

import UIKit

class CustomTrailView: UIView {

    private let joinedLabel: UILabel = {
        let label = UILabel()
        label.text = "JOINED"
        label.font = UIFont.systemFont(ofSize: 14, weight: .bold)
        label.textColor = UIColor.purple
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupView() {
        backgroundColor = UIColor.purple.withAlphaComponent(0.1)
        layer.cornerRadius = 16

        addSubview(joinedLabel)
        joinedLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            joinedLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            joinedLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            widthAnchor.constraint(equalToConstant: 80),
            heightAnchor.constraint(equalToConstant: 32)
        ])
    }
}

SetSubTitleView

You can customize the subtitle view for each group item to meet your requirements:

cometChatGroup.set(subtitleView: { group in
   let view = CustomSubtitleView()
   return view
})

You can seamlessly integrate this CustomSubtitleView UIView file into the .set(subtitleView:) method within CometChatGroups:

import UIKit

class CustomSubtitleView: UILabel {
    
    init(membersCount: Int) {
        super.init(frame: .zero)
        self.text = "\(membersCount) members • \("group_description")"
        self.textColor = UIColor.gray
        self.font = UIFont.systemFont(ofSize: 14)
        self.numberOfLines = 1
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

SetLoadingView

You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.

let loadingIndicator = UIActivityIndicatorView(style: .medium)  
loadingIndicator.startAnimating()  
cometChatGroups.set(loadingView: loadingIndicator)  

SetErrorView

You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.

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

SetEmptyView

You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no groups are available.

let emptyLabel = UILabel()  
emptyLabel.text = "No groups found"  
emptyLabel.textColor = .gray  
emptyLabel.textAlignment = .center  
cometChatGroups.set(emptyView: emptyLabel)  

Group Options

Add custom swipe actions to group cells.

Set Options

Replace default options:

groups.set(options: { group in
    let leaveOption = CometChatGroupOption(
        id: "leave",
        title: "Leave",
        icon: UIImage(systemName: "arrow.right.square"),
        backgroundColor: .systemRed
    ) { group in
        // Handle leave action
    }
    return [leaveOption]
})

Add Options

Add options to existing ones:

groups.add(options: { group in
    let archiveOption = CometChatGroupOption(
        id: "archive",
        title: "Archive",
        icon: UIImage(systemName: "archivebox"),
        backgroundColor: .systemOrange
    ) { group in
        // Handle archive action
    }
    return [archiveOption]
})

Component Structure

Component	Description
CometChatListBase	Container with navigation bar and search
CometChatListItem	Individual group cell

Troubleshooting

Issue	Solution
Groups not loading	Verify user is logged in and has proper permissions
Search not working	Check `searchRequestBuilder` configuration
Events not firing	Ensure listener is added before actions occur
Styling not applied	Apply styles before presenting the component
Custom views not showing	Return non-nil UIView from closure

Group Members - Display group member list
Conversations - Display conversation list
Users - Display user list

​Prerequisites

​Usage

​Basic Implementation

​Production Implementation

​Actions

​Filters

​Show Only Joined Groups

​Search Groups

​Filter by Tags

​Events

​Add Event Listener

​Emit Events

​Styling

​Global Styling

​Instance Styling

​Style Properties

​Functionality

​Custom Views

​SetOptions

​AddOptions

​SetListItemView

​Custom List Item

​SetLeadingView

​SetTitleView

​SetTrailView

​SetSubTitleView

​SetLoadingView

​SetErrorView

​SetEmptyView

​Group Options

​Set Options

​Add Options

​Component Structure

​Troubleshooting

​Related Components