Invite users

Users can invite new users to a channel through UserInvitationScreen. All users are listed through pagination and those who are already a member of the channel can't be selected.

UserInvitationScreen composable

UserInvitationScreen is a composable screen that displays a list of users that can be invited to a channel. The screen provides a top bar, a user list with their invitation status, and a bottom bar with an action button.

Parameters

The UserInvitationScreen composable provides a convenient API for creating an user invitation screen. UserInvitationScreen has specific parameters for handling particular elements of the screen. Among them are the following:

Parameter	Description
navController	A navigation controller that manages the Sendbird navigation flow.
channelUrl	The URL of the channel.
modifier	A modifier that is applied to the composable.
userInvitationScreenState	A state that indicates whether the user is selected.
snackbarHostState	A state that indicates whether the snackbar is shown.
viewModelContract	A view model that provides the user invitation screen UI state.
onTopBarNavigationIconClick	The function called when the user clicks the navigation icon.
onTopBarActionClick	The function called when the user clicks the action icon.
onInvited	The function called when selected users are invited.
onChannelRemoved	The function called when the channel is removed.
topBar	A composable that serves as the top bar.
loading	A composable that serves as the loading screen before the user list is loaded.
failure	A composable that serves as the failure screen when the user list fails to load.
empty	A composable that serves as the empty screen when the user list is empty.
userItem	A composable that serves as the user item.

Composition tree

UserInvitationScreen is composed of the following components:

UserInvitationScreen
- Scaffold
  - UserInvitationTopBar
  - SendbirdSnackbar
  - LoadingScreen
  - FailurePlaceholder
  - ScreenPlaceholder
  - LazyColumn
    - UserInvitationItem

How to render

The following example demonstrates how to render and customize the UserInvitationScreen composable with the default UI components.

Basic example

The following example implements the default UserInvitationScreen composable with navigation:

Kotlin

@Composable
fun UserInvitationScreenWithNav() {
    val navController = rememberNavController()
    // FIXME: Replace with your channel URL.
    val channelUrl = "channelUrl"
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            navController = navController,
            startDestination = SendbirdNavigationRoute.UserInvitation(channelUrl),
            userInvitationScreen = { channelUrl ->
                UserInvitationExample(navController, channelUrl)
            }
        )
    }
}

@Composable
fun UserInvitationExample(
    navController: NavController,
    channelUrl: String
) {
    UserInvitationScreen(
        navController = navController,
        channelUrl = channelUrl
    )
}

Note: To learn how to integrate Sendbird navigation, see Navigation.

Customization

The following is a customization example for the UserInvitationScreen composable. In this case:

the navigation icon of the top bar is invisible.
the user item is customized to include a onCheckedChange listener.

Kotlin

@Composable
fun UserInvitationExample(
    navController: NavController,
    channelUrl: String
) {
    UserInvitationScreen(
        navController = navController,
        channelUrl = channelUrl,
        topBar = { selectedUserCount, _, onActionClick ->
            UserInvitationTopBar(
                selectedUserCount = selectedUserCount,
                navigationIcon = {},
                onActionClick = onActionClick
            )
        },
        userItem = { user, isSelected, isMember, onCheckedChange ->
            Text(
                text = user.userNickname(),
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .fillMaxWidth()
                    .background(
                        if (isSelected || isMember) {
                            MaterialTheme.colorScheme.primary.copy(alpha = 0.1f)
                        } else {
                            MaterialTheme.colorScheme.background
                        }
                    )
                    .clickable {
                        if (isMember.not()) {
                            onCheckedChange(user)
                        }
                    }
                    .padding(16.dp)
            )
        }
    )
}

On this page

UserInvitationScreen composable

Parameters Composition tree

How to render

Basic example Customization

Sample app