List channel members

A member list is a complete list of users that are members of a group channel. The channel member list is created through GroupChannelMembersFragment.

Usage

You can start building a member list screen by first creating a fragment. To do so, call the GroupChannelMembersFragment method. Once a 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, { useState } from 'react';
import { useSendbirdChat, createGroupChannelMembersFragment } from '@sendbird/uikit-react-native';
import { useGroupChannel } from "@sendbird/uikit-chat-hooks";

const GroupChannelMembersFragment = createGroupChannelMembersFragment();
const GroupChannelMembersScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToBack = () => {};
    const navigateToGroupChannelInvite = () => {};

    return (
        <GroupChannelMembersFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToGroupChannelInvite}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelMembersFragment.

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.
onPressHeaderRight	function	Specifies the prop to receive callback when the button on the top right corner of the header component is selected. By default, the screen changes to the invite user screen where you can add new users to the channel.

Optional	Type	Description
renderUser	ReactElement	Renders a customized view of the user profile.
sortComparator	function	Specifies the function to sort a list of users in the member list screen. You can customize the sorting order by passing a parameter in the method.

Context

GroupChannelMembersFragment uses UserListModule to display a list of members of a channel. To store and handle data that are used to build the member list screen, Sendbird UIKit provides UserListContexts, which is comprised of two context objects: UserListContexts.Fragment and UserListContexts.List.

type UserListContextsType<User> = {
    Fragment: React.Context<{
        headerTitle: string;
        headerRight: string;
    }>;

    List: React.Context<{
        selectedUsers: User[];
        setSelectedUsers: React.Dispatch<React.SetStateAction<User[]>>;
    }>;
};

Fragment

To retrieve user list data from the Chat SDK, you need to call the useContext hook and pass UserListContexts.Fragment as a parameter. The data is then used to render the user list module.

import { useContext } from 'react';
import { UserListContexts } from "@sendbird/uikit-react-native";

const Component = () => {
    const { headerTitle, headerRight } = useContext(UserListContexts.Fragment);
};

List

You can call the useContext hook and pass UserListContexts.List as a parameter to retrieve user list data from the Chat SDK. The data is then used to render the list component of UserListModule.

import { useContext } from 'react';
import { UserListContexts } from "@sendbird/uikit-react-native";

const Component = () => {
    const { selectedUsers, setSelectedUsers } = useContext(UserListContexts.List);
};

Module components

A member list screen is composed of three module components: header, member list, and empty status. These components make up the UserListModule and are used to create and display the UI of the screen.

Header

The header component displays the title of GroupChannelMembersFragment, a button on the top left corner, and a 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 add button on the right is selected, the onPressHeaderRight navigation prop is called and the invite user screen appears where you can add new users to the channel.

List of properties

The following table lists the properties of UserListModule.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.
onPressHeaderRight	function	Specifies the prop to receive callback when the button on the top right corner of the header component is selected. By default, the screen changes to the invite user screen where you can add new users to the channel.
right	ReactElement	Renders a customized view of the right button component in the header.

List

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

List of properties

The following table lists the properties of UserListModule.List.

Property name	Type	Description
users	array of objects	Specifies a list of all users that appear on the member list.
ListEmptyComponent	ReactElement	Renders a customized view of the empty member list.
renderUser	function	Renders a customized view of the user profile.

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 member list key function, you can customize the default GroupChannelMembersFragment to change various elements of the screen such as the module and its components. See the code below on how to render the member list using a custom module component.

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

import { Text } from 'react-native';
import React, { useState } from 'react';
import { useSendbirdChat, createGroupChannelMembersFragment, UserActionBar } from '@sendbird/uikit-react-native';
import { useBottomSheet } from '@sendbird/uikit-react-native-foundation';
import { useGroupChannel } from '@sendbird/uikit-chat-hooks';

const GroupChannelMembersFragment = createGroupChannelMembersFragment({
  Header: () => <Text>{'Custom Header'}</Text>,
  List: () => <Text>{'Custom List'}</Text>,
  StatusLoading: () => <Text>{'Custom Loading'}</Text>,
  StatusEmpty: () => <Text>{'Custom Empty'}</Text>,
  StatusError: () => <Text>{'Custom Error'}</Text>,
});
const GroupChannelMembersScreen = ({ route: { params } }: any) => {
  const { openSheet } = useBottomSheet();

  const { sdk } = useSendbirdChat();
  const { channel } = useGroupChannel(sdk, params.channelUrl);
  if (!channel) return null;

  const navigateToBack = () => {};
  const navigateToGroupChannelInvite = () => {};

  return (
    <GroupChannelMembersFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressHeaderRight={navigateToGroupChannelInvite}
      renderUser={(user) => {
        return (
          <UserActionBar
            disabled={false}
            name={user.nickname}
            uri={user.profileUrl}
            muted={user.isMuted}
            onPressActionMenu={() => {
              openSheet({
                sheetItems: [
                  {
                    title: 'Ban',
                    titleColor: 'red',
                    onPress: () => channel.banUser(user, 30, 'ban'),
                  },
                  { title: 'Mute', onPress: () => channel.muteUser(user) },
                ],
              });
            }}
          />
        );
      }}
    />
  );
};

On this page

Usage Context

Fragment List

Module components

Header List StatusLoading StatusEmpty StatusError

Customization

Sample app