Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Chat in a open channel

Copy link

An open channel is a public chat that allows a massive number of users to interact with one another in a more dynamic environment. Open channels can accommodate up to 1,000 simultaneous users and don’t require an invitation for users to enter.


You can start building an open channel screen by first creating a fragment. To do so, call the createOpenChannelFragment method. Once an open 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, createOpenChannelFragment } from '@sendbird/uikit-react-native';
import { useOpenChannel } from "@sendbird/uikit-chat-hooks";

const OpenChannelFragment = createOpenChannelFragment();

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

    const navigateToBack = () => {};
    const navigateToOpenChannelList = () => {};
    const navigateToOpenChannelParticipants = () => {};
    const navigateToOpenChannelSettings = () => {};

    return (
        <OpenChannelFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRightWithSettings={navigateToOpenChannelSettings}
            onPressHeaderRightWithParticipants={navigateToOpenChannelParticipants}
            onChannelDeleted={navigateToOpenChannelList}
        />
    );
};

List of properties

Copy link

The following table lists the properties of OpenChannelFragment.

Properties
RequiredTypeDescription

channel

object

Specifies the open channel that the current user is a participant of.

onChannelDeleted

function

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

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.

onPressHeaderRightWithSettings

function

Specifies the prop to execute a custom navigation operation when an operator selects the button on the top right corner of the header component. By default, the open channel settings screen appears.

onPressHeaderRightWithParticipants

function

Specifies the prop to execute a custom navigation operation when a participant selects the button on the top right corner of the header component. By default, the open channel participants screen appears.

OptionalTypeDescription

onBeforeSendFileMessage

function

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

onBeforeSendUserMessage

function

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

onBeforeUpdateFileMessage

function

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

onBeforeUpdateUserMessage

function

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

onPressMediaMessage

function

Specifies the prop to execute custom operations when the user taps on a file message that contains a media file.

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.

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 OpenChannelModule.

queryCreator

function

Specifies the prop to create a custom PreviousMessageListQuery.

sortComparator

function

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


Context

Copy link

To store and handle data that are used to build the open channel screen, Sendbird Chat UIKit provides OpenChannelContexts, which is comprised of two context objects: OpenChannelContexts.Fragment and OpenChannelContexts.TypingIndicator.

type OpenChannelContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        channel: Sendbird.OpenChannel;
        messageToEdit?: Sendbird.UserMessage | Sendbird.FileMessage;
        setMessageToEdit: (msg?: Sendbird.UserMessage | Sendbird.FileMessage) => void;
        keyboardAvoidOffset?: number;
    }>;
};

Fragment

Copy link

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

const Component = () => {
    const {
        headerTitle,
        channel,
        messageToEdit,
        setMessageToEdit,
        keyboardAvoidOffset
    } = useContext(OpenChannelContexts.Fragment);
};

Module components

Copy link

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

Header

Copy link

The header component displays the title of the open 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 current user is an operator and selects the right button, onPressHeaderRightWithSettings is called and the open channel settings screen appears. If the current user is not an operator and selects the right button, onPressHeaderRightWithParticipants is called and the open channel participants screen appears.

List of properties

Copy link

The following table lists the props of OpenChannelModule.Header.

Property nameTypeDescription

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.

onPressHeaderRight

function

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

rightIconName

string

Specifies the prop that name of the icon to be displayed on the header on the right side, which varies depending on whether the current user is an operator or not.

MessageList

Copy link

The message list component shows a list of all messages exchanged in the open 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

Copy link

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

newMessages

array of objects

Specifies a group of most recently sent messages except for messages sent by the channel admin, the current user, or any updated messages in a channel.

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.

onPressMediaMessage

function

Specifies the prop to execute custom operations when the user selects a file message that contains a media file.

renderMessage

function

Renders a customized view of the message in a channel.

renderNewMessagesButton

function

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

function

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 OpenChannelModule.

scrolledAwayFromBottom

boolean

Determines whether to have the scroll move away from the bottom of the message list. This can help you create or remove buttons such as scroll to bottom.

onScrolledAwayFromBottom

function

Specifies the prop to execute custom operations when the scroll moves away from the bottom of the message list.

hasNext

function

Specifies the prop function to determine whether the message collection can retrieve the next messages. Depending on this function, you can determine whether or not to display the most recent messages before scrolling to the bottom of the message list.

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

Copy link

The following table lists the properties of OpenChannelModule.Input.

Property nameTypeDescription

shouldRenderInput

boolean

Determines whether to render the message input component.

onPressSendUserMessage

function

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

onPressSendFileMessage

function

Specifies the prop to execute custom operations when the current user sends a file message to the channel.

onPressUpdateUserMessage

function

Specifies the prop to execute custom operations when the current user updates a user message already sent to the channel.

onPressUpdateFileMessage

function

Specifies the prop to execute custom operations when the current user updates a file message already sent to the channel.

StatusLoading

Copy link

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

StatusEmpty

Copy link

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


Customization

Copy link

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

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

import { Text } from 'react-native';
import { OpenChannelModule, OpenChannelMessageRenderer } from '@sendbird/uikit-react-native';

const CustomHeader: OpenChannelModule['Header'] = () => {
  return <Text>{'Custom Header'}</Text>;
};
const CustomInput: OpenChannelModule['Input'] = () => {
  return <Text>{'Custom Input'}</Text>;
};
const CustomMessageList: OpenChannelModule['MessageList'] = () => {
  return <Text>{'Custom MessageList'}</Text>;
};
const CustomEmpty: OpenChannelModule['StatusEmpty'] = () => {
  return <Text>{'Custom Empty'}</Text>;
};
const CustomLoading: OpenChannelModule['StatusLoading'] = () => {
  return <Text>{'Custom Loading'}</Text>;
};

const OpenChannelFragment = createOpenChannelFragment({
  Header: CustomHeader,
  Input: CustomInput,
  MessageList: CustomMessageList,
  StatusEmpty: CustomEmpty,
  StatusLoading: CustomLoading,
});
const OpenChannelScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();
  const { channel } = useOpenChannel(sdk, params.channelUrl);
  if (!channel) return null;

  const navigateToBack = () => {};
  const navigateToOpenChannelList = () => {};
  const navigateToOpenChannelParticipants = () => {};
  const navigateToOpenChannelSettings = () => {};

  return (
    <OpenChannelFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressHeaderRightWithSettings={navigateToOpenChannelSettings}
      onPressHeaderRightWithParticipants={navigateToOpenChannelParticipants}
      onChannelDeleted={navigateToOpenChannelList}
      // Render custom message
      renderMessage={(props) => {
        if(props.message.customType === 'donation') {
          return <DonationMessage {...props} />
        }
        return <OpenChannelMessageRenderer {...props} />
      }}
    />
  );
};