Block/Unblock Users - CometChat Docs

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
Related	Users · Message Composer · All Guides

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

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.

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.

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.

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

Users

Display and manage user lists.

Message Composer

Customize the message input component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Integration Steps

​1. Block User

​2. Unblock User

​3. Composer Blocked State

​4. Block Option in User Info

​Feature Matrix

​Next Steps