List channel members

A member list is a complete list of users that are members of a group channel. The channel member list is created through MembersScreen.

MembersScreen composable

The MembersScreen composable is a screen that displays a list of members. It is a pre-built screen that provides a list of members with a top bar, loading screen, failure screen, and empty screen.

Parameters

The MembersScreen composable provides a convenient API for creating a list of channel members screen. MembersScreen 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.
onTopBarNavigationIconClick	The function called when the user clicks the navigation icon.
onTopBarActionClick	The function called when the user clicks the action icon.
onChannelRemoved	The function called when the channel is removed.
onMemberItemClick	The function called when the user clicks a member item.
onMemberItemLongClick	The function called when the user long-clicks a member item.
snackbarHostState	A state that indicates the visibility of the snackbar.
viewModelContract	A view model that provides the channel member list screen UI state.
topBar	A composable that serves as the top bar.
loading	A composable that serves as the loading screen before the channel member list is loaded.
failure	A composable that serves as the failure screen when the channel member list fails to load.
empty	A composable that serves as the empty screen when the channel member list is empty.
memberItem	A composable that serves as the member item.

Composition tree

MembersScreen composable uses the following child composables:

MembersScreen
- Scaffold
  - MembersTopBar
  - SendbirdSnackbar
  - LoadingScreen
  - FailurePlaceholder
  - ScreenPlaceholder
  - LazyColumn
    - MemberItem

How to render

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

Basic example

The following example implements the default MembersScreen composable with navigation:

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

@Composable
fun MembersScreenExample(
    navController: NavController,
    channelUrl: String
) {
    MembersScreen(
        navController = navController,
        channelUrl = channelUrl
    )
}

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

Customization

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

the navigation icon of the top bar is invisible.
the memberItem is customized to include a click and long-click listener.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MembersScreenExample(
    navController: NavController,
    channelUrl: String
) {
    MembersScreen(
        navController = navController,
        channelUrl = channelUrl,
        topBar = { _, onActionClick ->
            MembersTopBar(
                navigationIcon = {},
                onActionClick = onActionClick
            )
        },
        memberItem = { member, onClick, onLongClick ->
            Text(
                text = member.userNickname(),
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .fillMaxWidth()
                    .combinedClickable(
                        onClick = { onClick(member) },
                        onLongClick = { onLongClick(member) }
                    )
                    .padding(16.dp)
            )
        }
    )
}

On this page

MembersScreen composable

Parameters Composition tree

How to render

Basic example Customization

Sample app