# Reactions

## Reactions

The SDK provides two reaction components:

- **ReactionsMenu**: Bottom sheet that shows reaction counts by type, allows filtering by reaction, and lists who reacted. Also provides an "add reaction" button. Appears when the user taps the reaction section on a message.
- **ReactionsPicker**: Bottom sheet that shows all available reactions in a grid for sending. Appears via the "show more" button in `MessageActions` or `ReactionsMenu`.

Both are set up automatically if you use [`ChannelScreen`](/chat/docs/sdk/android/v7/compose/message-components/channel-screen/).

### ReactionsMenu

Shows a list of reaction counts (filterable by type) and a paginated list of users who reacted:

```kotlin
if (selectedMessageState is SelectedMessageReactionsState) {
    val selectedMessage = selectedMessageState.message
    ReactionsMenu(
        currentUser = user,
        ownCapabilities = selectedMessageState.ownCapabilities,
        message = selectedMessage,
        onMessageAction = { action ->
            composerViewModel.performMessageAction(action)
            listViewModel.performMessageAction(action)
        },
        onShowMoreReactionsSelected = {
            listViewModel.selectExtendedReactions(selectedMessage)
        },
        onDismiss = { listViewModel.removeOverlay() },
    )
}
```

![Default ReactionsMenu component](@chat-sdk/android/v7-latest/_assets/compose_default_reactions_menu.png)

Parameters:

- `message`: The selected message.
- `currentUser`: The currently logged in user.
- `ownCapabilities`: Set of capabilities for the current channel. See [ChannelCapabilities](https://github.com/GetStream/stream-chat-android/blob/develop/stream-chat-android-client/src/main/java/io/getstream/chat/android/models/ChannelCapabilities.kt).
- `onMessageAction`: Handler for when the user selects a reaction or action.
- `onShowMoreReactionsSelected`: Handler for the "show more reactions" button.
- `onDismiss`: Handler for dismissing the menu.

To customize the menu, override `ChatComponentFactory.ReactionsMenu()` (the overall bottom sheet) or `ChatComponentFactory.ReactionsMenuContent()` (the content inside it). See the [Component Factory](/chat/docs/sdk/android/v7/compose/general-customization/component-factory/) page.

### ReactionsPicker

Shows all available reactions in a grid:

```kotlin
if (selectedMessageState is SelectedMessageReactionsPickerState) {
    ReactionsPicker(
        message = selectedMessageState.message,
        onMessageAction = { action ->
            composerViewModel.performMessageAction(action)
            listViewModel.performMessageAction(action)
        },
        onDismiss = { listViewModel.removeOverlay() },
    )
}
```

![Default ReactionsPicker Component](@chat-sdk/android/v7-latest/_assets/compose_default_reactions_picker_component.png)

To customize the picker, override `ChatComponentFactory.MessageReactionPicker()` (the overall bottom sheet) or `ChatComponentFactory.MessageReactionsPickerContent()` (the content inside it). See the [Component Factory](/chat/docs/sdk/android/v7/compose/general-customization/component-factory/) page.

## Custom Reactions

By default, the SDK provides five quick reactions: `like`, `love`, `haha`, `wow`, `sad` (visible in the [MessageActions](/chat/docs/sdk/android/v7/compose/message-components/message-actions/) header).

To override the supported reactions, implement `ReactionResolver` and provide it via `ChatTheme`:

```kotlin
class CustomReactionResolver : ReactionResolver {

    private val emojiMapping = linkedMapOf(
        "thumbs_up" to "👍",
        "thumbs_down" to "👎",
        "party" to "🎉",
        "fire" to "🔥",
        "thinking" to "🤔",
        "clap" to "👏",
        "eyes" to "👀",
        "rocket" to "🚀",
    )

    override val supportedReactions: Set<String> = emojiMapping.keys

    override val defaultReactions: List<String> = listOf(
        "thumbs_up", "fire", "party", "rocket", "eyes",
    )

    override fun emojiCode(type: String): String? = emojiMapping[type]
}
```

- `supportedReactions`: The full set of recognized reaction types. Unsupported types are ignored.
- `defaultReactions`: Reactions shown for quick access (up to 5 recommended). Must be a subset of `supportedReactions`.
- `emojiCode`: Returns the emoji character for a reaction type, or `null` if unsupported.

Apply it via `ChatTheme`:

```kotlin
ChatTheme(reactionResolver = CustomReactionResolver()) {
    ChannelScreen(
        viewModelFactory = ChannelViewModelFactory(
            context = this,
            channelId = channelId,
        ),
        onBackPressed = { finish() },
    )
}
```

### Extending the Default Resolver

To add reactions while keeping the defaults:

```kotlin
class ExtendedReactionResolver : ReactionResolver {

    private val delegate = ReactionResolver.defaultResolver()

    private val customMapping = mapOf(
        "rocket" to "🚀",
        "fire" to "🔥",
        "clap" to "👏",
    )

    override val supportedReactions: Set<String> =
        delegate.supportedReactions + customMapping.keys

    override val defaultReactions: List<String> =
        delegate.defaultReactions

    override fun emojiCode(type: String): String? =
        customMapping[type] ?: delegate.emojiCode(type)
}
```

## Reaction Sorting

By default, reactions are sorted by when they were first added (`ReactionSortingByFirstReactionAt`). To change sorting, pass a `ReactionSorting` to `ChannelScreen` or `MessageList`:

```kotlin
ChannelScreen(
    viewModelFactory = messageListViewModelFactory,
    reactionSorting = ReactionSortingByCount,
)
```

Available sort fields on `ReactionGroup`: `count`, `sumScore`, `firstReactionAt`, `lastReactionAt`.


---

This page was last updated at 2026-04-14T15:35:13.524Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v7/compose/message-components/reactions-menu/](https://getstream.io/chat/docs/sdk/android/v7/compose/message-components/reactions-menu/).