> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Details

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/Delete group.
* **Member Management:** View members, add members, view banned members.
* **Real-Time Updates:** Reflects joins, leaves, bans, and ownership changes.

## Prerequisites

* A UIKit-based iOS project.
* CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager.
* Valid CometChat **App ID**, **Region**, and **Auth Key**.
* User logged in with `CometChat.login()`.
* Navigation stack (`UINavigationController`) configured.

## Components

| Component                         | Role                                                      |
| :-------------------------------- | :-------------------------------------------------------- |
| `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

### 1. Presenting the Group Details Screen

Push `GroupDetailsViewController` for a selected group.

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

func showGroupDetails(for group: Group) {
    let detailsVC = GroupDetailsViewController()
    detailsVC.group = group
    navigationController?.pushViewController(detailsVC, animated: true)
}
```

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

Initializes and presents the details UI with the correct group context.

### 2. Setting Up the UI

Configure scroll view, header, and action views.

```swift theme={null}
override public func viewDidLoad() {
    super.viewDidLoad()
    connect()
    view.backgroundColor = CometChatTheme.backgroundColor01
    setupScrollView()
    setupLayout()
    addButtonActions()
}
```

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

Lays out the UI components and registers for group events.

### 3. Enabling Group Action Buttons

Wire up view/add/banned members actions.

```swift theme={null}
public func addButtonActions() {
    viewMembersView.onActionButtonTapped = { self.viewMembers() }
    addMembersView.onActionButtonTapped = { self.addMembers() }
    bannedMembersView.onActionButtonTapped = { self.banMembers() }
}
```

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

Enables user interaction for member management.

### 4. Handling Leave and Delete Actions

Provide ownership-aware leave/delete flows.

```swift theme={null}
@objc func showLeaveGroupAlert() { /* ownership transfer or leave logic */ }

@objc func showDeleteGroupAlert() { /* deleteGroup and pop to Home */ }
```

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

Manages group exit, with transfer prompt for owners.

### 5. Listening for Group Events

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

```swift theme={null}
func connect() {
    CometChat.addGroupListener(listenerId, self)
    CometChatGroupEvents.addListener(listenerId, self)
}

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

extension GroupDetailsViewController: CometChatGroupDelegate, CometChatGroupEventListener {
    func onGroupMemberJoined(_ action: ActionMessage, user: User, group: Group) { updateGroupInfo(group) }
    func onGroupMemberLeft(_ action: ActionMessage, user: User, group: Group) { /* hide UI if self-left */ }
    // other event methods...
}
```

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

Keeps the group details in sync with back-end events.

## Customization Options

* **Header Styling:** Use `CometChatTheme` to customize fonts, colors, and borders.
* **Button Labels:** Localize or rebrand action texts.
* **Avatar Placeholder:** Provide fallback initials or default images.

## Filtering & Edge Cases

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

* **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` |

<CardGroup>
  <Card title="Full Sample App">
    Explore the complete Group Details flow:
    [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
  </Card>

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