Block/Unblock Users

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

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.