UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native
/
Key functions

Configure group channel settings

You can configure the settings of each group channel. Customizable settings include channel name, cover image, and notifications. You can also leave the channel.


Usage

You can start building a group channel settings screen by first creating a fragment. To do so, call the createGroupChannelSettingsFragment method. Once a group 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.

import React, { useState } from 'react';

import { useSendbirdChat, createGroupChannelSettingsFragment } from '@sendbird/uikit-react-native';

const GroupChannelSettingsFragment = createGroupChannelSettingsFragment();
const GroupChannelSettingsScreen = ({ params }) => {
    const { sdk } = useSendbirdChat();
    const [channel] = useState(() => sdk.GroupChannel.buildFromSerializedData(params.serializedChannel));

    const navigateToBack = () => {};
    const navigateToGroupChannelListScreen = () => {};
    const navigateToGroupChannelMembersScreen = () => {};

    return (
        <GroupChannelSettingsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onLeaveChannel={navigateToGroupChannelListScreen}
            onPressMenuMembers={navigateToGroupChannelMembersScreen}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelSettingsFragment.

Properties
RequiredTypeDescription

channel

object

Specifies the group channel that the current user is a member of.

onPressHeaderLeft

function

Specifies the prop to execute custom navigation operations when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.

onPressMenuMembers

function

Specifies the prop to execute custom navigation operations when a user selects Members in the settings menu. By default, the member list screen appears.

onPressMenuLeaveChannel

function

Specifies the prop to execute custom navigation operations when a user selects Leave channel in the settings menu. By default, the channel list screen appears.

OptionalTypeDescription

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 group channel settings screen, Sendbird UIKit provides GroupChannelSettingsContexts, which is comprised of GroupChannelSettingsContexts.Fragment.

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

Fragment

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

const { channel, headerTitle, headerRight, onPressHeaderRight } = useContext(GroupChannelSettingsContexts.Fragment);

Module components

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

Header

The header component displays the title of the group 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 profile image.

List of properties

The following table lists the properties of GroupChannelSettingsModule.Header.

Property nameTypeDescription

onPressHeaderLeft

function

Specifies the prop to execute custom navigation operations 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.

Settings menu

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 GroupChannelSettingsModule.Menu.

Property nameTypeDescription

onPressMenuMembers

function

Specifies the prop to execute custom navigation operations when a user selects Members in the settings menu. By default, the member list screen appears.

onPressMenuLeaveChannel

function

Specifies the prop to execute custom navigation operations when a user selects Leave channel in the settings menu. By default, the channel list screen appears.

menuItemsCreator

function

Specifies the prop to customize the menu list in the settings menu component.


Customization

In the group channel settings function, you can customize the default GroupChannelSettingsFragment 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.

import React, { useState } from 'react';
import { Share } from 'react-native';

import { useSendbirdChat, createGroupChannelSettingsFragment } from '@sendbird/uikit-react-native';
import { Icon } from '@sendbird/uikit-react-native-foundation';

const GroupChannelSettingsFragment = createGroupChannelSettingsFragment();
const GroupChannelSettingsScreen = ({ params }) => {
    const { sdk } = useSendbirdChat();
    const [channel] = useState(() => sdk.GroupChannel.buildFromSerializedData(params.serializedChannel));

    const navigateToBack = () => {};
    const navigateToGroupChannelListScreen = () => {};
    const navigateToGroupChannelMembersScreen = () => {};

    return (
        <GroupChannelSettingsFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onLeaveChannel={navigateToGroupChannelListScreen}
            onPressMenuMembers={navigateToGroupChannelMembersScreen}
            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;
            }}
        />
    );
};