UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native
/
Key functions

List muted members

A muted user list in a group channel is a complete list of members that are muted from the channel. Only an operator of the channel can mute members. The muted member list is created through GroupChannelMutedMembersFragment.


Usage

You can start building a muted member list screen by first creating a fragment. To do so, call the createGroupChannelMutedMembersFragment method. Once a muted member 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 { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelMutedMembersFragment, useSendbirdChat } from '@sendbird/uikit-react-native';
const GroupChannelMutedMembersFragment = createGroupChannelMutedMembersFragment();
const GroupChannelMutedMembersScreen = (params: { channelUrl: string }) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;
    const navigateToBack = () => {};
    return <GroupChannelMutedMembersFragment channel={channel} onPressHeaderLeft={navigateToBack} />;
};
export default GroupChannelMutedMembersScreen;

List of properties

The following table lists the properties of GroupChannelMutedMembersFragment.

Properties
RequiredTypeDescription

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.

OptionalTypeDescription

renderUser

function

Renders a customized view of the user profile.


Context

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

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

Fragment

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

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

Module components

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

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 GroupChannelMutedMembersModule.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.

List

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

List of properties

The following table lists the properties of GroupChannelMutedMembersModule.List.

Property nameTypeDescription

mutedMembers

array of objects

Specifies a list of muted members.

onLoadNext

function

Specifies the prop to execute custom operations when loading more user list items.

renderUser

function

Renders a customized view of the user profile.

ListEmptyComponent

ReactElement

Renders a customized view of the empty user list.

StatusLoading

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

StatusEmpty

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

StatusError

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


Customization

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

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

const GroupChannelMutedMembersFragment = createGroupChannelMutedMembersFragment({
    Header: () => <MyHeader />, // Use custom header
});
const GroupChannelMutedMembersScreen = (params: { channelUrl: string }) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;
    const navigateToBack = () => {};
    return <GroupChannelMutedMembersFragment channel={channel} onPressHeaderLeft={navigateToBack} />;
};