> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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 |
  | - | - |
  | Components | `CometChatMessageComposer` |
  | 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.