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


Copy link

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.

Elements of module

Copy link

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


Copy link

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

Copy link

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

Copy link

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.Header />
            <GroupChannelModule.MessageList />
            <GroupChannelModule.Input />

Customize a module

Copy link

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

Customize a module component

Copy link

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