Build a comprehensive user profile screen in your iOS app using CometChat’s UIKit for iOS, complete with avatar display, messaging, audio/video calls, and block/unblock actions.

Overview

The UserDetailsViewController provides a detailed view of a CometChat user’s profile and key interaction options, including:
  • Displaying the user’s avatar, name, and online status.
  • Initiating one-on-one chats.
  • Starting audio or video calls.
  • Blocking or unblocking users.
  • Deleting the conversation with the user.

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 authenticated with CometChat.login() before presenting the details screen.

Components

ComponentRole
CometChatAvatarDisplays user’s profile picture with customizable styling.
CometChatMessagesViewControllerOpens the 1-on-1 chat interface when “Message” is tapped.
CometChatCallButtonsInitiates audio/video calls (CometChat.startCall()).
CometChatUIKit.blockUser()Blocks the selected user and updates UI accordingly.
CometChatUIKit.unblockUser()Unblocks a user if previously blocked.

Integration Steps

1. Presenting the User Details Screen

Initialize and push UserDetailsViewController with the selected user’s data.
import UIKit
import CometChatSDK

func showUserDetails(for user: User) {
    let detailsVC = UserDetailsViewController(user: user)
    navigationController?.pushViewController(detailsVC, animated: true)
}
File reference:
UserDetailsViewController.swift
Ensures the details screen loads with the correct user context.

2. Configuring the UI

Arrange avatar, labels, and action buttons on the view.
override public func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    setupLayout()
    setupNavigationBar()
    if let user = user {
        updateUserStatus(user: user)
    }
}
File reference:
UserDetailsViewController.swift
Applies theme-based styling and updates status label on appearance.

3. Enabling Call Buttons

Add audio and video call buttons if calls SDK is available.
#if canImport(CometChatCallsSDK)
buttonContainerStackView.addArrangedSubview(audioCallButton)
buttonContainerStackView.addArrangedSubview(videoCallButton)
#endif
File reference:
UserDetailsViewController.swift
Conditionally shows call options based on SDK availability.

4. Block/Unblock and Delete Actions

Provide block/unblock and delete conversation functionality.
@objc func showBlockAlert() {
  // Toggle block/unblock logic with CometChat.blockUsers / unblockUsers
}

@objc func showDeleteAlert() {
  // Confirm and call CometChat.deleteConversation()
}
File reference:
UserDetailsViewController.swift
Manages user relationships and conversation lifecycle.

5. Listening for User Events

Update UI in response to status, block, and unblock events.
func connect() {
  CometChat.addUserListener(listenerID, self)
  CometChatUserEvents.addListener(listenerID, self)
}

func disconnect() {
  CometChat.removeUserListener(listenerID)
  CometChatUserEvents.removeListener(listenerID)
}

extension UserDetailsViewController: CometChatUserEventListener, CometChatUserDelegate {
  func onUserOnline(user: User) { updateUserStatus(user: user) }
  func onUserOffline(user: User) { updateUserStatus(user: user) }
  func ccUserBlocked(user: User) { statusLabel.isHidden = true }
  func ccUserUnblocked(user: User) { statusLabel.isHidden = false; updateUserStatus(user: user) }
}
File reference:
UserDetailsViewController.swift
Keeps profile status and block state in sync with real-time events.

Customization Options

  • Avatar Styling: Use CometChatAvatarStyle to adjust shape and border.
  • Button Assets: Replace default icons with custom images.
  • Localization: Override button titles and alerts with localized strings.
  • Theming: Leverage CometChatTheme and CometChatTypography for fonts and colors.

Filtering & Edge Cases

  • Hide block/unblock controls for the logged-in user.
  • Disable call buttons if calling is disabled in settings.
  • Handle missing or partially loaded user data with fallback UI.

Error Handling

  • Fetch Failures: Show error label or dismiss the view.
  • Block/Unblock Errors: Present retry alert on API failure.
  • Call Failures: Alert user on call initiation error or permission denial.

Feature Matrix

FeatureComponent / Method
Display user detailsCometChatAvatar, UILabel
Open chatCometChatMessagesViewController(user:)
Audio/video callCometChat.startCall() via Call Buttons
Block userCometChatUIKit.blockUser(uid:)
Unblock userCometChatUIKit.unblockUser(uid:)
Delete conversationCometChat.deleteConversation()

Full Sample App

Try the complete sample app for User Details: GitHub → SampleApp

UIKit Source Code

Explore CometChat UIKit iOS repository: GitHub → UIKit v5