List banned users in group channel

A banned user list in a group channel is a complete list of users that are banned from the channel. Only an operator of the channel can ban users. The banned user list is created through GroupChannelBannedUsersFragment.

To view the image in full screen, click on the

You can start building a banned user list screen by first creating a fragment. To do so, call the createGroupChannelBannedUsersFragment method. Once a group channel banned users 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 { createGroupChannelBannedUsersFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

const GroupChannelBannedUsersFragment = createGroupChannelBannedUsersFragment();
const GroupChannelBannedUsersScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    
    return <GroupChannelBannedUsersFragment channel={channel} onPressHeaderLeft={navigateToBack} />;
};

The following table lists the properties of GroupChannelBannedUsersFragment.

To store and handle data that are used to build the banned user list screen, Sendbird UIKit provides GroupChannelBannedUsersContexts, which includes the Fragment context object.

type GroupChannelBannedUsersContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        channel: Sendbird.GroupChannel;
    }>;
};

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

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

A banned user list screen is composed of five module components: header, list, loading status, error status, and empty status. These components make up the GroupChannelBannedUsersModule and are used to create and display the UI of the screen.

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.

The following table lists the properties of GroupChannelBannedUsersModule.Header.

The list component shows a list of profile images and names of banned users of the channel.

The following table lists the properties of GroupChannelBannedUsersModule.List.

The StatusLoading component lets the user know if the list is loading.

The StatusEmpty component lets the user know if the list is empty.

The StatusError component lets the user know if the list fetching has failed.

In the list banned users in group channel key function, you can customize the default GroupChannelBannedUsersFragment 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 GroupChannelBannedUsersFragment as an example.

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

const GroupChannelBannedUsersFragment = createGroupChannelBannedUsersFragment({
    Header: () => <MyHeader />, // Use custom header
});
const GroupChannelBannedUsersScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    
    return <GroupChannelBannedUsersFragment channel={channel} onPressHeaderLeft={navigateToBack} />;
};