Blocking Users

Introduction

Blocking users improves safety and user control. It helps prevent harassment, spam, and unwanted interactions, and is required by some app stores.

Best Practices

Gate block/unblock actions behind clear confirmation to prevent accidental taps.
Reflect block state immediately in UI and sync with the server in the background.
Handle group channels carefully: blocked users can still post in shared channels.
Cache blocked users locally to avoid repeated fetches on every screen open.
Keep moderation actions consistent across message actions and profile surfaces.

Stream Chat

The Stream Chat SDK supports blocking/unblocking users and listing blocked users.

When you block a user, you won’t receive any direct messages from that user anymore. However, if you share a group with other participants, you will still receive messages from the blocked user.

This cookbook shows how to implement blocking in a React Native chat app.

Low-level client support

The low-level client provides the following methods related to user blocking.

Blocking a user

Call blockUser with the ID of the user you want to block.

import { StreamChat } from "stream-chat";
const chatClient = StreamChat.getInstance("your api key");

// Note: call after `client.connectUser` is established.
const blockUser = async (userId: string) => {
  try {
    await chatClient.blockUser(userId);
  } catch (err) {
    console.log("Error blocking user:", err);
  }
};

Unblocking a user

To unblock a user, call unblockUser with their user ID.

import { StreamChat } from "stream-chat";
const chatClient = StreamChat.getInstance("your api key");

// Note this has to be done after the client connection(`client.connectUser`) is established.
const unblockUser = async (userId: string) => {
  try {
    await chatClient.unblockUser(userId);
  } catch (err) {
    console.log("Error unblocking user:", err);
  }
};

Listing Blocked Users

To list all the blocked users, you can use the getBlockedUsers method of the client instance.

const chatClient = StreamChat.getInstance("your api key");

// Note: call after `client.connectUser` is established.
const getBlockedUsers = async () => {
  try {
    const users = await chatClient.getBlockedUsers();
    setBlockedUsers(users.blocks);
  } catch (error) {
    console.log("Error getting blocked users:", error);
  }
};

Message Actions

You can use the logic above to create your own custom message actions that will involve user blocking.

Use the messageActions prop on Channel. See Customize message actions.

import { Channel, messageActions } from "stream-chat-react-native";

const App = () => {
  return (
    <Channel
      channel={channel}
      messageActions={(params) => {
        const { dismissOverlay, message } = params;
        const actions = messageActions({ ...params });
        if (actions) {
          actions.push({
            action: async () => {
              try {
                await chatClient.blockUser(message.user?.id || "");
                dismissOverlay();
              } catch (error) {
                console.log("Error blocking user:", error);
              }
            },
            actionType: "block-user",
            title: "Block User",
          });
          return actions;
        } else {
          return [];
        }
      }}
    >
      {/* Other components here  */}
    </Channel>
  );
};

Displaying Blocked users

Next, build a custom UI to list blocked users and allow unblocking.

import { useEffect, useState } from "react";
import { Image, Pressable, StyleSheet, Text, View } from "react-native";
import { BlockedUserDetails, StreamChat } from "stream-chat";

const chatClient = StreamChat.getInstance("your api key");

const BlockedUsers = () => {
  const [blockedUsers, setBlockedUsers] = useState<BlockedUserDetails[]>([]);

  useEffect(() => {
    const getBlockedUsers = async () => {
      try {
        const users = await chatClient.getBlockedUsers();
        setBlockedUsers(users.blocks);
      } catch (error) {
        console.log("Error getting blocked users:", error);
      }
    };

    getBlockedUsers();
  }, []);

  const unblockUser = async (userId: string) => {
    try {
      await chatClient.unblockUser(userId);
      const filteredUsers = blockedUsers.filter(
        (user) => user.blocked_user_id !== userId,
      );
      setBlockedUsers(filteredUsers);
    } catch (err) {
      console.log("Error unblocking user:", err);
    }
  };

  return (
    <View>
      {blockedUsers.map((blockedUser: BlockedUserDetails) => (
        <Pressable
          key={blockedUser.blocked_user_id}
          onPress={() => {
            unblockUser(blockedUser.blocked_user_id);
          }}
          style={styles.container}
        >
          <Image
            source={{ uri: blockedUser.blocked_user.image as string }}
            style={styles.image}
          />
          <Text style={styles.name}>{blockedUser.blocked_user.name}</Text>
        </Pressable>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    padding: 16,
    alignItems: "center",
  },
  image: {
    height: 80,
    width: 80,
    borderRadius: 40,
  },
  name: {
    fontSize: 16,
    fontWeight: "bold",
    marginLeft: 16,
  },
});

This view lists blocked users and lets you unblock them.

Summary

This cookbook covered blocking/unblocking users, adding message actions, and building a blocked users list. Use these actions to meet app store review requirements (especially on Apple platforms).

Compress File Before Uploading

Location Sharing