Module

A module is a set of React components that are used to render and display a screen. It's composed of various components that display the UI of the screen and a provider that sends data to the context in the key function. All of these elements of a module need to be rendered in order to build a view.

To view the image in full screen, click on the

The following are what constitute a module: Provider and Module components.

To view the image in full screen, click on the

A provider in a module acts as a Context provider in React that sends data from the Chat SDK to contexts of the key function.

A component, also referred to as a module component, is part of a module that makes up the view. 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.

There's a create method for every key function that generates a default module in UIKit for React Native. You can call the create{KeyFunction}Module function with the appropriate key function name.

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

const GroupChannelModule = createGroupChannelModule();

const RenderModule = () => {
    return (
        <GroupChannelModule.Provider>
            <GroupChannelModule.Header />
            <GroupChannelModule.MessageList />
            <GroupChannelModule.Input />
        </GroupChannelModule.Provider>
    );
};

While Sendbird provides a default module, you can create your own module by passing a custom module component as a parameter in the create module method. Once the parameter is set, the default module is overwritten with the custom module.

import { createGroupChannelModule, createGroupChannelFragment } from '@sendbird/uikit-react-native';

const GroupChannelModule = createGroupChannelModule({ Header: CustomHeader });

// Or use the following code.
const GroupChannelFragment = createGroupChannelFragment({ Header: CustomHeader });

You can also use your own custom module component by replacing the default props type of the key function with the custom type. Refer to the example code below.

import { Text } from 'react-native';
import type { GroupChannelProps } from '@sendbird/uikit-react-native';

const MyHeader = (_: GroupChannelProps['Header']) => {
    // props.onPressHeaderLeft
    // props.onPressHeaderRight
    return <Text>{'MyHeader'}</Text>;
};