List operators in open channel

An operator list is a complete list of operators of an open channel. The operator list is created through OpenChannelOperatorsFragment.

To view the image in full screen, click on the

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

const OpenChannelOperatorsFragment = createOpenChannelOperatorsFragment();
const OpenChannelOperatorsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    const navigateToOpenChannelRegisterOperator = () => {};
    
    return (
        <OpenChannelOperatorsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToOpenChannelRegisterOperator}
        />
    );
};

The following table lists the properties of OpenChannelOperatorsFragment.

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

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

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

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

An operator list screen is composed of five module components: header, list, loading status, loading error, and empty status. These components make up the OpenChannelOperatorsModule and are used to create and display the UI of the screen.

The header component displays the title of the open 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 open channel settings screen appears.

The following table lists the properties of OpenChannelOperatorsModule.Header.

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

The following table lists the properties of OpenChannelOperatorsModule.List.

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

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

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

In the list operators in open channel key function, you can customize the default OpenChannelOperatorsFragment 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 OpenChannelOperatorsFragment as an example.

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

import { Text } from 'react-native';
const OpenChannelOperatorsFragment = createOpenChannelOperatorsFragment({
  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 OpenChannelOperatorsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    const navigateToOpenChannelRegisterOperator = () => {};
    
    return (
        <OpenChannelOperatorsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToOpenChannelRegisterOperator}
        />
    );
};