# Reactions

## Providing Custom Reactions

By default, the UI Components SDK provides the following reaction options and corresponding icons for them:

- `like`
- `love`
- `haha`
- `wow`
- `sad`

| ![The Default Message Options Overlay](@chat-sdk/android/v6/_assets/custom_reactions_message_options_overlay_before.png) |
| ------------------------------------------------------------------------------------------------------------------------ |

<admonition type="note">

You can find the full code from this guide on [GitHub](https://github.com/GetStream/stream-chat-android/tree/v6/stream-chat-android-ui-guides/src/main/java/io/getstream/chat/android/guides/catalog/uicomponents/customreactions). To check the final result, clone the repository, select the `stream-chat-android-ui-guides` module on your Android Studio like the image below, and run the module. ![UI Guides Module on Android Studio](@chat-sdk/android/v6/_assets/ui_guides_module_android_studio.png)

</admonition>

If you want to override the supported reactions, you need to create a custom instance of `SupportedReactions` with your custom set of reactions and provide it using the `ChatUI.supportedReactions` property.

<tabs>

<tabs-item value="kotlin" label="Kotlin">

```kotlin
val reactions = mapOf(
    "thumbs_up" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_up)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_up_selected)!!
    ),
    "thumbs_down" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_down)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_down_selected)!!
    ),
    "mood_good" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_good)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_good_selected)!!
    ),
    "mood_bad" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_bad)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_bad_selected)!!
    )
)

ChatUI.supportedReactions = SupportedReactions(context, reactions)
```

</tabs-item>

<tabs-item value="java" label="Java">

```java
Map<String, SupportedReactions.ReactionDrawable> reactions = new HashMap<>();
reactions.put(
        "thumbs_up", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_up),
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_up_selected)
        )
);

reactions.put(
        "thumbs_down", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_down),
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_down_selected)
        )
);

reactions.put(
        "mood_good", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_mood_good),
                ContextCompat.getDrawable(context, R.drawable.ic_mood_good_selected)
        )
);

reactions.put(
        "mood_bad", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_mood_bad),
                ContextCompat.getDrawable(context, R.drawable.ic_mood_bad_selected)
        )
);

ChatUI.setSupportedReactions(new SupportedReactions(context, reactions));
```

</tabs-item>

</tabs>

In the example above, we defined a set of 4 custom reactions and provided corresponding icons for them. Notice that you need to provide icons for both normal and selected states.

### The Resulting UI

The code above will produce the following UI:

| Message Options Overlay                                                                               | Message List                                                                    |
| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| ![Message Options Overlay](@chat-sdk/android/v6/_assets/custom_reactions_message_options_overlay.png) | ![Message List](@chat-sdk/android/v6/_assets/custom_reactions_message_list.png) |

## Custom Reactions Sorting

By default, the reactions are sorted by the time they were added (`ReactionSortingByFirstReactionAt`).
If you want to change the sorting behavior, you can provide a custom `ReactionSorting` implementation or use one of the provided ones.

You can sort the reactions by the following fields in `ReactionGroup`:

- `count` - The number of times the reaction was added.
- `sumScore` - The score value of the reaction. By default it is the same value as `count`.
- `firstReactionAt` - The date of the first reaction from this type of reaction.
- `lastReactionAt` - The date of the last reaction from this type of reaction.

### Using TransformStyle

In the example below, we are using the predefined `ReactionSortingByCount` implementation to sort the reactions by the number of times they were added.

<tabs>

<tabs-item value="kotlin" label="Kotlin">

```kotlin
TransformStyle.viewReactionsStyleTransformer = StyleTransformer { defaultViewStyle ->
    defaultViewStyle.reactionsViewStyle.copy(
        reactionSorting = ReactionSortingByCount,
    )
}
```

</tabs-item>

<tabs-item value="java" label="Java">

```java
TransformStyle.setMessageListItemStyleTransformer(defaultViewStyle -> {
    return defaultViewStyle.getReactionsViewStyle().copy(
        //... other properties
        ReactionSortingByCount.INSTANCE
    );
});
```

</tabs-item>

</tabs>


---

This page was last updated at 2026-04-21T07:55:26.085Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/android/v6/ui/guides/providing-custom-reactions/](https://getstream.io/chat/docs/sdk/android/v6/ui/guides/providing-custom-reactions/).