> ## 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.

# Block/Unblock Users

Implement user blocking functionality to prevent unwanted communication in your React chat app.

## Overview

The Block Users feature allows users to prevent specific users from sending them messages, effectively cutting off communication from unwanted contacts.

* Block Users feature allows users to prevent specific users from sending them messages.
* Provides privacy control, prevents harassment, and allows users to manage their communication preferences.
* Your app will allow users to block/unblock other users, hide message composers for blocked users, and provide appropriate UI feedback for blocked states.

***

## Prerequisites

* React v18.2.0+
* CometChat React UI Kit v6.1.0+
* CometChat Chat SDK JavaScript v4.0.13+
* Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
* TypeScript support (recommended)
* User authentication and chat functionality already implemented

***

## Components

| Component / Class                       | Role                                           |
| :-------------------------------------- | :--------------------------------------------- |
| **CometChat.blockUsers()**              | SDK method to block specific users             |
| **CometChat.unblockUsers()**            | SDK method to unblock previously blocked users |
| **CometChatUserEvents.ccUserBlocked**   | Event listener for when a user is blocked      |
| **CometChatUserEvents.ccUserUnblocked** | Event listener for when a user is unblocked    |
| **CometChatConfirmDialog**              | Confirmation dialog for block/unblock actions  |
| **CometChatToast**                      | Toast notifications for action feedback        |

***

## Integration Steps

### 1. Block User Function Implementation

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const onBlockUserClicked: () => Promise<void> = () => {
    let UID = user.getUid();
    return new Promise(async (resolve, reject) => {
        CometChat.blockUsers([UID]).then(
            list => {
                user.setBlockedByMe(true);
                CometChatUserEvents.ccUserBlocked.next(user);
                toastTextRef.current = getLocalizedString("blocked_successfully");
                setShowToast(true);
                return resolve();
            }, error => {
                console.log("Blocking user fails with error", error);
                return reject();
            }
        )
    })
}
```

***

### 2. Unblock User Function Implementation

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const onUnblockUserClicked = () => {
    let UID = user.getUid();
    CometChat.unblockUsers([UID]).then(
        list => {
            setActionItems([{
                "name": getLocalizedString("user_details_block"),
                "icon": blockIcon,
                "id": "block_unblock_user"
            }, {
                "name": getLocalizedString("delete_chat"),
                "icon": deleteIcon,
                "id": "delete_chat"
            }]);
            user.setBlockedByMe(false);
            CometChatUserEvents.ccUserUnblocked.next(user);
        }, error => {
            console.log("Unblocking user fails with error", error);
        }
    );
}
```

***

### 3. Block User Confirmation Dialog

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const getBlockUserConfirmationDialogView = () => {
    return <>
        <div className="cometchat-block-user-dialog__backdrop">
            <CometChatConfirmDialog
                title={getLocalizedString("block_contact")}
                messageText={getLocalizedString("confirm_block_contact")}
                confirmButtonText={getLocalizedString("user_details_block")}
                onCancelClick={() => {
                    setShowBlockUserDialog(!showBlockUserDialog);
                }}
                onSubmitClick={onBlockUserClicked} />
        </div>
    </>
}
```

***

### 4. Message Composer Blocked State

*File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)*

```tsx theme={null}
{showComposerState ? (
    <div className="cometchat-composer-wrapper">
        <CometChatMessageComposer
            user={user}
            group={group}
        />
    </div>
) : (
    <div className="message-composer-blocked" onClick={() => {
        if (user) {
            CometChat.unblockUsers([user?.getUid()]).then(() => {
                user.setBlockedByMe(false);
                CometChatUserEvents.ccUserUnblocked.next(user);
            })
        }
    }}>
        <div className="message-composer-blocked__text">
            {getLocalizedString("cannot_send_to_blocked_user")} 
            <a>{getLocalizedString("click_to_unblock")}</a>
        </div>
    </div>
)}
```

***

## Implementation Flow

* **Fetch Data / User State**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
if (user?.getBlockedByMe?.()) {
    setShowComposerState(false);
}
```

* **Load Blocked Status / Associated Data**

*File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)*

```tsx theme={null}
useEffect(() => {
    if (messageUser?.getBlockedByMe()) {
        setShowComposer(false);
    }
    const unsubscribeFromEvents = subscribeToEvents();
    return () => {
        unsubscribeFromEvents();
    };
}, [subscribeToEvents, selectedItem]);
```

* **Send Block/Unblock Action Handler**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const onUserActionClick = (item: { name: string; icon: string; }) => {
    if (item.name == getLocalizedString("user_details_block")) {
        setShowBlockUserDialog(true);
    } else if (item.name == getLocalizedString("user_details_unblock")) {
        onUnblockUserClicked();
    }
}
```

* **Live Updates / Observers**

*File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)*

```tsx theme={null}
const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe(user => {
    if (user.getBlockedByMe()) {
        setShowComposer(false);
    }
    updateUserAfterBlockUnblock(user);
});

const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => {
    if (!user.getBlockedByMe()) {
        setShowComposer(true);
    }
    updateUserAfterBlockUnblock(user);
});
```

***

## Customization Options

* Styling overrides for blocked states and confirmation dialogs
* Custom block/unblock confirmation messages
* Toast notification customization
* Custom action items for different user states
* Custom blocked state UI

***

## Filtering / Edge Cases

* Detect when blocking status changes mid-chat
* Prevent duplicate block actions
* Handle blocked users in search results
* Respect group chat rules when blocking
* Keep old messages visible from blocked users

***

## Error Handling

```tsx theme={null}
CometChat.blockUsers([UID]).then(
    list => {
        user.setBlockedByMe(true);
        CometChatUserEvents.ccUserBlocked.next(user);
        toastTextRef.current = getLocalizedString("blocked_successfully");
        setShowToast(true);
    }, error => {
        console.log("Blocking user fails with error", error);
    }
)
```

* Handle block/unblock network errors
* Provide retry options
* Maintain UI consistency on errors

***

## Context-Specific Notes

* Blocking applies only to private chats, not groups
* Blocked users may still appear in lists but with indicators
* Existing messages remain visible
* Updates are reflected in real-time

***

## Summary / Feature Matrix

| Feature                | Component / Method              | File Reference                                                                                                                                        |
| :--------------------- | :------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Block user             | `CometChat.blockUsers([UID])`   | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)             |
| Unblock user           | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)             |
| Check blocked status   | `user.getBlockedByMe()`         | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
| Block confirmation dlg | `CometChatConfirmDialog`        | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)             |
| Blocked composer state | `message-composer-blocked`      | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
| Block user events      | `ccUserBlocked.subscribe()`     | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)             |
| Unblock user events    | `ccUserUnblocked.subscribe()`   | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)             |
| Update user state      | `user.setBlockedByMe(boolean)`  | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)             |

***

## Next Steps & Further Reading

* [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
* [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
* User Management Features
* Advanced Customization Guide
* Event Handling Documentation