Key functions

Sendbird UIKit for React Native allows you to create customizable views and execute essential chat functions such as list channels, create channels, and chat in channels. Key functions are carried out on a screen basis, meaning each function corresponds to a single screen. A key function is composed of three main components: Fragment, Module, and Hooks. Each fragment has a corresponding module that creates the view, and each module is made up of customizable module components. A fragment also has a corresponding hook that provides the necessary data and methods from the Chat SDK. Refer to the table below to see which key functions we provide and the components that make up each key function.

For every key function, a fragment builds the whole screen using a module and hook. While the module makes up the view using various components, the hook gathers data from the Chat SDK. The following diagram explains the basic architecture of UIKit for React Native.

To view the image in full screen, click on the

A key function in Sendbird UIKit is available through a fragment, which consists of a module, context, and hook. Once the hook retrieves data from the Chat SDK, the module sends the data to the Provider of the module and the props of the module components. Then, the module and its components use the context and props to build a view of the fragment for the corresponding key function.

Contexts provide module components an access to data from Chat SDK that are used in each key function. After retrieving data in a key function from the context, you can use it in the corresponding module component to create the view.

Hooks process and request data directly from Sendbird Chat SDK. They take data such as channel list, message list, and user information to update the view of the key function. There are also custom hooks for exchanging data with the Chat SDK and receiving event delegates. These hooks are configured on a feature basis in each key function and can be used accordingly.

In every key function, there is a module composed of multiple components and a context provider. The fragment can use any of these module components to create the UI of the screen while it uses the provider to send important data to contexts in the key function. When generating views using a module, you can use your own custom components instead of the default components in the module.

A module provider refers to a context provider in React that feeds important data to contexts used in the key function. Go to the module provider page to learn more.

A module is composed of several components, which combined together, make up a single screen. Through props, module components can receive data from the Chat SDK used in the corresponding key function. The data type of every props used in the key function is written as KeyFunctionProps['ComponentName']. By implementing the props in a module component, you can create an interface that allows the component to get access to the necessary data. You can also customize these module components instead of using the default components in UIKit to build a view. To do so, create a custom module component with the props used in the key function and implement the new component in the module.

import React, { createContext, useContext } from 'react';
import { Text } from 'react-native';

const KeyFunctionContext = {
    Fragment: createContext<{ dataA?: string }>({}),
};

const KeyFunctionModule = {
    Provider: ({ dataA, children }: { dataA?: string; children: React.ReactNode }) => {
        return <KeyFunctionContext.Fragment.Provider value={{ dataA }}>{children}</KeyFunctionContext.Fragment.Provider>;
    },
    Component: ({ dataB }: { dataB: string }) => {
        const { dataA } = useContext(KeyFunctionContext.Fragment);
        return (
            <Text>
                {dataA} / {dataB}
            </Text>
        );
    },
};

const KeyFunctionFragment = () => {
    const { dataA, dataB } = useHooksForChat();
    return (
        <KeyFunctionModule.Provider dataA={dataA}>
            <KeyFunctionModule.Component dataB={dataB} />
        </KeyFunctionModule.Provider>
    );
};

The naming convention of functions in UIKit for React Native are as follows:

{KeyFunction}Fragment / {KeyFunction}Module / {KeyFunction}Props

To call each function, you need to specify the corresponding key function. For example, to generate a default fragment in UIKit, call createKeyFunctionFragment(initModule?: Partial<KeyFunctionModule>). This method takes the module component as a parameter and uses closure to create a module of the fragment.