UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native
/
Key functions

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 the 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.

List of fragments

Key functionFragmentCreate fragment method

GroupChannelList

GroupChannelListFragment

createGroupChannelListFragment

GroupChannel

GroupChannelFragment

createGroupChannelFragment

GroupChannelCreate

GroupChannelCreateFragment

createGroupChannelCreateFragment

GroupChannelSettings

GroupChannelSettingsFragment

createGroupChannelSettingsFragment

GroupChannelInvite

GroupChannelInviteFragment

createGroupChannelInviteFragment

GroupChannelMembers

GroupChannelMembersFragment

createGroupChannelMembersFragment

To learn more about the create fragment methods, download the sample app.


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 has been 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.

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

const FriendsModule = createUserListModule({ Header: FriendsHeader });

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

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