Groups

Display and manage a list of groups with search functionality

The CometChatGroups component displays a searchable list of all available groups. It shows group names, avatars, member counts, and group type indicators (public/private/password-protected). Users can browse, join, and interact with group conversations.

AI Integration Quick Reference

{
  "component": "CometChatGroups",
  "package": "CometChatUIKitSwift",
  "import": "import CometChatUIKitSwift\nimport CometChatSDK",
  "description": "Displays a searchable list of all available groups with avatars, names, member counts, and group type indicators.",
  "inherits": "UIViewController",
  "primaryOutput": {
    "callback": "onItemClick",
    "type": "(Group, IndexPath) -> Void"
  },
  "props": {
    "data": {
      "groupsRequestBuilder": {
        "type": "GroupsRequest.GroupsRequestBuilder?",
        "default": "nil",
        "note": "Custom request builder for filtering groups"
      },
      "searchRequestBuilder": {
        "type": "GroupsRequest.GroupsRequestBuilder?",
        "default": "nil",
        "note": "Custom request builder for search"
      }
    },
    "callbacks": {
      "onItemClick": "(Group, IndexPath) -> Void",
      "onItemLongClick": "(Group, IndexPath) -> Void",
      "onBack": "() -> Void",
      "onSelection": "([Group]) -> Void",
      "onSelectedItemProceed": "([Group]) -> Void",
      "onError": "(CometChatException) -> Void",
      "onEmpty": "() -> Void",
      "onLoad": "([Group]) -> Void"
    },
    "visibility": {
      "hideSearch": { "type": "Bool", "default": false },
      "hideNavigationBar": { "type": "Bool", "default": false },
      "hideBackButton": { "type": "Bool", "default": false },
      "hideGroupType": { "type": "Bool", "default": false },
      "hideSectionHeader": { "type": "Bool", "default": false },
      "hideErrorView": { "type": "Bool", "default": false },
      "hideLoadingState": { "type": "Bool", "default": false }
    },
    "selection": {
      "selectionMode": { "type": "SelectionMode", "default": ".none" },
      "selectionLimit": { "type": "Int", "default": 0 },
      "selectedCellCount": { "type": "Int", "default": 0 }
    },
    "styling": {
      "avatarStyle": { "type": "AvatarStyle", "default": "AvatarStyle()" },
      "statusIndicatorStyle": { "type": "StatusIndicatorStyle", "default": "StatusIndicatorStyle()" }
    },
    "viewSlots": {
      "listItemView": "(Group) -> UIView",
      "leadingView": "(Group) -> UIView",
      "titleView": "(Group?) -> UIView",
      "subtitleView": "(Group?) -> UIView",
      "trailingView": "(Group?) -> UIView",
      "emptyStateView": "() -> UIView",
      "errorStateView": "() -> UIView",
      "loadingStateView": "() -> UIView"
    }
  },
  "events": [
    {
      "name": "ccGroupCreated",
      "payload": "Group",
      "description": "Fires when a group is created"
    },
    {
      "name": "ccGroupDeleted",
      "payload": "Group",
      "description": "Fires when a group is deleted"
    },
    {
      "name": "ccGroupMemberJoined",
      "payload": "{ user: User, group: Group }",
      "description": "Fires when a user joins a group"
    },
    {
      "name": "ccGroupMemberLeft",
      "payload": "{ user: User, group: Group }",
      "description": "Fires when a user leaves a group"
    }
  ],
  "sdkListeners": [
    "onGroupMemberJoined",
    "onGroupMemberLeft",
    "onGroupMemberKicked",
    "onGroupMemberBanned",
    "onGroupMemberUnbanned",
    "onGroupMemberScopeChanged",
    "onMemberAddedToGroup"
  ],
  "compositionExample": {
    "description": "Groups list for browsing and joining group conversations",
    "components": ["CometChatGroups", "CometChatMessages"],
    "flow": "User taps on a group → onItemClick fires → Navigate to CometChatMessages with selected group"
  },
  "types": {
    "Group": {
      "guid": "String",
      "name": "String",
      "icon": "String?",
      "membersCount": "Int",
      "groupType": "GroupType",
      "scope": "MemberScope?"
    },
    "GroupType": {
      "public": "Anyone can join",
      "private": "Invite only",
      "password": "Password protected"
    }
  }
}

Field	Value
Component	CometChatGroups
Package	CometChatUIKitSwift
Inherits	UIViewController

---

Where It Fits

CometChatGroups displays all available groups for browsing and joining. It’s typically used as a standalone screen or within a tab view controller.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class GroupsViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupGroups()
    }
    
    private func setupGroups() {
        let groupsController = CometChatGroups()
        
        // Handle group selection - open group chat
        groupsController.set(onItemClick: { [weak self] group, indexPath in
            self?.openGroupChat(group)
        })
        
        let navController = UINavigationController(rootViewController: groupsController)
        present(navController, animated: true)
    }
    
    private func openGroupChat(_ group: Group) {
        let messagesVC = CometChatMessages()
        messagesVC.set(group: group)
        navigationController?.pushViewController(messagesVC, animated: true)
    }
}

---

Minimal Render

import CometChatUIKitSwift

let groups = CometChatGroups()
let navController = UINavigationController(rootViewController: groups)
present(navController, animated: true)

---

Filtering

Use GroupsRequest.GroupsRequestBuilder to filter which groups appear in the list. The builder pattern allows chaining multiple filter conditions.

import CometChatUIKitSwift
import CometChatSDK

// Create a custom request builder
let groupsRequestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
    .set(joinedOnly: true)

let groups = CometChatGroups(groupsRequestBuilder: groupsRequestBuilder)

Filter Recipes

Recipe	Code
Joined groups only	.set(joinedOnly: true)
Search by name	.set(searchKeyword: "design")
Filter by tags	.set(tags: ["engineering", "marketing"])
Include tag info	.set(withTags: true)
Limit results	GroupsRequestBuilder(limit: 20)

---

Actions and Events

Callback Props

onItemClick

Fires when a user taps on a group in the list. Use this to open the group chat.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

groups.set(onItemClick: { [weak self] group, indexPath in
    guard let self = self else { return }
    
    let messagesVC = CometChatMessages()
    messagesVC.set(group: group)
    self.navigationController?.pushViewController(messagesVC, animated: true)
})

onItemLongClick

Fires when a user long-presses on a group. Use this to show additional options.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

groups.set(onItemLongClick: { [weak self] group, indexPath in
    guard let self = self else { return }
    
    let alert = UIAlertController(title: group.name, message: nil, preferredStyle: .actionSheet)
    
    alert.addAction(UIAlertAction(title: "View Details", style: .default) { _ in
        // View group details
    })
    
    alert.addAction(UIAlertAction(title: "Leave Group", style: .destructive) { _ in
        // Leave group
    })
    
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    self.present(alert, animated: true)
})

onBack

Fires when the back button is pressed.

import CometChatUIKitSwift

let groups = CometChatGroups()

groups.set(onBack: { [weak self] in
    self?.navigationController?.popViewController(animated: true)
})

onSelection

Fires when groups are selected in selection mode.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()
groups.selectionMode = .multiple

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

onSelectedItemProceed

Fires when the user confirms their selection by tapping the proceed/submit button. Use this to handle the final selection action.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()
groups.selectionMode = .multiple
groups.selectionLimit = 5

groups.onSelectedItemProceed = { [weak self] selectedGroups in
    guard let self = self else { return }
    
    // Handle the selected groups
    for group in selectedGroups {
        print("Selected group: \(group.name ?? "")")
    }
    
    // Proceed with the selection
    self.processSelectedGroups(selectedGroups)
}

onError

Fires when an error occurs while loading groups.

import CometChatUIKitSwift

let groups = CometChatGroups()

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

onEmpty

Fires when the group list is empty.

import CometChatUIKitSwift

let groups = CometChatGroups()

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

onLoad

Fires when groups are successfully loaded.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

Actions Reference

Method	Description	Example
set(onItemClick:)	Triggered when a group is tapped	Open group chat
set(onItemLongClick:)	Triggered on long press	Show options menu
set(onBack:)	Triggered when back button is pressed	Custom navigation
set(onSelection:)	Triggered in selection mode	Multi-select groups
onSelectedItemProceed	Triggered when selection is confirmed	Process selected groups
set(onError:)	Triggered when an error occurs	Show error alert
set(onEmpty:)	Triggered when list is empty	Show empty state
set(onLoad:)	Triggered when groups load	Analytics tracking

Global UI Events

Event	Fires when	Payload
ccGroupCreated	A group is created	Group
ccGroupDeleted	A group is deleted	Group
ccGroupMemberJoined	A user joins a group	User, Group
ccGroupMemberLeft	A user leaves a group	User, Group

import CometChatUIKitSwift
import CometChatSDK

class MyViewController: UIViewController, CometChatGroupEventListener {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        CometChatGroupEvents.addListener("my-listener", self)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        CometChatGroupEvents.removeListener("my-listener")
    }
    
    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 ?? "")")
    }
}

SDK Events (Real-Time, Automatic)

SDK Listener	Internal behavior
onGroupMemberJoined	Updates member count
onGroupMemberLeft	Updates member count
onGroupMemberKicked	Updates member count
onGroupMemberBanned	Updates member count
onGroupMemberUnbanned	Updates group info
onGroupMemberScopeChanged	Updates member scope
onMemberAddedToGroup	Updates member count

---

Custom View Slots

Slot	Signature	Replaces
listItemView	(Group) -> UIView	Entire group row
leadingView	(Group) -> UIView	Avatar / left section
titleView	(Group?) -> UIView	Name / title text
subtitleView	(Group?) -> UIView	Member count / subtitle
trailingView	(Group?) -> UIView	Right side content
emptyStateView	() -> UIView	Empty state display
errorStateView	() -> UIView	Error state display
loadingStateView	() -> UIView	Loading state display

listItemView

Replace the entire group row with a custom design.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

You can create a CustomGroupCell as a custom UIView:

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
    }
}

leadingView

Customize the leading view (avatar area) of a group cell.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

You can create a CustomLeadingView as a custom UIView:

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
    }
}

titleView

Customize the title view of a group cell.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

You can create a CustomTitleView as a custom UIView:

import UIKit

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)
        ])
    }
}

subtitleView

Customize the subtitle area below the group name.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

You can create a CustomSubtitleView as a custom UIView:

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")
    }
}

trailingView

Customize the trailing view (right side) of a group cell.

import UIKit
import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

You can create a CustomTrailView as a custom UIView:

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)
        ])
    }
}

loadingStateView

Customize the loading state view displayed while data is being fetched.

import UIKit
import CometChatUIKitSwift

let groups = CometChatGroups()

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

errorStateView

Customize the error state view displayed when an error occurs.

import UIKit
import CometChatUIKitSwift

let groups = CometChatGroups()

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

emptyStateView

Customize the empty state view displayed when no groups are available.

import UIKit
import CometChatUIKitSwift

let groups = CometChatGroups()

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

---

Options

set(options:)

Define custom swipe options for each group. This method allows you to return an array of CometChatGroupOption based on the group object. These options appear when the user swipes on a group cell.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

groups.set(options: { group in
    // Create a custom delete option
    let deleteOption = CometChatGroupOption(
        id: "delete",
        title: "Delete",
        icon: UIImage(systemName: "trash"),
        backgroundColor: .systemRed,
        onClick: { group, section, option, controller in
            // Handle delete action
            print("Delete group: \(group.name ?? "")")
        }
    )
    
    // Create a custom mute option
    let muteOption = CometChatGroupOption(
        id: "mute",
        title: "Mute",
        icon: UIImage(systemName: "bell.slash"),
        backgroundColor: .systemOrange,
        onClick: { group, section, option, controller in
            // Handle mute action
            print("Mute group: \(group.name ?? "")")
        }
    )
    
    return [deleteOption, muteOption]
})

add(options:)

Dynamically add additional swipe options to groups while preserving the default options. This method lets you return additional CometChatGroupOption elements that will be appended to the existing options.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

groups.add(options: { group in
    // Add a custom archive option
    let archiveOption = CometChatGroupOption(
        id: "archive",
        title: "Archive",
        icon: UIImage(systemName: "archivebox"),
        backgroundColor: .systemBlue,
        onClick: { group, section, option, controller in
            // Handle archive action
            print("Archive group: \(group.name ?? "")")
        }
    )
    
    return [archiveOption]
})

---

Data Manipulation Methods

showJoiningGroupAlert(for:)

Displays an alert dialog when a user attempts to join a password-protected group. This method shows a prompt for the user to enter the group password.

public func showJoiningGroupAlert(for group: Group)

Parameter	Type	Description
group	Group	The password-protected group to join

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

// Show joining alert for a password-protected group
groups.set(onItemClick: { [weak self] group, indexPath in
    if group.groupType == .password && !group.hasJoined {
        self?.groups.showJoiningGroupAlert(for: group)
    } else {
        // Navigate to group chat
    }
})

hideJoiningGroupAlert(completion:)

Dismisses the joining group alert dialog programmatically. Use this when you need to close the alert without user interaction.

public func hideJoiningGroupAlert(completion: (() -> Void)? = nil)

Parameter	Type	Description
completion	(() -> Void)?	Optional closure called after the alert is dismissed

import CometChatUIKitSwift

let groups = CometChatGroups()

// Hide the joining alert with a completion handler
groups.hideJoiningGroupAlert {
    print("Alert dismissed")
}

---

Styling

Style Hierarchy

1. Global styles (CometChatGroups.style) apply to all instances
2. Instance styles override global for specific instances

Global Level Styling

import UIKit
import CometChatUIKitSwift

// Apply global styles that affect all CometChatGroups instances
CometChatGroups.style.backgroundColor = UIColor.systemBackground
CometChatGroups.style.titleColor = UIColor.label
CometChatGroups.style.titleFont = UIFont.systemFont(ofSize: 34, weight: .bold)
CometChatGroups.style.listItemTitleTextColor = UIColor.label
CometChatGroups.style.listItemSubTitleTextColor = UIColor.secondaryLabel

// Custom avatar style
let avatarStyle = AvatarStyle()
avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
CometChatGroups.avatarStyle = avatarStyle

Instance Level Styling

import UIKit
import CometChatUIKitSwift

// Create a custom style for a specific instance
var customStyle = GroupsStyle()
customStyle.backgroundColor = UIColor(red: 0.95, green: 0.95, blue: 0.97, alpha: 1.0)
customStyle.titleColor = UIColor.darkGray
customStyle.listItemBackground = UIColor.white

let groups = CometChatGroups()
groups.style = customStyle

Key Style Properties

Property	Type	Default	Description
backgroundColor	UIColor	CometChatTheme.backgroundColor01	Background color
titleColor	UIColor	CometChatTheme.textColorPrimary	Navigation title color
titleFont	UIFont	CometChatTypography.Heading4.medium	Navigation title font
listItemTitleTextColor	UIColor	CometChatTheme.textColorPrimary	Group name color
listItemTitleFont	UIFont	CometChatTypography.Heading4.medium	Group name font
listItemSubTitleTextColor	UIColor	CometChatTheme.textColorSecondary	Member count color
listItemSubTitleFont	UIFont	CometChatTypography.Body.regular	Member count font
listItemBackground	UIColor	.clear	List item background
privateGroupBadgeColor	UIColor	CometChatTheme.iconColorSecondary	Private group badge color
passwordGroupBadgeColor	UIColor	CometChatTheme.iconColorSecondary	Password group badge color

Customization Matrix

What to change	Where	Property/API	Example
Background color	Style	backgroundColor	UIColor.systemBackground
Title appearance	Style	titleColor, titleFont	Custom colors and fonts
List item look	Style	listItemBackground	UIColor.white
Avatar appearance	Style	avatarStyle	AvatarStyle() with custom radius
Group type badges	Style	privateGroupBadgeColor	Custom badge colors
Hide search	Property	hideSearch	groups.hideSearch = true
Hide group type	Property	hideGroupType	groups.hideGroupType = true
Custom row	View Slot	set(listItemView:)	See Custom View Slots

---

Props

All props are optional. Sorted alphabetically.

avatarStyle

Customizes the appearance of avatars in group list items.

Type	AvatarStyle
Default	AvatarStyle()

import CometChatUIKitSwift

let groups = CometChatGroups()

let avatarStyle = AvatarStyle()
avatarStyle.backgroundColor = UIColor.systemBlue
avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
avatarStyle.borderWidth = 1
avatarStyle.borderColor = UIColor.systemGray4

groups.set(avatarStyle: avatarStyle)

groupsRequestBuilder

Custom request builder for filtering groups.

Type	GroupsRequest.GroupsRequestBuilder?
Default	nil

hideBackButton

Hides the back button in the navigation bar.

Type	Bool
Default	false

hideErrorView

Hides the error state view.

Type	Bool
Default	false

hideGroupType

Hides the public/private/password group type icons.

Type	Bool
Default	false

hideLoadingState

Hides the loading state indicator.

Type	Bool
Default	false

hideNavigationBar

Hides the entire navigation bar.

Type	Bool
Default	false

hideSearch

Hides the search bar.

Type	Bool
Default	false

hideSectionHeader

Hides the alphabetical section headers.

Type	Bool
Default	false

searchRequestBuilder

Custom request builder for search functionality.

Type	GroupsRequest.GroupsRequestBuilder?
Default	nil

selectedCellCount

Returns the count of currently selected groups when in selection mode.

Type	Int
Default	0

import CometChatUIKitSwift

let groups = CometChatGroups()
groups.selectionMode = .multiple

// Get the count of selected groups
let selectedCount = groups.selectedCellCount
print("Selected \(selectedCount) groups")

selectionLimit

Sets the maximum number of groups that can be selected in selection mode. When the limit is reached, further selections are disabled.

Type	Int
Default	0 (unlimited)

import CometChatUIKitSwift

let groups = CometChatGroups()
groups.selectionMode = .multiple

// Limit selection to 5 groups
groups.selectionLimit = 5

// Handle selection confirmation
groups.onSelectedItemProceed = { selectedGroups in
    print("Selected \(selectedGroups.count) groups")
    
    // Process the selected groups
    for group in selectedGroups {
        print("Group: \(group.name ?? "")")
    }
}

selectionMode

Sets the selection mode for multi-select functionality.

Type	SelectionMode
Default	.none

statusIndicatorStyle

Customizes the appearance of group type status indicators.

Type	StatusIndicatorStyle
Default	StatusIndicatorStyle()

import CometChatUIKitSwift

let groups = CometChatGroups()

let statusIndicatorStyle = StatusIndicatorStyle()
statusIndicatorStyle.backgroundColor = UIColor.systemGreen
statusIndicatorStyle.borderWidth = 2
statusIndicatorStyle.borderColor = UIColor.white

groups.set(statusIndicatorStyle: statusIndicatorStyle)

---

Events

Event	Payload	Fires when
ccGroupCreated	Group	A group is created
ccGroupDeleted	Group	A group is deleted
ccGroupMemberJoined	User, Group	A user joins a group
ccGroupMemberLeft	User, Group	A user leaves a group

---

Common Patterns

Public groups only

let publicBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
    .set(groupType: .public)

let groups = CometChatGroups()
groups.set(groupsRequestBuilder: publicBuilder)

Joined groups only

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

let groups = CometChatGroups()
groups.set(groupsRequestBuilder: joinedBuilder)

Custom empty state with CTA

let groups = CometChatGroups()

groups.set(emptyStateView: {
    let emptyView = UIView()
    
    let label = UILabel()
    label.text = "No groups found"
    label.textAlignment = .center
    
    let button = UIButton(type: .system)
    button.setTitle("Create a group", for: .normal)
    
    // Add subviews and constraints...
    return emptyView
})

Hide all chrome — minimal list

let groups = CometChatGroups()
groups.hideSearch = true
groups.hideGroupType = true
groups.hideSectionHeader = true

Multi-select groups

let groups = CometChatGroups()
groups.selectionMode = .multiple

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

---

Related Components

• Messages - Display messages in a group
• Conversations - List all conversations
• Users - List all users
• Group Members - Manage group members
• Groups With Messages - Combined groups and messages view