Block/Unblock User

Enable users to block and unblock others directly within chat using CometChat’s React UI Kit, preventing unwanted communication and giving users more control.

Overview

When a user is blocked, they are prevented from sending messages to the person who blocked them. CometChat UIKit manages most of the related functionality automatically:

• Composer Disabled: The message input area is not shown during conversations with blocked users.
• Unblock Option: A visible “Unblock” button allows users to lift the block.
• Messaging Limitations: Blocked users are restricted from initiating messages to the person who blocked them.

Prerequisites

• CometChat SDK v4.x or later
• CometChat App ID, Auth Key, and Region configured and initialized.
• React project setup with CometChat UI Kit
• Toast/confirmation UI components (e.g., CometChatConfirmDialog)

Components

Component / Class	Role
CometChatUserDetails	Displays user details and available actions
CometChatConfirmDialog	Renders confirmation prompts for block/delete
CometChatUserEvents	Emits block/unblock events
CometChatConversationEvents	Emits conversation deletion event

Integration Steps

1. Detect Block Status

Update UI when block state changes.

if (user) {
  CometChat.unblockUsers([user.getUid()]).then(() => {
    user?.setBlockedByMe(false);
    CometChatUserEvents.ccUserUnblocked.next(user as CometChat.User);
});

File reference:
CometChatThreadedMessages.tsx

Ensures the composer and unblock UI reflect the current block state.

2. Hide Composer & Show Unblock UI

Define layout elements and their visibility toggles.

<CometChatConfirmDialog
  title={getLocalizedString('block_contact')}
  messageText={getLocalizedString('confirm_block_contact')}
  confirmButtonText={getLocalizedString('user_details_block')}
  onCancelClick={() => {
    setShowBlockUserDialog(!showBlockUserDialog);
  }}
  onSubmitClick={onBlockUserClicked}
/>

File reference:
CometChatHome.tsx

Prepares the UI containers for dynamic show/hide operations.

3. User Blocking Configuration

Call the unblock API and observe status updates.

const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((blockedUser) => {
  if (blockedUser.getBlockedByMe()) {
    setShowComposer(false);
  }
  updateUserAfterBlockUnblock(blockedUser);
});
const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe((unBlockedUser) => {
  if (!unBlockedUser.getBlockedByMe()) {
    setShowComposer(true);
  }
  updateUserAfterBlockUnblock(unBlockedUser);
});

File reference:
CometChatHome.tsx

Executes unblock logic and updates LiveData to refresh UI.

Error Handling & Blocked-User Handling

• Show toast feedback on success/failure
• Disable status and update UI for blocked users
• Properly catch and log deletion errors

Summary / Feature Matrix

Feature	Component / Method
Block user	CometChat.blockUsers([UID])
Unblock user	CometChat.unblockUsers([UID])
Delete chat	CometChat.deleteConversation(UID, 'user')
Event updates	CometChatUserEvents / CometChatConversationEvents

Next Steps & Further Reading

React Sample App

Explore this feature in the CometChat Sample App.

UI Kit Source Code

Access the complete UI Kit source code on GitHub.