Moderate group channels and members

In group channels, you can moderate channels and members. Using the moderation menu, you can retrieve a list of operators, muted members, and banned users in a channel, as well as freeze the channel. In order to use this feature, a channel must have at least one operator.

Usage

You can start building a group channel moderation screen by first creating a fragment. To do so, call the createGroupChannelModerationFragment method. Once a group channel moderation fragment is built, you need to set up the navigation props and register the screen to a navigation library. Refer to the code below.

import React from 'react';

import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelModerationFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

const GroupChannelModerationFragment = createGroupChannelModerationFragment();
const GroupChannelModerationScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToGroupChannelOperatorsScreen = () => {};
    const navigateToGroupChannelMutedMembersScreen = () => {};
    const navigateToGroupChannelBannedUsersScreen = () => {};
    const navigateToBack = () => {};
    return (
        <GroupChannelModerationFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressMenuOperators={navigateToGroupChannelOperatorsScreen}
            onPressMenuMutedMembers={navigateToGroupChannelMutedMembersScreen}
            onPressMenuBannedUsers={navigateToGroupChannelBannedUsersScreen}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelModerationFragment.

Properties

Required	Type	Description
channel	object	Specifies the group channel that the current user is a member of.
onPressHeaderLeft	function	Specifies the prop to execute a custom navigation operation when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.
onPressMenuOperators	function	Specifies the prop to execute a custom navigation operation when the operators button on the moderation menu component is selected. By default, the operator list screen appears.
onPressMenuMutedMembers	function	Specifies the prop to execute a custom navigation operation when the muted members button on the moderation menu component is selected. By default, the muted member list screen appears.
onPressMenuBannedUsers	function	Specifies the prop to execute a custom navigation operation when the banned users button on the moderation menu component is selected. By default, the banned user list screen appears.

Optional	Type	Description
menuItemsCreator	function	Specifies the prop to customize the menu list in the moderation menu component.

Context

To store and handle data that are used to build the group channel moderation screen, Sendbird UIKit provides GroupChannelModerationContexts, which includes the Fragment context object.

type GroupChannelModerationContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        channel: SendbirdGroupChannel;
    }>;
};

Fragment

To retrieve data from the Chat SDK on the current user's group channel moderation screen, you need to call the useContext hook and pass GroupChannelModerationContexts.Fragment as a parameter. The data is then used to render the group channel moderation module and its components.

const Component = () => {
    const {
        headerTitle,
        channel,
    } = useContext(GroupChannelModerationContexts.Fragment);
};

Module components

A group channel moderation screen is composed of two module components: header and menu. These components make up the GroupChannelModerationContexts and are used to create and display the group channel UI.

Header

The header component displays the title of the group channel, a button on the top left corner, and another button on the top right corner. By default, the left button allows you to go back to the previous screen and when selected, the onPressHeaderLeft navigation prop is called. When the right button is selected, onPressHeaderRight is called and the group channel settings screen appears.

List of properties

The following table lists the properties of GroupChannelModerationModule.Header.

Property name	Type	Description
onPressHeaderLeft	function	Specifies the prop to execute a custom navigation operation when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.

The moderation menu shows all moderation items, which includes a list of operators, muted members, banned users, and the option to freeze the channel.

List of properties

The following table lists the properties of GroupChannelModerationModule.Menu.

Property name	Type	Description
onPressHeaderLeft	function	Specifies the prop to execute a custom navigation operation when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.
onPressMenuOperators	function	Specifies the prop to execute a custom navigation operation when the operators button on the moderation menu component is selected. By default, the operator list screen appears.
onPressMenuMutedMembers	function	Specifies the prop to execute a custom navigation operation when the muted members button on the moderation menu component is selected. By default, the muted member list screen appears.
onPressMenuBannedUsers	function	Specifies the prop to execute a custom navigation operation when the banned users button on the moderation menu component is selected. By default, the banned user list screen appears.
menuItemsCreator	function	Specifies the prop to customize the menu list in the moderation menu component.

Customization

In the group channel function, you can customize the default GroupChannelModerationFragment to change various elements of the screen such as the module and its components. See the code below on how to replace the default header component with a custom header component in GroupChannelModerationFragment as an example.

Note: To learn more about how to customize a fragment, go to the Fragment page.

import { Text } from 'react-native';

const GroupChannelModerationFragment = createGroupChannelModerationFragment({
  Header: () => <Text>{'Custom Header'}</Text>,
  Menu: () => <Text>{'Custom Menu'}</Text>,
});
const GroupChannelModerationScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();
  const { channel } = useGroupChannel(sdk, params.channelUrl);
  if (!channel) return null;

  const navigateToGroupChannelOperatorsScreen = () => {};
  const navigateToGroupChannelMutedMembersScreen = () => {};
  const navigateToGroupChannelBannedUsersScreen = () => {};
  const navigateToBack = () => {};

  return (
    <GroupChannelModerationFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressMenuOperators={navigateToGroupChannelOperatorsScreen}
      onPressMenuMutedMembers={navigateToGroupChannelMutedMembersScreen}
      onPressMenuBannedUsers={navigateToGroupChannelBannedUsersScreen}
      menuItemsCreator={(items) => {
        // Add custom menu
        items.push({
          icon: 'edit',
          name: 'Edit',
          onPress: () => console.log('clicked'),
        });

        return items;
      }}
    />
  );
};

On this page

Usage Context

Fragment

Module components

Header Moderation menu

Customization

Sample app