List open channels

A channel list shows a complete list of open channels available for the current user. Once a connection with the Sendbird server is established, you can display and manage the channel list without complex implementation. All chat services built with Sendbird UIKit begin from the channel list.

To view the image in full screen, click on the

You can start building a channel list screen by first creating a fragment. To do so, call the createOpenChannelListFragment method and display the current user's channel list. Once a channel 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 { createOpenChannelListFragment } from '@sendbird/uikit-react-native';

const OpenChannelListFragment = createOpenChannelListFragment();
const OpenChannelListScreen = () => {
    const navigateToOpenChannelCreateScreen = () => {};
    const navigateToOpenChannelScreen = () => {};

    return (
        <OpenChannelListFragment
            onPressCreateChannel={navigateToOpenChannelCreateScreen}
            onPressChannel={navigateToOpenChannelScreen}
        />
    );
};

The following table lists the properties of OpenChannelListFragment.

To store and handle data that are used to build a working channel list, Sendbird UIKit provides OpenChannelListContexts, which is comprised of a single object: OpenChannelListContexts.Fragment.

type OpenChannelListContextsType = {
  Fragment: React.Context<{
    headerTitle: string;
  }>;
};

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

import { useContext } from 'react';

const Component = () => {
    const { headerTitle } = useContext(OpenChannelListContexts.Fragment);
};

A channel list screen is composed of four module components: header, list, type selector, loading status, and empty status. These components make up the OpenChannelListModule and are used to create and display the channel list UI.

The header component displays the title of the channel list screen and a button on the top right corner which, by default, allows you to choose the type of channel you wish to create. Once the channel type is selected, the onPressCreateChannel navigation prop is called and you'll be able to create a new channel in the create open channel screen.

The list component displays a list of all channels that the current user is part of. When the current user selects one of the channels in the list, they'll be able to enter the channel and start chatting in an open channel.

The following table lists the properties of OpenChannelListModule.List.

The StatusLoading component exists in the OpenChannelListModule and lets the user know if the list is loading.

The StatusEmpty component exists in the OpenChannelListModule and lets the user know if the list is empty.

In the list channel function, you can customize the default OpenChannelListFragment 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 OpenChannelListFragment as an example.

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

import { Text } from 'react-native';
import { OpenChannelListModule } from '@sendbird/uikit-react-native';

const CustomHeader: OpenChannelListModule['Header'] = () => {
  return <Text>{'Custom Header'}</Text>;
};
const CustomList: OpenChannelListModule['List'] = () => {
  return <Text>{'Custom List'}</Text>;
};
const CustomEmpty: OpenChannelListModule['StatusEmpty'] = () => {
  return <Text>{'Custom Empty'}</Text>;
};
const CustomLoading: OpenChannelListModule['StatusLoading'] = () => {
  return <Text>{'Custom Loading'}</Text>;
};

const OpenChannelListFragment = createOpenChannelListFragment({
  Header: CustomHeader,
  List:CustomList, 
  StatusEmpty: CustomEmpty,
  StatusLoading: CustomLoading,
});

const CustomOpenChannelListScreen = () => {
    const navigateToOpenChannelCreateScreen = () => {};
    const navigateToOpenChannelScreen = () => {};

    return (
        <OpenChannelListFragment
            onPressCreateChannel={navigateToOpenChannelCreateScreen}
            onPressChannel={navigateToOpenChannelScreen}
            // Render custom channel preview
            renderOpenChannelPreview={(props) => {
              return <CustomChannelPreview {...props} />;
            }}
            // Apply query parameters for channel list
            queryCreator={{
              includeFrozen: false,
            }}
        />
    );
};