Fragment

For every key function, there's a fragment that represents the entire screen. A fragment is made up of a module, context, and hook. The fragment uses a module to build and display the UI of the view. Each module is composed of several components, which combined together, make up a single screen. You can customize the view on a component-level, allowing you to easily make small style changes.

A fragment also contains a hook and context, which retrieve data from the Chat SDK and send them to the provider of the module and the props of the module components. Using this data, the module and its components build a view of the fragment for the corresponding key function.

Create a fragment and build a view

There's a create method for every key function that generates a default fragment in UIKit for React Native. The method contains other functions that allow you to initialize the module and props.

function createKeyFunctionFragment(
    initModule?: Partial<KeyFunctionModule>,
): KeyFunctionFragment {
    const Module = createKeyFunctionModule(initModule);

    return (props: KeyFunctionProps['Fragment']) => {
        return (
            <Module.Provider>
                <Module.Header />
                <Module.List />
            </Module.Provider>
        );
    };
}

Once a default fragment in Sendbird UIKit is created, you can build a screen using the module components and connect the screen to the client app's navigator.

const KeyFunctionFragment = createKeyFunctionFragment();

const KeyFunctionScreen = () => {
    return <KeyFunctionFragment />;
};

const AppNavigation = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name={'KeyFunctionScreen'} component={KeyFunctionScreen} />
        </Stack.Navigator>
    );
};

You can replace the default module components or properties of the module with your own custom components by passing the custom module component or property as a parameter in the create fragment method.

const CustomHeader = (props: KeyFunctionProps['Header']) => {
    const { headerTitle } = useContext(KeyFunctionContext.Fragment);

    return (
        <View>
            <Pressable onPress={() => props.onPressHeaderLeft()}>
                <Text>{'Left button'}</Text>
            </Pressable>
            <Text>{headerTitle}</Text>
            <Pressable onPress={() => props.onPressHeaderRight()}>
                <Text>{'Right button'}</Text>
            </Pressable>
        </View>
    );
};

const KeyFunctionFragment = createKeyFunctionFragment({
    Header: CustomHeader,
});

Customize a fragment

While Sendbird UIKit provides a default fragment, you can create a custom fragment by using the interfaces to build your own modules and hooks. If you wish to customize the fragment, you can render your own module components in the fragment in addition to the default components that UIKit offers. See the code below on how to customize a fragment in a key function and render your own module component.

const MyModalComponent = () => {
    const { someData } = useContext(KeyFunctionContext.Some);
    return (
        <Modal visible={Boolean(someData)}>
            {someData && <Text>{JSON.stringify(someData)}</Text>}
        </Modal>
    );
};

const CustomKeyFunctionModule = createKeyFunctionModule();

const CustomKeyFunctionFragment = (
    props: KeyFunctionProps['Fragment'],
): KeyFunctionFragment => {
    const { data } = useSomeKeyFunctionHook();
    const [visible, setVisible] = useState(false);

    return (
        <CustomKeyFunctionModule.Provider>
            <CustomKeyFunctionModule.Header />
            <CustomKeyFunctionModule.List data={data} />
            <MyModalComponent visible={visible} setVisible={setVisible} />
        </CustomKeyFunctionModule.Provider>
    );
};

You can also customize a fragment in a key function by re-using modules. See the example below on how to use UserListModule to create a custom fragment that shows a list of friends.

import { CustomQuery, useUserList } from '@sendbird/uikit-chat-hooks';
import { createUserListModule, useSendbirdChat } from '@sendbird/uikit-react-native';
import type { SendbirdChatSDK, SendbirdUser } from '@sendbird/uikit-utils';

const friendMemberListQueryCreator = (sdk: SendbirdChatSDK) => {
    const friendListQuery = sdk.createFriendListQuery();
    return new CustomQuery({
        next: () => friendListQuery.next(),
        isLoading: () => friendListQuery.isLoading,
        hasNext: () => friendListQuery.hasNext,
    });
};

const FriendsModule = createUserListModule<SendbirdUser>({
    Header: FriendsHeader // Custom Header
});

const FriendsFragment = () => {
    const { sdk } = useSendbirdChat();
    const { users, refreshing, refresh, next } = useUserList(sdk, {
        queryCreator: () => friendMemberListQueryCreator(sdk), // Custom queryCreator
    });

    return (
        <FriendsModule.Provider>
            <FriendsModule.Header />
            <FriendsModule.List
                onLoadNext={next}
                users={users}
                renderUser={(user) => <FriendComponent user={user} />} // Custom renderUser
                onRefresh={refresh}
                refreshing={refreshing}
            />
        </FriendsModule.Provider>
    );
};

On this page

Create a fragment and build a view Customize a fragment