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

Chat in a group channel

A group channel is a chat that allows close interactions between a limited number of users. In order to join this type of channel, an invitation from a channel member is required. Users can either create 1-to-1 group channels or 1-to-N group channels.


Usage

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

const GroupChannelFragment = createGroupChannelFragment();
const GroupChannelScreen = ({ params }) => {
    const { sdk } = useSendbirdChat();
    const [channel] = useState(() => sdk.GroupChannel.buildFromSerializedData(params.serializedChannel));

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

    return (
        <GroupChannelFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToGroupChannelSettingsScreen}
            onChannelDeleted={navigateToGroupChannelListScreen}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelFragment.

Properties
RequiredTypeDescription

channel

object

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

onChannelDeleted

function

Specifies the prop to execute custom operations when the user is banned from a channel or when a channel gets deleted. Once this function is called, the user is redirected to the list channels function.

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.

onPressHeaderRight

function

Specifies the prop to execute custom navigation operations when the button on the top right corner of the header component is selected. By default, the group channel settings screen appears.

OptionalTypeDescription

onBeforeSendFileMessage

function

Specifies the prop to execute custom operations before sending a file message. The customized file message is returned through FileMessageParams before sending it.

onBeforeSendUserMessage

function

Specifies the prop to execute custom operations before sending a user message. The customized user message is returned through UserMessageParams before sending it.

onPressImageMessage

function

Specifies the prop to execute custom operations when the user taps on a file message that is an image.

renderMessage

ReactElement

Renders a customized view of the message in a channel.

renderNewMessagesButton

ReactElement

Renders a customized view of a button that lets users know there are new messages in the channel and directs them to the latest message.

renderScrollToBottomButton

ReactElement

Renders a customized view of a button that allows users to scroll to the most recent message sent in the channel.

enableTypingIndicator

boolean

Determines whether to turn on the typing indicator feature in the channel. (Default: true)

enableMessageGrouping

boolean

Determines whether to turn on message grouping in a channel. (Default: true)

keyboardAvoidOffset

number

Specifies the prop to render KeyboardAvoidingView. It's used when the message input module component needs to be placed directly above the keyboard. The value of this prop sets the adjusted y position of the keyboard.

flatListProps

object

Specifies a FlatList prop that renders a list view in the message list component of GroupChannelModule.

collectionCreator

function

Specifies the prop to create a custom MessageCollection.

sortComparator

function

Specifies the function to sort a list of messages in the group channel screen. You can customize the sorting order by passing a parameter in the method.


Context

To store and handle data that are used to build the group channel screen, Sendbird UIKit provides GroupChannelContexts, which is comprised of two context objects: GroupChannelContexts.Fragment and GroupChannelContexts.TypeSelector.

type GroupChannelContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        channel: Sendbird.GroupChannel;
        editMessage?: Sendbird.UserMessage | Sendbird.FileMessage;
        setEditMessage: (msg?: Sendbird.UserMessage | Sendbird.FileMessage) => void;
        keyboardAvoidOffset?: number;
    }>;

    TypingIndicator: React.Context<{
        typingUsers: Sendbird.User[];
    }>;
};

Fragment

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

const { headerTitle, channel, editMessage, setEditMessage, keyboardAvoidOffset } = useContext(
    GroupChannelContexts.Fragment,
);

TypeSelector

You can call the useContext hook and pass GroupChannelListContexts.TypeSelector as a parameter to retrieve data from the Chat SDK on whether the typing indicator feature is turned on for the channel.

const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);

Module components

A group channel screen is composed of five module components: header, message list, message input, loading status, and empty status. These components make up the GroupChannelModule and are used to create and display the group channel UI.

Header

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

List of properties

The following table lists the props of GroupChannelModule.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.

onPressHeaderRight

function

Specifies the prop to execute custom navigation operations when the button on the top right corner of the header component is selected. By default, the group channel settings screen appears.

MessageList

The message list component shows a list of all messages exchanged in the group channel in a chronological order. The list shows both text and file messages, and messages sent by the current user are differentiated from those sent by other channel members.

List of properties

The following table lists the properties of GroupChannelModule.MessageList.

Property nameTypeDescription

enableMessageGrouping

boolean

Determines whether to turn on message grouping in a channel. (Default: true)

currentUserID

string

Specifies the user ID of the current user.

channel

object

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

messages

array of objects

Specifies the messages shown in the message list component of GroupChannelModule.

nextMessages

array of objects

Specifies a group of most recently sent messages in a channel when the scroll is not placed at the bottom of the message list component.

newMessagesFromMembers

array of objects

Specifies all the messages in the nextMessages list except for messages sent by the channel admin and the current user or any updated messages after they were sent.

onTopReached

function

Specifies the prop to execute custom operations when the current user has reached the very top of the message list in the channel.

onBottomReached

function

Specifies the prop to execute custom operations when the current user has reached the very bottom of the message list in the channel.

onResendFailedMessage

function

Specifies the prop to execute custom operations when the current user tries to resend a message that failed to send.

onDeleteMessage

function

Specifies the prop to execute custom operations when the current user deletes a message in the channel.

onPressImageMessage

function

Specifies the prop to execute custom operations when the user selects a file message that is an image.

renderMessage

ReactElement

Renders a customized view of the message in a channel.

renderNewMessagesButton

ReactElement

Renders a customized view of a button that lets users know there are new messages in the channel and directs them to the latest message.

renderScrollToBottomButton

ReactElement

Renders a customized view of a button that allows users to scroll to the most recent message sent in the channel.

flatListProps

object

Specifies a FlatList prop that renders a list view in the message list component of GroupChannelModule.

Message input

The message input component is where the user can either enter a text message or send a file message by importing a file, image or video.

List of properties

The following table lists the properties of GroupChannelModule.Input.

|Property name|Type|Description| |channel|object|Specifies the channel that the current user is a member of.| |onSendFileMessage|function|Specifies the prop to execute custom operations when the current user sends a file message to the channel.| |onSendUserMessage|function|Specifies the prop to execute custom operations when the current user sends a user message to the channel.| |onUpdateFileMessage|function|Specifies the prop to execute custom operations when the current user updates a file message already sent to the channel.| |onUpdateUserMessage|function|Specifies the prop to execute custom operations when the current user updates a user message already sent to the channel.|

StatusLoading

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

StatusEmpty

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


Customization

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

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

import React, { useContext, useLayoutEffect } from 'react';
import { Pressable } from 'react-native';

import { useNavigation } from '@react-navigation/native';
import { useHeaderHeight } from '@react-navigation/elements';

import { createGroupChannelFragment, GroupChannelContexts, GroupChannelModule } from '@sendbird/uikit-react-native';
import { Icon } from '@sendbird/uikit-react-native-foundation';

const UseReactNavigationHeader: GroupChannelModule['Header'] = ({ onPressHeaderRight, onPressHeaderLeft }) => {
    const navigation = useNavigation();
    const { headerTitle } = useContext(GroupChannelContexts.Fragment);

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: true,
            title: headerTitle,
            headerLeft: () => (
                <Pressable onPress={onPressHeaderLeft}>
                    <Icon icon={'arrow-left'} />
                </Pressable>
            ),
            headerRight: () => (
                <Pressable onPress={onPressHeaderRight}>
                    <Icon icon={'info'} />
                </Pressable>
            ),
        });
    }, []);

    return null;
};

const GroupChannelFragment = createGroupChannelFragment({
    Header: UseReactNavigationHeader,
});
const GroupChannelScreen = ({ params }) => {
    const { sdk } = useSendbirdChat();
    const [channel] = useState(() => sdk.GroupChannel.buildFromSerializedData(params.serializedChannel));

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

    const height = useHeaderHeight();

    return (
        <GroupChannelFragment
            keyboardAvoidOffset={height}
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToGroupChannelSettingsScreen}
            onChannelDeleted={navigateToGroupChannelListScreen}
        />
    );
};