Skip to main content

Providing Custom Reactions#

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

  • like
  • love
  • haha
  • wow
  • sad

The Default Selected Message Menu

If you want to override the supported set of reactions, you need to create your custom implementation of ReactionIconFactory and provide it via ChatTheme.

Creating a Custom Reaction Icon Factory#

Let's have a closer look at the ReactionIconFactory interface:

interface ReactionIconFactory {

fun isReactionSupported(type: String): Boolean

fun createReactionIcon(type: String): ReactionIcon

fun createReactionIcons(): Map<String, ReactionIcon>

As you can see, there are 3 methods in ReactionIconFactory that you need to implement:

  • isReactionSupported: Checks if the factory supports a reaction of the given type.
  • createReactionIcon: Creates an instance of ReactionIcon for the given reaction type.
  • createReactionIcons: Creates ReactionIcons for all the supported reaction types.

As an example, you'll implement a factory that supports several custom reaction types and loads icons for them from resources.

const val THUMBS_UP: String = "thumbs_up"
const val THUMBS_DOWN: String = "thumbs_down"
const val MOOD_GOOD: String = "mood_good"
const val MOOD_BAD: String = "mood_bad"

// 1
val supportedReactions = setOf(

class CustomReactionIconFactory : ReactionIconFactory {

override fun isReactionSupported(type: String): Boolean {
// 2
return supportedReactions.contains(type)

override fun createReactionIcon(type: String): ReactionIcon {
// 3
return when (type) {
THUMBS_UP -> ReactionIcon(
painter = painterResource(R.drawable.ic_thumb_up),
selectedPainter = painterResource(R.drawable.ic_thumb_up_selected)
THUMBS_DOWN -> ReactionIcon(
painter = painterResource(R.drawable.ic_thumb_down),
selectedPainter = painterResource(R.drawable.ic_thumb_down_selected)
MOOD_GOOD -> ReactionIcon(
painter = painterResource(R.drawable.ic_mood_good),
selectedPainter = painterResource(R.drawable.ic_mood_good_selected)
MOOD_BAD -> ReactionIcon(
painter = painterResource(R.drawable.ic_mood_bad),
selectedPainter = painterResource(R.drawable.ic_mood_bad_selected)
else -> throw IllegalArgumentException()

override fun createReactionIcons(): Map<String, ReactionIcon> {
// 4
return supportedReactions.associateWith { createReactionIcon(it) }

Here's what you're doing here, step-by-step:

  1. Creating a set of reactions, supported by this factory.
  2. Using the set to check if the reaction is supported. Note that unsupported reactions are ignored and are not shown in the UI.
  3. Creating an instance of ReactionIcon for each supported reaction type. The ReactionIcon class encapsulates Painters for normal and selected states of a reaction icon.
  4. Creating ReactionIcons for all the supported reactions.

Next, you need to make use of the factory you've created above.

Providing the Factory via ChatTheme#

Finally, you just need to provide your newly created factory via ChatTheme:

class MessagesActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
val channelId = requireNotNull(intent.getStringExtra(KEY_CHANNEL_ID))

setContent {
// Pass your factory to ChatTheme here
ChatTheme(reactionIconFactory = CustomReactionIconFactory()) {
channelId = channelId,
onBackPressed = { finish() },
onHeaderActionClick = {}

companion object {
private const val KEY_CHANNEL_ID = "channelId"

fun createIntent(context: Context, channelId: String): Intent {
return Intent(context, {
putExtra(KEY_CHANNEL_ID, channelId)

The Resulting UI#

The code above will produce the following UI:

Selected Message MenuMessage List
Selected Message MenuMessage List

Did you find this page helpful?