> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Details

> Display CometChat iOS UI Kit group details with group info, join, leave, delete, member management, and real-time group events.

Provide a detailed view for CometChat groups in your iOS app, enabling users to see group info, join/leave, manage members, and respond to real-time group events.

## Overview

`GroupDetailsViewController` displays comprehensive group information and actions:

* **Group Info** — Name, icon, description, and member count
* **Actions** — Join, leave, or delete group
* **Member Management** — View members, add members, view banned members
* **Real-Time Updates** — Reflects joins, leaves, bans, and ownership changes

## Prerequisites

Before implementing group details, ensure you have:

* Completed [Getting Started](/ui-kit/ios/getting-started) setup
* CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager
* Valid CometChat App ID, Region, and Auth Key
* User logged in with `CometChatUIKit.login()`
* Navigation controller (`UINavigationController`) configured

## Components

| Component                         | Description                                              |
| --------------------------------- | -------------------------------------------------------- |
| `CometChatGroup`                  | Renders group avatar, name, and metadata                 |
| `GroupActionView`                 | Custom view for action buttons (view/add/banned members) |
| `CometChatMessagesViewController` | Opens group chat interface when "Chat" is tapped         |
| `CometChat.joinGroup()`           | Joins public or password-protected groups                |
| `CometChat.leaveGroup()`          | Leaves the current group                                 |
| `CometChat.deleteGroup()`         | Deletes and exits the group (owners only)                |
| `CometChatGroupMembers`           | Lists current group members                              |
| `CometChatGroupDelegate`          | Receives real-time group events                          |

## Integration Steps

### Step 1: Present the Group Details Screen

Push `GroupDetailsViewController` for a selected group:

```swift lines theme={null}
import UIKit
import CometChatSDK

class GroupListViewController: UIViewController {
    
    func showGroupDetails(for group: Group) {
        // Initialize the group details view controller
        let detailsVC = GroupDetailsViewController()
        detailsVC.group = group
        
        // Push onto navigation stack
        navigationController?.pushViewController(detailsVC, animated: true)
    }
}
```

This initializes and presents the details UI with the correct group context.

**File reference:** [`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift)

### Step 2: Set Up the UI

Configure scroll view, header, and action views:

```swift lines theme={null}
import UIKit
import CometChatUIKitSwift
import CometChatSDK

class GroupDetailsViewController: UIViewController {
    
    var group: Group?
    
    override public func viewDidLoad() {
        super.viewDidLoad()
        
        // Connect to group event listeners
        connect()
        
        // Apply theme
        view.backgroundColor = CometChatTheme.backgroundColor01
        
        // Set up UI components
        setupScrollView()
        setupLayout()
        addButtonActions()
    }
    
    private func setupScrollView() {
        // Configure scroll view for content
    }
    
    private func setupLayout() {
        // Arrange header, info, and action views
    }
}
```

This lays out the UI components and registers for group events.

**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)

### Step 3: Enable Group Action Buttons

Wire up view/add/banned members actions:

```swift lines theme={null}
// Action views for member management
private let viewMembersView = GroupActionView()
private let addMembersView = GroupActionView()
private let bannedMembersView = GroupActionView()

public func addButtonActions() {
    // View current group members
    viewMembersView.onActionButtonTapped = { [weak self] in
        self?.viewMembers()
    }
    
    // Add new members to the group
    addMembersView.onActionButtonTapped = { [weak self] in
        self?.addMembers()
    }
    
    // View banned members
    bannedMembersView.onActionButtonTapped = { [weak self] in
        self?.banMembers()
    }
}

private func viewMembers() {
    guard let group = group else { return }
    let membersVC = CometChatGroupMembers()
    membersVC.set(group: group)
    navigationController?.pushViewController(membersVC, animated: true)
}

private func addMembers() {
    // Present add members interface
}

private func banMembers() {
    // Present banned members list
}
```

This enables user interaction for member management.

**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)

### Step 4: Handle Leave and Delete Actions

Provide ownership-aware leave/delete flows:

```swift lines theme={null}
@objc func showLeaveGroupAlert() {
    guard let group = group else { return }
    
    let alert = UIAlertController(
        title: "Leave Group",
        message: "Are you sure you want to leave this group?",
        preferredStyle: .alert
    )
    
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    alert.addAction(UIAlertAction(title: "Leave", style: .destructive) { [weak self] _ in
        self?.leaveGroup()
    })
    
    present(alert, animated: true)
}

@objc func showDeleteGroupAlert() {
    guard let group = group else { return }
    
    let alert = UIAlertController(
        title: "Delete Group",
        message: "Are you sure you want to delete this group? This action cannot be undone.",
        preferredStyle: .alert
    )
    
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    alert.addAction(UIAlertAction(title: "Delete", style: .destructive) { [weak self] _ in
        self?.deleteGroup()
    })
    
    present(alert, animated: true)
}

private func leaveGroup() {
    guard let guid = group?.guid else { return }
    
    CometChat.leaveGroup(GUID: guid) { [weak self] _ in
        DispatchQueue.main.async {
            self?.navigationController?.popToRootViewController(animated: true)
        }
    } onError: { error in
        print("Leave group error: \(error?.errorDescription ?? "")")
    }
}

private func deleteGroup() {
    guard let guid = group?.guid else { return }
    
    CometChat.deleteGroup(GUID: guid) { [weak self] _ in
        DispatchQueue.main.async {
            self?.navigationController?.popToRootViewController(animated: true)
        }
    } onError: { error in
        print("Delete group error: \(error?.errorDescription ?? "")")
    }
}
```

This manages group exit, with transfer prompt for owners.

**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)

### Step 5: Listen for Group Events

Update UI on member joins, leaves, bans, and ownership changes:

```swift lines theme={null}
private let listenerId = "group-details-listener"

func connect() {
    // Add SDK group listener
    CometChat.addGroupListener(listenerId, self)
    
    // Add UIKit group events listener
    CometChatGroupEvents.addListener(listenerId, self)
}

func disconnect() {
    CometChat.removeGroupListener(listenerId)
    CometChatGroupEvents.removeListener(listenerId)
}

deinit {
    disconnect()
}
```

```swift lines theme={null}
// MARK: - CometChatGroupDelegate
extension GroupDetailsViewController: CometChatGroupDelegate {
    
    func onGroupMemberJoined(action: ActionMessage, joinedUser: User, joinedGroup: Group) {
        updateGroupInfo(joinedGroup)
    }
    
    func onGroupMemberLeft(action: ActionMessage, leftUser: User, leftGroup: Group) {
        // Hide UI if current user left
        if leftUser.uid == CometChat.getLoggedInUser()?.uid {
            navigationController?.popViewController(animated: true)
        } else {
            updateGroupInfo(leftGroup)
        }
    }
    
    func onGroupMemberKicked(action: ActionMessage, kickedUser: User, kickedBy: User, kickedFrom: Group) {
        updateGroupInfo(kickedFrom)
    }
    
    func onGroupMemberBanned(action: ActionMessage, bannedUser: User, bannedBy: User, bannedFrom: Group) {
        updateGroupInfo(bannedFrom)
    }
    
    func onGroupMemberUnbanned(action: ActionMessage, unbannedUser: User, unbannedBy: User, unbannedFrom: Group) {
        updateGroupInfo(unbannedFrom)
    }
    
    func onGroupMemberScopeChanged(action: ActionMessage, scopeChangeduser: User, scopeChangedBy: User, scopeChangedTo: String, scopeChangedFrom: String, group: Group) {
        updateGroupInfo(group)
    }
    
    func onMemberAddedToGroup(action: ActionMessage, addedBy: User, addedUser: User, addedTo: Group) {
        updateGroupInfo(addedTo)
    }
}

// MARK: - CometChatGroupEventListener
extension GroupDetailsViewController: CometChatGroupEventListener {
    
    func ccOwnershipChanged(group: Group, newOwner: GroupMember) {
        updateGroupInfo(group)
    }
}

private func updateGroupInfo(_ group: Group) {
    self.group = group
    // Refresh UI with updated group data
}
```

This keeps the group details in sync with back-end events.

**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift#L200-L245)

## Customization Options

### Header Styling

Use `CometChatTheme` to customize fonts, colors, and borders:

```swift lines theme={null}
// Apply custom theme
CometChatTheme.palette.primary = UIColor.systemBlue
CometChatTheme.typography.heading = UIFont.systemFont(ofSize: 20, weight: .bold)
```

### Button Labels

Localize or rebrand action texts:

```swift lines theme={null}
viewMembersView.setTitle("View Members", for: .normal)
addMembersView.setTitle("Add Members", for: .normal)
bannedMembersView.setTitle("Banned Members", for: .normal)
```

### Avatar Placeholder

Provide fallback initials or default images:

```swift lines theme={null}
avatarView.set(name: group.name)
avatarView.set(image: UIImage(named: "default_group_avatar"))
```

## Edge Cases

| Scenario                 | Handling                             |
| ------------------------ | ------------------------------------ |
| Private/Protected groups | Prompt for a password before joining |
| Already a member         | Hide or disable Join button          |
| Empty group              | Show an empty state when no members  |
| Owner restrictions       | Disable Delete for non-owners        |

## Error Handling

| Error Type          | Solution                                   |
| ------------------- | ------------------------------------------ |
| Join failures       | Show alert on network or permission errors |
| Leave/Delete errors | Display retry prompt on API failure        |
| Event errors        | Log and notify user if group events fail   |

## Feature Matrix

| Feature            | Component / Method           | File(s)                            |
| ------------------ | ---------------------------- | ---------------------------------- |
| Show group details | `GroupDetailsViewController` | `GroupDetailsViewController.swift` |
| View group members | `viewMembersView` action     | `GroupDetailsViewController.swift` |
| Add members        | `addMembersView` action      | `GroupDetailsViewController.swift` |
| Ban members        | `bannedMembersView` action   | `GroupDetailsViewController.swift` |
| Join group         | `CometChat.joinGroup()`      | `GroupDetailsViewController.swift` |
| Leave group        | `showLeaveGroupAlert()`      | `GroupDetailsViewController.swift` |
| Delete group       | `showDeleteGroupAlert()`     | `GroupDetailsViewController.swift` |
| Real-time updates  | `CometChatGroupDelegate`     | `GroupDetailsViewController.swift` |

## Related Components

* [Groups](/ui-kit/ios/groups) - Display group list
* [Group Members](/ui-kit/ios/group-members) - Display group member list
* [Events](/ui-kit/ios/events) - Listen for chat events

<CardGroup cols={2}>
  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp">
    Explore the complete Group Details flow
  </Card>

  <Card title="UIKit Source" href="https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift">
    Browse the Group Details implementation
  </Card>
</CardGroup>

## Related Guides

<CardGroup cols={2}>
  <Card title="Groups" icon="users" href="/ui-kit/ios/groups">
    Display and manage group list
  </Card>

  <Card title="Group Members" icon="user-group" href="/ui-kit/ios/group-members">
    View and manage group membership
  </Card>

  <Card title="Events" icon="bell" href="/ui-kit/ios/events">
    Handle group and membership events
  </Card>
</CardGroup>