UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

Invite users

Users can invite new users to a channel through GroupChannelInviteFragment. All users are listed through pagination and members who already belong to the channel can't be selected. The user list can be customized to only include specific users.


Usage

You can start building an invite user screen by first creating a fragment. To do so, call the createGroupChannelInviteFragment method. Once an invite user fragment is built, you need to set up the navigation props and register the screen to a navigation library. Refer to the code below.

import { useSendbirdChat, createGroupChannelInviteFragment } from '@sendbird/uikit-react-native';

const GroupChannelInviteFragment = createGroupChannelInviteFragment<Sendbird.User>();
const GroupChannelInviteScreen = ({ params }) => {
    const { sdk } = useSendbirdChat();
    const [channel] = useState(() => sdk.GroupChannel.buildFromSerializedData(params.serializedChannel));

    const navigateToBack = () => {};
    const navigateToGroupChannel = (channel) => {};

    return (
        <GroupChannelInviteFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onInviteMembers={navigateToGroupChannel}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelInviteFragment.

Properties
RequiredTypeDescription

channel

object

Specifies the group channel that the current user is a member of.

onPressHeaderLeft

function

Specifies the prop to execute custom navigation operations when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.

onInviteMembers

function

Specifies the prop to receive callback when the invite button is selected. By default, the screen changes to the group channel screen.

OptionalTypeDescription

queryCreator

function

Creates and returns a custom user list query to retrieve a list of users when creating a channel.

userIdsGenerator

function

Specifies the prop to generate a list of user IDs for creating a new group channel. If you wish to customize the user list query by calling queryCreator, then you must also use this prop in conjunction.

renderUser

ReactElement

Renders a customized view of the user profile.

sortComparator

function

Specifies the function to sort a list of users in the invite user screen. You can customize the sorting order by passing a parameter in the method.


Context

GroupChannelInviteFragment uses UserListModule to display a list of users that the current user can select and invite to a group channel. To store and handle data that are used to build the invite user screen, Sendbird UIKit provides UserListContexts, which is comprised of two context objects: UserListContexts.Fragment and UserListContexts.List.

type UserListContextsType<User> = {
    Fragment: React.Context<{
        headerTitle: string;
        headerRight: string;
    }>;

    List: React.Context<{
        selectedUsers: User[];
        setSelectedUsers: React.Dispatch<React.SetStateAction<User[]>>;
    }>;
};

Fragment

To retrieve user list data from the Chat SDK, you need to call the useContext hook and pass UserListContexts.Fragment as a parameter. The data is then used to render the user list module.

const { headerTitle, headerRight } = useContext(UserListContexts.Fragment);

List

You can call the useContext hook and pass UserListContexts.List as a parameter to retrieve user list data from the Chat SDK. The data is then used to render the list component of UserListModule.

const { selectedUsers, setSelectedUsers } = useContext(UserListContexts.List);

Module components

An invite user screen is composed of five module components: header, list, loading status, empty status, and error status. These components make up the UserListModule and are used to create and display the UI of the screen.

Header

The header component displays the title of GroupChannelInviteFragment, a button on the top left corner, and a button the top right corner. By default, the left button allows you to go back to the previous screen and when selected, the onPressHeaderLeft navigation prop is called. When the invite button on the right is selected, the selected users are invited to the channel. The onInviteMembers function is called and the group channel screen appears.

List of properties

The following table lists the properties of UserListModule.Header.

Property nameTypeDescription

onPressHeaderLeft

function

Specifies the prop to execute custom navigation operations when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.

onPressHeaderRight

function

Specifies the prop to execute custom navigation operations when the button on the top right corner of the header component is selected. By default, the function passes the selected users as a parameter to invite them to the channel and the channel gets updated.

List

The list component shows a list of users' profile images, names, and selectable checkboxes. By default, all users registered to the Sendbird application are retrieved in reverse chronological order of creation. However, members that already belong to the channel are not shown on the list.

List of properties

The following table lists the properties of UserListModule.List.

Property nameTypeDescription

users

array of objects

Specifies a list of all users that appear on the user list.

onLoadNext

function

Specifies the prop to execute custom operations when loading more user list items.

onRefresh

function

Specifies the prop to execute custom operations when refreshing the user list.

refreshing

boolean

Determines whether to refresh the user list. (Default: true)

ListEmptyComponent

ReactElement

Renders a customized view of the empty user list.

renderUser

ReactElement

Renders a customized view of the user profile.

StatusLoading

The StatusLoading component exists in the UserListModule and lets the user know if the list is loading.

StatusEmpty

The StatusEmpty component exists in the UserListModule and lets the user know if the list is empty.

StatusError

The StatusError component exists in the UserListModule and lets the user know if the list fetching failed.


Customization

In the invite user key function, you can customize the default GroupChannelInviteFragment to change various elements of the screen such as the module and its components. See the code below on how to replace the default user list query with a custom user list query as an example. The returned User instance from a custom user list query is different from the default Sendbird.User instance. This means you would need to implement your own userIdsGenerator and renderUser props when calling queryCreator with the custom user list query.

Note: To learn more about how to customize a fragment, go to the fragment page.

import { CustomQuery } from '@sendbird/uikit-chat-hooks';
import { useSendbirdChat, createGroupChannelInviteFragment } from '@sendbird/uikit-react-native';

type MyAppUser = { uid: string; name: string; profile: string };

const myAppUserQueryCreator = () => {
    const query = createMyAppUserQuery();
    return new CustomQuery<MyAppUser>({
        hasNext(): boolean {
            return query.hasNext;
        },
        isLoading(): boolean {
            return query.isLoading;
        },
        next() {
            return query.next();
        },
    });
};

const GroupChannelInviteFragment = createGroupChannelInviteFragment<MyAppUser>();
const GroupChannelInviteScreen = ({ params }) => {
    const { sdk } = useSendbirdChat();
    const [channel] = useState(() => sdk.GroupChannel.buildFromSerializedData(params.serializedChannel));

    const navigateToBack = () => {};
    const navigateToGroupChannel = (channel) => {};

    return (
        <GroupChannelInviteFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onInviteMembers={navigateToGroupChannel}
            queryCreator={myAppUserQueryCreator}
            userIdsGenerator={(users) => users.map((u) => u.uid)}
            renderUser={(user, selectedUsers, setSelectedUsers) => {
                const selected = selectedUsers.findIndex((u) => u.uid === user.uid) > -1;
                return <MyAppUserBar selected={selected} user={user} onToggle={setSelectedUsers} />;
            }}
        />
    );
};