stream-chat-android-compose/io.getstream.chat.android.compose.ui.messages.header/ChannelHeader

ChannelHeader

@Composable
fun ChannelHeader(channel: Channel, currentUser: User?, connectionState: ConnectionState, modifier: Modifier = Modifier, typingUsers: List<User> = emptyList(), messageMode: MessageMode = MessageMode.Normal, onBackPressed: () -> Unit = {}, onHeaderTitleClick: (Channel) -> Unit? = null, onChannelAvatarClick: (Channel) -> Unit? = null, leadingContent: @Composable RowScope.() -> Unit = { with(ChatTheme.componentFactory) { ChannelHeaderLeadingContent( params = ChannelHeaderLeadingContentParams( onBackPressed = onBackPressed, ), ) } }, centerContent: @Composable RowScope.() -> Unit = { with(ChatTheme.componentFactory) { ChannelHeaderCenterContent( params = ChannelHeaderCenterContentParams( modifier = Modifier.weight(1f), channel = channel, currentUser = currentUser, connectionState = connectionState, typingUsers = typingUsers, messageMode = messageMode, onClick = onHeaderTitleClick, ), ) } }, trailingContent: @Composable RowScope.() -> Unit = { with(ChatTheme.componentFactory) { ChannelHeaderTrailingContent( params = ChannelHeaderTrailingContentParams( channel = channel, currentUser = currentUser, onClick = onChannelAvatarClick, ), ) } })

A clean, decoupled UI element that doesn't rely on ViewModels or our custom architecture setup. This allows the user to fully govern how the ChannelHeader behaves, by passing in all the data that's required to display it and drive its actions, as well as customize the slot APIs.

Parameters

channel

Channel info to display.

currentUser

The current user, required for different UI states.

connectionState

The state of WS connection used to switch between the subtitle and the network loading view.

modifier

Modifier for styling.

typingUsers

The list of typing users.

messageMode

The current message mode, that changes the header content, if we're in a Thread.

onBackPressed

Handler that propagates the back button click event.

onHeaderTitleClick

Action handler when the user taps on the header title section.

onChannelAvatarClick

Action handler called when the user taps on the channel avatar.

leadingContent

The content shown at the start of the header, by default a BackButton.

centerContent

The content shown in the middle of the header and represents the core information, by default DefaultChannelHeaderCenterContent.

trailingContent

The content shown at the end of the header, by default the channel avatar.