Groups - CometChat Docs

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 Agent Component Spec

{
  "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",
      "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" }
    },
    "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"
    }
  }
}

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

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
`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 options for each group. This method allows you to return an array of CometChatGroupOption based on the group object.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

groups.set(options: { group in
    return [CometChatGroupOption]()
})

add(options:)

Dynamically add options to groups. This method lets you return additional CometChatGroupOption elements.

import CometChatUIKitSwift
import CometChatSDK

let groups = CometChatGroups()

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

Styling

Style Hierarchy

Global styles (CometChatGroups.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 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.

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`

selectionMode

Sets the selection mode for multi-select functionality.


Type	`SelectionMode`
Default	`.none`

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

Troubleshooting

Issue	Solution
Empty group list	Ensure SDK is initialized and user is logged in
Groups not updating in real-time	Check SDK connection and group listeners
Search not working	Verify `hideSearch` is not set to true
Group type icons not showing	Check that `hideGroupType` is not set to true
Custom views not appearing	Ensure custom view has proper constraints

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

​Where It Fits

​Minimal Render

​Filtering

​Filter Recipes

​Actions and Events

​Callback Props

​onItemClick

​onItemLongClick

​onBack

​onSelection

​onError

​onEmpty

​onLoad

​Actions Reference

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​listItemView

​leadingView

​titleView

​subtitleView

​trailingView

​loadingStateView

​errorStateView

​emptyStateView

​Options

​set(options:)

​add(options:)

​Styling

​Style Hierarchy

​Global Level Styling

​Instance Level Styling

​Key Style Properties

​Customization Matrix

​Props

​groupsRequestBuilder

​hideBackButton

​hideErrorView

​hideGroupType

​hideLoadingState

​hideNavigationBar

​hideSearch

​hideSectionHeader

​searchRequestBuilder

​selectionMode

​Events

​Troubleshooting

​Related Components