List muted participants

A muted user list in an open channel is a complete list of participants that are muted from the channel. Only an operator of the channel can mute participants. The muted participant list is created through OpenChannelMutedParticipantsFragment.

To view the image in full screen, click on the

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

const OpenChannelMutedParticipantsFragment = createOpenChannelMutedParticipantsFragment();
const OpenChannelMutedParticipantsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    
    return <OpenChannelMutedParticipantsFragment channel={channel} onPressHeaderLeft={navigateToBack} />;
};

The following table lists the properties of OpenChannelMutedParticipantsFragment.

To store and handle data that are used to build the muted participant list screen, Sendbird Chat UIKit provides OpenChannelMutedParticipantsContexts, which includes the Fragment context object.

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

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

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

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

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

The following table lists the properties of OpenChannelMutedParticipantsModule.Header.

The list component shows a list of profile images and names of muted participants of the channel.

The following table lists the properties of OpenChannelMutedParticipantsModule.List.

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

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

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

In the list muted participants key function, you can customize the default OpenChannelMutedParticipantsFragment 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 OpenChannelMutedParticipantsFragment as an example.

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

const OpenChannelMutedParticipantsFragment = createOpenChannelMutedParticipantsFragment({
    Header: () => <MyHeader />, // Use custom header
});
const OpenChannelMutedParticipantsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    
    return <OpenChannelMutedParticipantsFragment channel={channel} onPressHeaderLeft={navigateToBack} />;
};