Messages in a group channel

A group channel allows close interactions between a limited number of users. Users can create 1-to-1 group channels or 1-to-N group channels and an invitation from a channel member is required by default to join the channel.

ChannelScreen composable

The ChannelScreen composable is a screen that displays messages exchanged among channel members. It is a pre-built screen that provides a list of channels with a top bar, loading screen, failure screen, and empty screen.

Parameters

The ChannelScreen composable provides a convenient API for creating a chat in a group channel screen. ChannelScreen 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	A channel URL that is used to retrieve a group 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.
onMessageItemClick	The function called when the user clicks a message item.
onMessageLongClick	The function called when the user long-clicks a message item.
onChannelRemoved	The function called when the channel is removed.
messageInputState	A state that indicates the text in the message input field.
dialogState	A state that indicates whether the dialog is shown.
imageViewerState	A state that indicates whether the image viewer is shown.
viewModel	A view model that provides the chat in a group channel screen UI state.
topBar	A composable that serves as the top bar.
loading	A composable that serves as the loading screen before the chat is loaded.
failure	A composable that serves as the failure screen when the chat fails to load.
empty	A composable that serves as the empty screen when messages are empty.
messageItem	A composable that serves as the message item.
messageInput	A composable that serves as the message input field.

Composition tree

ChannelScreen is composed of the following components:

ChannelScreen
- Scaffold

How to render

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

Basic usage

The following example implements the default ChannelScreen composable with navigation:

Kotlin

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

@Composable
fun ChannelExample(
    navController: NavController,
    channelUrl: String
) {
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl
    )
}

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

Customization

The following is a customization example of the ChannelScreen composable. In this case:

the navigation icon of the top bar is invisible.
the new message item is shown with the text "New".

Kotlin

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ChannelExample(
    navController: NavController,
    channelUrl: String
) {
    val dialogState = rememberChannelDialogState()
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl,
        topBar = { state ->
            ChannelTopBar(
                channelCoverModels = state.coverModels,
                channelTitle = state.title,
                channelDescription = state.channelDescription,
                navigationIcon = {},
                onActionClick = state.onActionClick
            )
        },
        dialogState = dialogState,
        messageItem = { message, onMessageClick, onMessageLongClick ->
            when (message.message.contains("New")) {
                true -> {
                    Text(
                        text = message.message,
                        style = MaterialTheme.typography.titleMedium,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(MaterialTheme.colorScheme.primary.copy(alpha = 0.1f))
                            .combinedClickable(
                                onClick = {
                                    dialogState.dismissMessageMenuDialog()
                                    onMessageClick(message)
                                },
                                onLongClick = {
                                    onMessageLongClick(message)
                                }
                            )
                            .padding(16.dp)
                    )
                }
                false -> {
                    MessageItemFactory(
                        message,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 8.dp),
                        onMessageClick = {
                            dialogState.dismissMessageMenuDialog()
                            onMessageClick(it)
                        },
                        onMessageLongClick = onMessageLongClick
                    )
                }
            }
        }
    )
}

On this page

ChannelScreen composable

Parameters Composition tree

How to render

Basic usage Customization

Sample app