Register participants as operators

Operators can register other channel participants as operators through the OpenChannelRegisterOperatorFragment. All channel participants are listed through pagination and participants who are already an operator can't be registered.

To view the image in full screen, click on the

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

const OpenChannelRegisterOperatorFragment = createOpenChannelRegisterOperatorFragment();
const OpenChannelRegisterOperatorScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();
  const { channel } = useOpenChannel(sdk, params.channelUrl);
  if (!channel) return null;
  
  const navigateToBack = () => {};
  const navigateToOpenChannelOperatorsScreen = () => {};
  
  return (
    <OpenChannelRegisterOperatorFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressHeaderRight={navigateToOpenChannelOperatorsScreen}
    />
  );
};

The following table lists the properties of OpenChannelRegisterOperatorFragment.

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

type UserListContextsType<User> = {
    Fragment: React.Context<{
        headerTitle: string;
        headerRight: string;
    }>;
    List: React.Context<{
        selectedUsers: User[];
        setSelectedUsers: React.Dispatch<React.SetStateAction<User[]>>;
    }>;
};

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

A register participants as operators screen is composed of five module components: header, list, loading status, empty status, and error status. These components make up the UserListModule and are used to create and display the UI of the screen.

The header component displays the title of OpenChannelRegisterOperatorFragment, 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 selected users are registered as operator to the channel. The onPressHeaderRight function is called and the operator list screen appears.

The following table lists the properties of UserListModule.Header.

The list component shows a list of users' profile images, names, and selectable checkboxes. By default, all participants of the channel are listed.

The following table lists the properties of UserListModule.List.

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

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

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

In the register as operator key function, you can customize the default OpenChannelRegisterOperatorFragment 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 OpenChannelRegisterOperatorFragment as an example.

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

import { Text } from 'react-native';

const OpenChannelRegisterOperatorFragment = createOpenChannelRegisterOperatorFragment({
  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 OpenChannelRegisterOperatorScreen2 = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();
  const { channel } = useOpenChannel(sdk, params.channelUrl);
  if (!channel) return null;

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

  return (
    <OpenChannelRegisterOperatorFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressHeaderRight={navigateToOpenChannelOperatorsScreen}
    />
  );
};