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

List channel participants

Copy link

A participant list is a complete list of users that are participants of an open channel. The channel participant list is created through OpenChannelParticipantsFragment.


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

const OpenChannelParticipantsFragment = createOpenChannelParticipantsFragment();
const OpenChannelParticipantsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToBack = () => {};

    return (
        <OpenChannelParticipantsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
        />
    );
};

List of properties

Copy link

The following table lists the properties of OpenChannelParticipantsFragment.

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.

OptionalTypeDescription

renderUser

ReactElement

Renders a customized view of the user profile.

sortComparator

function

Specifies the function to sort a list of users in the participant list screen. You can customize the sorting order by passing parameters to compare in the sortComparator method.


Context

Copy link

OpenChannelParticipantsFragment uses UserListModule to display a list of participants of a channel. To store and handle data that are used to build the participant list screen, Sendbird Chat 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

Copy link

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);
};

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

Copy link

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

Header

Copy link

The header component displays the title of OpenChannelParticipantsFragment, 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.

List of properties

Copy link

The following table lists the properties of UserListModule.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.

onPressHeaderRight

function

Specifies the prop to receive callback when the button on the top right corner of the header component is selected.

right

ReactElement

Renders a customized view of the right button component in the header.

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

List of properties

Copy link

The following table lists the properties of UserListModule.List.

Property nameTypeDescription

users

array of objects

Specifies a list of all users that appear on the participant list.

ListEmptyComponent

ReactElement

Renders a customized view of the empty participant list.

renderUser

function

Renders a customized view of the user profile.

StatusLoading

Copy link

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

StatusEmpty

Copy link

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

StatusError

Copy link

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


Customization

Copy link

In the participant list key function, you can customize the default OpenChannelParticipantsFragment to change various elements of the screen such as the module and its components. See the code below on how to render the participant 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, createOpenChannelParticipantsFragment, UserActionBar } from '@sendbird/uikit-react-native';
import { useBottomSheet } from '@sendbird/uikit-react-native-foundation';
import { useOpenChannel } from "@sendbird/uikit-chat-hooks";

const OpenChannelParticipantsFragment = createOpenChannelParticipantsFragment({
  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 OpenChannelParticipantsScreen = ({ route: { params } }: any) => {
    const { openSheet } = useBottomSheet();

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

    const navigateToBack = () => {};

    return (
        <OpenChannelParticipantsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            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) },
                                ],
                            });
                        }}
                    />
                );
            }}
        />
    );
};