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

Customize SendbirdUIKitContainer

Copy link

In Sendbird UIKit for React Native, you can customize all the components that make up SendbirdUIKitContainer.


Copy link

There are three elements within SendbirdUIKitContainer: Platform service interfaces, Header component, and Error boundary. All of these elements are customizable.

Platform service interfaces

Copy link

Platform service interfaces allow you to use certain native APIs such as saving and attaching image and video files. If you wish to implement custom interfaces, you can use other native module libraries that aren't supported by Sendbird UIKit for React Native. To learn more about customizing native modules, go to the PlatformServiceProvider page.


Copy link

The HeaderComponent is used to render the default header module component in a key function. If the component returns null, the header is not rendered.

import React, { useEffect } from 'react';
import { Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
import { HeaderStyleContextType, Text } from '@sendbird/uikit-react-native-foundation';

const UseReactNavigationHeader: HeaderStyleContextType['HeaderComponent'] = ({
}) => {
    const navigation = useNavigation();

    useEffect(() => {
            headerShown: true,
            headerTitleAlign: 'center',
            headerBackVisible: false,
            headerTitle: () => (typeof title === 'string' ? <Text subtitle2>{title}</Text> : title),
            headerLeft: () => <Pressable onPress={onPressLeft}>{left}</Pressable>,
            headerRight: () => <Pressable onPress={onPressRight}>{right}</Pressable>,
    }, [title, right, left, onPressLeft, onPressRight]);

    return null;

const App = () => {
    return <SendbirdUIKitContainer styles={{ HeaderComponent: UseReactNavigationHeader }} />;


Copy link

Error boundaries are used to find errors that occur at a component level. When there's an error in UIKit, you can assign a custom component to show that an error occurred. Through ErrorBoundary, you can track various errors and prevent the client app from force quitting due to runtime errors.

import { View } from 'react-native';
import { Text, Button } from '@sendbird/uikit-react-native-foundation';

const App = () => {
    return (
                disabled: false,
                onError: ({ error }) => {
                ErrorInfoComponent: ({ error, reset }) => {
                    return (
                            <Button onPress={reset}>{'reset uikit'}</Button>