Customize SendbirdUIKitContainer

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

SendbirdUIKitContainer

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

Platform service interfaces

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.

HeaderComponent

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'] = ({
    title,
    right,
    left,
    onPressLeft,
    onPressRight,
}) => {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.setOptions({
            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 }} />;
};

ErrorBoundary

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 (
        <SendbirdUIKitContainer
            errorBoundary={{
                disabled: false,
                onError: ({ error }) => {
                    Analytics.logError(error);
                },
                ErrorInfoComponent: ({ error, reset }) => {
                    return (
                        <View>
                            <Text>{error.message}</Text>
                            <Button onPress={reset}>{'reset uikit'}</Button>
                        </View>
                    );
                },
            }}
        />
    );
};

On this page

SendbirdUIKitContainer

Platform service interfaces HeaderComponent ErrorBoundary

Sample app