Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Moderate open channels and participants

Copy link

In open channels, you can moderate channels and participants. Using the moderation menu, you can retrieve a list of operators, muted participants, 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.


You can start building an open channel moderation screen by first creating a fragment. To do so, call the createOpenChannelModerationFragment method. Once an open 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 { useOpenChannel } from '@sendbird/uikit-chat-hooks';
import { createOpenChannelModerationFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

const OpenChannelModerationFragment = createOpenChannelModerationFragment();
const OpenChannelModerationScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToOpenChannelOperatorsScreen = () => {};
    const navigateToOpenChannelMutedparticipantsScreen = () => {};
    const navigateToOpenChannelBannedUsersScreen = () => {};
    const navigateToBack = () => {};
    
    return (
        <OpenChannelModerationFragment
            channel={channel}
            onPressMenuOperators={navigateToOpenChannelOperatorsScreen}
            onPressMenuMutedParticipants={navigateToOpenChannelMutedParticipantsScreen}
            onPressMenuBannedUsers={navigateToOpenChannelBannedUsersScreen}
            onPressHeaderLeft={navigateToBack}
        />
    );
};

List of properties

Copy link

The following table lists the properties of OpenChannelModerationFragment.

Properties
RequiredTypeDescription

channel

object

Specifies the open channel that the current user is a participant 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.

onPressMenuMutedParticipants

function

Specifies the prop to execute a custom navigation operation when the muted participants button on the moderation menu component is selected. By default, the muted participant 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.

OptionalTypeDescription

menuItemsCreator

function

Specifies the prop to customize the menu list in the moderation menu component.


Context

Copy link

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

type OpenChannelModerationContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        channel: SendbirdOpenChannel;
    }>;
};

Fragment

Copy link

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

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

Module components

Copy link

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

Header

Copy link

The header component displays the title of the open 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 open channel settings screen appears.

List of properties

Copy link

The following table lists the properties of OpenChannelModerationModule.Header.

Property nameTypeDescription

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.

Moderation menu

Copy link

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

List of properties

Copy link

The following table lists the properties of OpenChannelModerationModule.Menu.

Property nameTypeDescription

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.

onPressMenuMutedParticipants

function

Specifies the prop to execute a custom navigation operation when the muted participants button on the moderation menu component is selected. By default, the muted participant 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

Copy link

In the open channel function, you can customize the default OpenChannelModerationFragment 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 OpenChannelModerationFragment as an example.

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

import { Text } from 'react-native';
const OpenChannelModerationFragment = createOpenChannelModerationFragment({
  Header: () => <Text>{'Custom Header'}</Text>,
  Menu: () => <Text>{'Custom Menu'}</Text>,
});
const OpenChannelModerationScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();
  const { channel } = useOpenChannel(sdk, params.channelUrl);
  if (!channel) return null;

  const navigateToOpenChannelOperatorsScreen = () => {};
  const navigateToOpenChannelMutedParticipantsScreen = () => {};
  const navigateToOpenChannelBannedUsersScreen = () => {};
  const navigateToBack = () => {};

  return (
    <OpenChannelModerationFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressMenuOperators={navigateToOpenChannelOperatorsScreen}
      onPressMenuMutedParticipants={navigateToOpenChannelMutedParticipantsScreen}
      onPressMenuBannedUsers={navigateToOpenChannelBannedUsersScreen}
      menuItemsCreator={(items) => {
        // Add custom menu
        items.push({
          icon: 'edit',
          name: 'Edit',
          onPress: () => console.log('clicked'),
        });

        return items;
      }}
    />
  );
};