Configure open channel settings

You can configure the settings of each open channel. Customizable settings include channel name, cover image, and notifications. You can also leave the channel. For channel operators, you can view the moderation menu.

Usage

You can start building an open channel settings screen by first creating a fragment. To do so, call the createOpenChannelSettingsFragment method. Once an open channel settings fragment is built, you need to set up the navigation props and register the screen to a navigation library. Refer to the code below.

TypeScript

import React, { useState } from 'react';
import { useSendbirdChat, createOpenChannelSettingsFragment } from '@sendbird/uikit-react-native';
import { useOpenChannel } from "@sendbird/uikit-chat-hooks";

const OpenChannelSettingsFragment = createOpenChannelSettingsFragment();
const OpenChannelSettingsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToBack = () => {};
    const navigateToOpenChannelListScreen = () => {};
    const navigateToOpenChannelMembersScreen = () => {};
    const navigateToOpenChannelModerationScreen = () => {};
    const navigateToOpenChannel = () => {};

    return (
        <OpenChannelSettingsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressMenuModeration={navigateToOpenChannelModerationScreen}
            onPressMenuParticipants={navigateToOpenChannelMembersScreen}
            onPressMenuDeleteChannel={navigateToOpenChannelListScreen}
            onNavigateToOpenChannel={navigateToOpenChannel}
        />
    );
};

List of properties

The following table lists the properties of OpenChannelSettingsFragment.

Properties

Required	Type	Description
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.
onPressMenuModeration	function	Specifies the prop to execute a custom navigation operation when a user selects Moderation in the settings menu. By default, the moderation screen appears.
onPressMenuParticipants	function	Specifies the prop to execute a custom navigation operation when a user selects Participants in the settings menu. By default, the member list screen appears.
onPressMenuDeleteChannel	function	Specifies the prop to execute a custom navigation operation when a user selects Delete channel in the settings menu. By default, the channel list screen appears.
onNavigateToOpenChannel	function	Specifies the prop to execute a custom navigation operation when a current user is unregistered from the operator list in the settings menu. By default, the screen navigate back to the open channel screen.

Optional	Type	Description
menuItemsCreator	function	Specifies the prop to customize the menu list in the settings menu component.

Context

To store and handle data that are used to build the open channel settings screen, Sendbird Chat UIKit provides OpenChannelSettingsContexts, which is comprised of OpenChannelSettingsContexts.Fragment.

TypeScript

type OpenChannelSettingsContextsType<User> = {
    Fragment: React.Context<{
        channel: Sendbird.OpenChannel;
        headerTitle: string;
        headerRight: string;
        onPressHeaderRight: () => void;
    }>;
};

Fragment

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

TypeScript

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

const Component = () => {
  const { channel, headerTitle, headerRight, onPressHeaderRight } = useContext(OpenChannelSettingsContexts.Fragment);
}

Module components

An open channel settings screen is composed of three module components: header, channel information, and settings menu. These components make up the OpenChannelSettingsModule and are used to create and display the open channel settings UI.

Header

The header component displays the title of the open channel settings screen, a button on the top left corner, and another button on the top right corner. 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, you can edit the channel name and cover image.

List of properties

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

Channel information

The channel information component shows the channel's cover image and name by default.

The settings menu shows different configuration options of the channel that you can set. The menu includes notifications, members, and leave channel.

List of properties

The following table lists the properties of OpenChannelSettingsModule.Menu.

Property name	Type	Description
onPressMenuModeration	function	Specifies the prop to execute a custom navigation operation when a user selects Moderation in the settings menu. By default, the moderation screen appears.
onPressMenuParticipants	function	Specifies the prop to execute a custom navigation operation when a user selects Participants in the settings menu. By default, the member list screen appears.
onPressMenuDeleteChannel	function	Specifies the prop to execute a custom navigation operation when a user selects Delete channel in the settings menu. By default, the channel list screen appears.
onNavigateToOpenChannel	function	Specifies the prop to execute a custom navigation operation when a current user is unregistered from the operator list in the settings menu. By default, the screen navigate back to the open channel screen.
menuItemsCreator	function	Specifies the prop to customize the menu list in the settings menu component.

Customization

In the open channel settings function, you can customize the default OpenChannelSettingsFragment to change the settings menu items. See the code below on how to add a custom item to the settings menu.

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

TypeScript

import { Text, Share } from 'react-native';

import { useSendbirdChat, createOpenChannelSettingsFragment } from '@sendbird/uikit-react-native';
import { Icon } from '@sendbird/uikit-react-native-foundation';
import { useOpenChannel } from "@sendbird/uikit-chat-hooks";

const OpenChannelSettingsFragment = createOpenChannelSettingsFragment({
  Header: () => <Text>{'Custom Header'}</Text>,
  Menu: () => <Text>{'Custom Menu'}</Text>,  
  Info: () => <Text>{'Custom Info'}</Text>,
});
const OpenChannelSettingsScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useOpenChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToBack = () => {};
    const navigateToOpenChannelListScreen = () => {};
    const navigateToOpenChannelMembersScreen = () => {};
    const navigateToOpenChannelModerationScreen = () => {};
    const navigateToOpenChannel = () => {};

    return (
        <OpenChannelSettingsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressMenuModeration={navigateToOpenChannelModerationScreen}
            onPressMenuParticipants={navigateToOpenChannelMembersScreen}
            onPressMenuDeleteChannel={navigateToOpenChannelListScreen}
            onNavigateToOpenChannel={navigateToOpenChannel}
            menuItemsCreator={(items) => {
                items.unshift({
                    icon: 'channels',
                    name: 'Share channel',
                    actionItem: <Icon icon={'chevron-right'} color={'black'} />,
                    onPress: () => Share.share({ title: 'Channel url', url: channel.url }),
                });
                return items;
            }}
        />
    );
};

On this page

Usage Context

Fragment

Module components

Header Channel information Settings menu

Customization

Sample app