UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native
/
Features

Moderation

To protect members from unsafe content and harmful language, Sendbird provides a variety of moderation methods. These methods include the ability to mute and ban members or participants, freeze channels, and assign channel operators. Moderation is currently supported for group channels only.


Mute and unmute

Mute is a feature that allows operators to mute certain members in a channel. Muted members can stay in the channel and are allowed to view the messages, but they can’t send any messages until the operators unmute them. In order to use this feature, a channel must have at least one operator.

Group channel

You can customize UI elements of the mute feature in group channels. These elements are found in the group channel view, channel member list view, muted member list view, and moderation view.

An operator can mute or unmute members in the group channel member list. A list of the muted members can also be found in the muted member list. To learn more about how to moderate group channels and view a list of muted members through the moderation menu, refer to the moderate group channels and members page.

Customize the UI for mute

The UI for mute and unmute can be customized through the string resource and icon resource.

String resource

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL_MODERATION

MENU_MUTED_MEMBERS

A text for muted member list.

GROUP_CHANNEL

INPUT_PLACEHOLDER_MUTED

A text indicating that the current user is muted in the channel.

LABELS

MUTE

A text for the mute button in the channel member list view.

LABELS

UNMUTE

A text for the unmute button in the muted member list view.

PLACEHOLDER

NO_MUTED_MEMBERS

A text indicating that there are no muted members in the muted member list view.

GROUP_CHANNEL_MUTED_MEMBERS

HEADER_TITLE

A title in the header component of the muted member list view.

interface StringSet {
    GROUP_CHANNEL_MODERATION: {
        MENU_MUTED_MEMBERS: string;
    };
    LABELS: {
        MUTE: string;
        UNMUTE: string;
    };
    PLACEHOLDER: {
        NO_MUTED_MEMBERS: string;
    };
}

Icon resource

The following table shows a customizable mute icon.

IconImageDescription

mute

An icon indicating a member's muted state.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['mute'] = require('your_icons/mute_icon.png');

Ban and unban

Ban is a feature that allows operators to kick certain members out of the channel and prevent them from entering. Banned users aren't allowed to enter the channel again until the operator unbans them. In order to use this feature, a channel must have at least one operator.

Group channel

You can customize UI elements of the ban feature in group channels. These elements are found in the channel member list view, banned user list view, and moderation view.

An operator can ban members in the channel member list. The banned users will be removed from the channel member list and moved to the banned user list. If operators wish to unban users, they can do so in the banned user list.

To learn more about how to moderate group channels and view a list of banned users through the moderation menu, refer to the moderate group channels and members page.

Customize the UI for ban

The UI for ban and unban can be customized through the string resource and icon resource.

String resource

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL_MODERATION

MENU_BANNED_USERS

A text for banned user list.

LABELS

BAN

A text for the ban button in the channel member list view.

LABELS

UNBAN

A text for the unban button in the banned user list view.

PLACEHOLDER

NO_BANNED_USERS

A text indicating that there are no banned users in the banned user list view.

GROUP_CHANNEL_BANNED_USERS

HEADER_TITLE

A title in the header component of the banned user list view.

interface StringSet {
    GROUP_CHANNEL_MODERATION: {
        MENU_BANNED_USERS: string;
    };
    LABELS: {
        BAN: string;
        UNBAN: string;
    };
    PLACEHOLDER: {
        NO_BANNED_USERS: string;
    };
}

Icon resource

The following table shows a customizable ban icon.

IconImageDescription

ban

An icon indicating the banned status.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['ban'] = require('your_icons/ban_icon.png');

Channel operator

Channel operator is a feature that allows you to assign an operator for a channel. The operator is authorized to mute and ban users. They play an important role in moderating members of a channel with abnormal activities.

To learn more about how to moderate group channels and view a list of operators through the moderation menu, refer to the moderate group channels and members page.

Group channel

You can customize UI elements of the channel operator feature in group channels. These elements are found in the channel member list view, operator list view, and moderation view.

When a member is assigned to be an operator, the operator label will appear next to the member’s name on the channel member list. They'll also be added to the operator list.

Customize the UI for channel operator

The UI for channel operator can be customized through the string resource and icon resource.

String resource

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL_MODERATION

MENU_OPERATORS

A text for operator list.

LABELS

REGISTER_AS_OPERATOR

A text to register a channel member as an operator in the operator list view.

LABELS

UNREGISTER_OPERATOR

A text to unregister an operator in the operator list view.

GROUP_CHANNEL_OPERATORS

HEADER_TITLE

A title in the header component of the operator list view.

GROUP_CHANNEL_REGISTER_OPERATOR

HEADER_TITLE

A title in the header component of the register members as operators view.

GROUP_CHANNEL_REGISTER_OPERATOR

HEADER_RIGHT

A text button in the header component of the register members as operators view that allows users to add new operators.

interface StringSet {
    GROUP_CHANNEL_MODERATION: {
        MENU_OPERATORS: string;
    };
    LABELS: {
        REGISTER_AS_OPERATOR: string;
        UNREGISTER_OPERATOR: string;
    };
}

Icon resource

The following table shows customizable icons.

IconImageDescription

operator

An icon indicating a channel operator.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['operator'] = require('your_icons/operator_icon.png');

Freeze and unfreeze

Freeze is a feature that pauses a channel and only allows operators to talk. When the channel is in a frozen state, only channel operators can send messages while all chat functions are temporarily turned off for the rest of the members who are not operators. You can customize UI elements of the freeze feature. These elements are found in the group channel view, channel list view, and moderation view. The option to freeze or unfreeze a channel can be found in the moderation view.

Note: Operators can only freeze group channels in the moderation view. To freeze open channels, you need to turn on the feature through the Sendbird Dashboard.

To learn more about how to moderate channels and change the freeze state, refer to the moderate group channels and members page.

Customize the UI for freeze

The UI for freeze can be customized through the string resource and icon resource.

String resource

The following table shows customizable properties of StringSet.

CategoryPropertyDescription

GROUP_CHANNEL

INPUT_PLACEHOLDER_DISABLED

A placeholder text in a group channel's message input component indicating that chat is unavailable because the channel is frozen.

GROUP_CHANNEL

LIST_BANNER_FROZEN

A text for the banner in a group channel view indicating that the channel is frozen.

GROUP_CHANNEL_MODERATION

MENU_FREEZE_CHANNEL

A text to freeze the channel in the moderation view.

interface StringSet {
    GROUP_CHANNEL: {
        LIST_BANNER_FROZEN: string;
    };
    GROUP_CHANNEL_MODERATION: {
        MENU_FREEZE_CHANNEL: string;
    };
    LABELS: {
        UNREGISTER_OPERATOR: string;
    };
}

Icon resource

The following table shows customizable icons.

IconImageDescription

freeze

An icon indicating that a channel is frozen.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['freeze'] = require('your_icons/freeze_icon.png');