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

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.

List of modules

Key functionModuleComponent

GroupChannelList

GroupChannelListModule

Header

List

TypeSelector

GroupChannel

GroupChannelModule

Header

MessageList

Input

GroupChannelCreate

UserListModule

Header

List

GroupChannelSettings

GroupChannelSettingsModule

Header

Info

Menu

GroupChannelInvite

UserListModule

Header

List

GroupChannelMembers

UserListModule

Header

List


Elements of module

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

Provider

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.

Module components

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.


Create a 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>
    );
};

Customize a module

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 GroupChannelModule2 = createGroupChannelModule({ Header: CustomHeader });

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

Customize a module component

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>;
};