Customization

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

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

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.

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

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

In every key function, there's a fragment and a module. Each fragment has a corresponding module that creates the view, and each module is made up of customizable module components.

A key function is available through a fragment, which consists of a module, context, and hook, to create a single screen. By using the components and features provided by UIKit for React Native, you can implement a custom fragment. To learn more about custom fragments, go to the customize a fragment page.

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. If you don't want to use the default module, you can replace it with a custom module. To learn more about custom modules, go to the customize a module page.

There are five style-related resources that you can use and customize in UIKit for React Native.

To learn more about custom strings, go to the customize the StringSet page.

To learn more about custom icons, go to the customize the icons page.

A theme is made up of colors and typography in UIKit and is applied to the entire screen. To learn more about custom theme, go to the customize the theme page.

To learn more about custom colors, go to the customize the colors page.

To learn more about custom fonts, go to the customize the typography page.