> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Block/Unblock Users

> Implement block and unblock user functionality in CometChat React Native UI Kit with composer state management.

<Accordion title="AI Integration Quick Reference">
  | Field       | Value                                                                                                                                               |
  | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package     | `@cometchat/chat-uikit-react-native`                                                                                                                |
  | Key methods | `CometChat.blockUsers()`, `CometChat.unblockUsers()`                                                                                                |
  | Init        | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`                                                                             |
  | Events      | `CometChatUIEvents.ccUserBlocked`, `CometChatUIEvents.ccUserUnBlocked`                                                                              |
  | Sample app  | [GitHub](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/examples/SampleApp)                                                      |
  | Related     | [Users](/ui-kit/react-native/users) · [Message Composer](/ui-kit/react-native/message-composer) · [All Guides](/ui-kit/react-native/guide-overview) |
</Accordion>

Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.

Before starting, complete the [Getting Started](/ui-kit/react-native/react-native-cli-integration) guide.

***

## Components

| Component / Class                   | Role                                           |
| :---------------------------------- | :--------------------------------------------- |
| `CometChat.blockUsers()`            | SDK method to block specific users             |
| `CometChat.unblockUsers()`          | SDK method to unblock previously blocked users |
| `CometChatUIEvents.ccUserBlocked`   | Event fired when a user is blocked             |
| `CometChatUIEvents.ccUserUnBlocked` | Event fired when a user is unblocked           |
| `CometChatConfirmDialog`            | Confirmation dialog for block/unblock actions  |

***

## Integration Steps

### 1. Block User

Call `CometChat.blockUsers()` with the target UID. On success, emit `ccUserBlocked` so all subscribed components react to the change.

```tsx theme={null}
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatUIEventHandler,
  CometChatUIEvents,
} from '@cometchat/chat-uikit-react-native';

const blockUser = async (user: CometChat.User) => {
  try {
    const uid = user.getUid();
    await CometChat.blockUsers([uid]);
    
    // Fetch fresh user data
    const freshUser = await CometChat.getUser(uid);
    
    // Emit event so UI components update
    CometChatUIEventHandler.emitUserEvent(
      CometChatUIEvents.ccUserBlocked,
      { user: freshUser }
    );
    
    console.log('User blocked successfully');
  } catch (error) {
    console.error('Blocking user failed:', error);
  }
};
```

***

### 2. Unblock User

Call `CometChat.unblockUsers()` with the target UID. On success, emit `ccUserUnBlocked` to restore the composer.

```tsx theme={null}
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatUIEventHandler,
  CometChatUIEvents,
} from '@cometchat/chat-uikit-react-native';

const unblockUser = async (user: CometChat.User) => {
  try {
    const uid = user.getUid();
    await CometChat.unblockUsers([uid]);
    
    // Fetch fresh user data
    const freshUser = await CometChat.getUser(uid);
    
    // Emit event so UI components update
    CometChatUIEventHandler.emitUserEvent(
      CometChatUIEvents.ccUserUnBlocked,
      { user: freshUser }
    );
    
    console.log('User unblocked successfully');
  } catch (error) {
    console.error('Unblocking user failed:', error);
  }
};
```

***

### 3. Composer Blocked State

When a user is blocked, replace the composer with an unblock prompt.

```tsx theme={null}
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatMessageComposer,
  CometChatUIEventHandler,
  CometChatUIEvents,
  useTheme,
  useCometChatTranslation,
} from '@cometchat/chat-uikit-react-native';

interface MessageComposerWithBlockProps {
  user: CometChat.User;
}

const MessageComposerWithBlock: React.FC<MessageComposerWithBlockProps> = ({ user }) => {
  const theme = useTheme();
  const { t } = useCometChatTranslation();
  const [localUser, setLocalUser] = useState(user);

  // Listen for block/unblock events
  useEffect(() => {
    const listenerId = 'composer_block_listener_' + Date.now();
    
    CometChatUIEventHandler.addUserListener(listenerId, {
      ccUserBlocked: (payload: { user: CometChat.User }) => {
        if (payload.user.getUid() === localUser.getUid()) {
          setLocalUser(payload.user);
        }
      },
      ccUserUnBlocked: (payload: { user: CometChat.User }) => {
        if (payload.user.getUid() === localUser.getUid()) {
          setLocalUser(payload.user);
        }
      },
    });

    return () => {
      CometChatUIEventHandler.removeUserListener(listenerId);
    };
  }, [localUser]);

  const handleUnblock = async () => {
    try {
      await CometChat.unblockUsers([localUser.getUid()]);
      const freshUser = await CometChat.getUser(localUser.getUid());
      setLocalUser(freshUser);
      
      CometChatUIEventHandler.emitUserEvent(
        CometChatUIEvents.ccUserUnBlocked,
        { user: freshUser }
      );
    } catch (error) {
      console.error('Error unblocking user:', error);
    }
  };

  if (localUser.getBlockedByMe()) {
    return (
      <View style={{
        alignItems: 'center',
        padding: 20,
        backgroundColor: theme.color.background3,
      }}>
        <Text style={{
          color: theme.color.textSecondary,
          textAlign: 'center',
          marginBottom: 10,
        }}>
          {t('BLOCKED_USER_DESC')}
        </Text>
        <TouchableOpacity
          onPress={handleUnblock}
          style={{
            borderWidth: 1,
            borderColor: theme.color.borderDefault,
            borderRadius: 8,
            paddingHorizontal: 20,
            paddingVertical: 10,
          }}
        >
          <Text style={{ color: theme.color.textPrimary }}>
            {t('UNBLOCK')}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  return <CometChatMessageComposer user={localUser} />;
};
```

***

### 4. Block Option in User Info

Add a block/unblock option in the user info or details screen.

```tsx theme={null}
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, Alert } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import {
  CometChatUIEventHandler,
  CometChatUIEvents,
  useTheme,
  useCometChatTranslation,
} from '@cometchat/chat-uikit-react-native';

interface UserInfoActionsProps {
  user: CometChat.User;
}

const UserInfoActions: React.FC<UserInfoActionsProps> = ({ user }) => {
  const theme = useTheme();
  const { t } = useCometChatTranslation();
  const [localUser, setLocalUser] = useState(user);

  const handleBlockToggle = () => {
    if (localUser.getBlockedByMe()) {
      // Unblock directly
      unblockUser();
    } else {
      // Show confirmation before blocking
      Alert.alert(
        t('BLOCK_USER'),
        t('BLOCK_USER_CONFIRMATION'),
        [
          { text: t('CANCEL'), style: 'cancel' },
          { text: t('BLOCK'), style: 'destructive', onPress: blockUser },
        ]
      );
    }
  };

  const blockUser = async () => {
    try {
      await CometChat.blockUsers([localUser.getUid()]);
      const freshUser = await CometChat.getUser(localUser.getUid());
      setLocalUser(freshUser);
      
      CometChatUIEventHandler.emitUserEvent(
        CometChatUIEvents.ccUserBlocked,
        { user: freshUser }
      );
    } catch (error) {
      console.error('Error blocking user:', error);
    }
  };

  const unblockUser = async () => {
    try {
      await CometChat.unblockUsers([localUser.getUid()]);
      const freshUser = await CometChat.getUser(localUser.getUid());
      setLocalUser(freshUser);
      
      CometChatUIEventHandler.emitUserEvent(
        CometChatUIEvents.ccUserUnBlocked,
        { user: freshUser }
      );
    } catch (error) {
      console.error('Error unblocking user:', error);
    }
  };

  return (
    <TouchableOpacity
      onPress={handleBlockToggle}
      style={{
        padding: 15,
        borderBottomWidth: 1,
        borderBottomColor: theme.color.borderLight,
      }}
    >
      <Text style={{
        color: localUser.getBlockedByMe() ? theme.color.textPrimary : theme.color.error,
      }}>
        {localUser.getBlockedByMe() ? t('UNBLOCK_USER') : t('BLOCK_USER')}
      </Text>
    </TouchableOpacity>
  );
};
```

***

## Feature Matrix

| Feature              | Component / Method                          |
| :------------------- | :------------------------------------------ |
| Block user           | `CometChat.blockUsers([UID])`               |
| Unblock user         | `CometChat.unblockUsers([UID])`             |
| Check blocked status | `user.getBlockedByMe()`                     |
| Block event          | `CometChatUIEvents.ccUserBlocked`           |
| Unblock event        | `CometChatUIEvents.ccUserUnBlocked`         |
| Event listener       | `CometChatUIEventHandler.addUserListener()` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Users" href="/ui-kit/react-native/users">
    Display and manage user lists.
  </Card>

  <Card title="Message Composer" href="/ui-kit/react-native/message-composer">
    Customize the message input component.
  </Card>

  <Card title="All Guides" href="/ui-kit/react-native/guide-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/examples/SampleApp">
    Full working sample application on GitHub.
  </Card>
</CardGroup>