> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Reactions > Add, remove, and fetch emoji reactions on messages in your Flutter chat application using CometChat SDK. | Field | Value | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Key Classes | `BaseMessage`, `Reaction`, `ReactionCount`, `ReactionEvent`, `ReactionsRequest`, `ReactionsRequestBuilder` | | Key Methods | `CometChat.addReaction()`, `CometChat.removeReaction()`, `ReactionsRequest.fetchNext()`, `ReactionsRequest.fetchPrevious()`, `CometChatHelper.updateMessageWithReactionInfo()` | | Listener Events | `onMessageReactionAdded`, `onMessageReactionRemoved` | | Prerequisites | SDK initialized, user logged in | ```dart theme={null} // Add a reaction to a message CometChat.addReaction(messageId, "\U0001f600", onSuccess: (message) { debugPrint("Reaction added: ${message.getReactions().last}"); }, onError: (e) {}); // Remove a reaction from a message CometChat.removeReaction(messageId, "\U0001f600", onSuccess: (message) { debugPrint("Reaction removed"); }, onError: (e) {}); // Fetch reactions for a message ReactionsRequest request = (ReactionsRequestBuilder() ..messageId = messageId ..limit = 30 ).build(); request.fetchNext(onSuccess: (reactions) {}, onError: (e) {}); // Listen for reaction events CometChat.addMessageListener("LISTENER_ID", MessageListener( onMessageReactionAdded: (ReactionEvent event) {}, onMessageReactionRemoved: (ReactionEvent event) {}, )); ``` Reactions let users respond to messages with emoji. You can add or remove reactions, fetch all reactions on a message, listen for reaction events in real time, and update your UI when reactions change. Reactions work on text messages, media messages, and custom messages. **Available via:** SDK | [REST API](https://api-explorer.cometchat.com) | [UI Kits](/ui-kit/flutter/overview) ## Add a Reaction Call `addReaction()` with a message ID and an emoji string. | Parameter | Type | Description | | ----------- | -------- | ---------------------------------------------------------- | | `messageId` | `int` | The ID of the message to react to. | | `reaction` | `String` | The reaction emoji (e.g., `"\U0001f600"`, `"\U0001f44d"`). | ```dart theme={null} int messageId = 1; CometChat.addReaction(messageId, "\U0001f634", onSuccess: (message) { debugPrint("Success : ${message.getReactions().last}"); }, onError: (e) { debugPrint("Error: ${e.message}"); }); ``` **On Success** — A `BaseMessage` object representing the message with the reaction added: **BaseMessage Object:** | Parameter | Type | Description | Sample Value | | -------------------- | ------ | -------------------------------------------------- | ------------------------------------------------- | | `id` | number | Unique message ID | `401` | | `metadata` | object | Custom metadata attached to the message | `{}` | | `receiver` | object | Receiver user object | [See below \u2193](#add-reaction-receiver-object) | | `editedBy` | string | UID of the user who edited the message | `null` | | `conversationId` | string | Unique conversation identifier | `"cometchat-uid-1_user_cometchat-uid-2"` | | `sentAt` | number | Epoch timestamp when the message was sent | `1745554729` | | `receiverUid` | string | UID of the receiver | `"cometchat-uid-2"` | | `type` | string | Type of the message | `"text"` | | `readAt` | number | Epoch timestamp when the message was read | `0` | | `deletedBy` | string | UID of the user who deleted the message | `null` | | `deliveredAt` | number | Epoch timestamp when the message was delivered | `1745554750` | | `deletedAt` | number | Epoch timestamp when the message was deleted | `0` | | `replyCount` | number | Number of replies to this message | `0` | | `sender` | object | Sender user object | [See below \u2193](#add-reaction-sender-object) | | `receiverType` | string | Type of the receiver | `"user"` | | `editedAt` | number | Epoch timestamp when the message was edited | `0` | | `parentMessageId` | number | ID of the parent message (for threads) | `0` | | `readByMeAt` | number | Epoch timestamp when read by the current user | `0` | | `category` | string | Message category | `"message"` | | `deliveredToMeAt` | number | Epoch timestamp when delivered to the current user | `0` | | `updatedAt` | number | Epoch timestamp when the message was last updated | `1745554729` | | `unreadRepliesCount` | number | Count of unread replies | `0` | | `quotedMessageId` | number | ID of the quoted message | `null` | *** **`sender` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ---------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the sender | `"cometchat-uid-1"` | | `name` | string | Display name of the sender | `"Andrew Joseph"` | | `link` | string | Profile link | `null` | | `avatar` | string | Avatar URL | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-1.webp"` | | `metadata` | object | Custom metadata | `{}` | | `status` | string | Online status | `"online"` | | `role` | string | User role | `"default"` | | `statusMessage` | string | Status message | `null` | | `tags` | array | User tags | `[]` | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `lastActiveAt` | number | Epoch timestamp of last activity | `1745554700` | *** **`receiver` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ---------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the receiver | `"cometchat-uid-2"` | | `name` | string | Display name of the receiver | `"George Alan"` | | `link` | string | Profile link | `null` | | `avatar` | string | Avatar URL | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-2.webp"` | | `metadata` | object | Custom metadata | `{}` | | `status` | string | Online status | `"offline"` | | `role` | string | User role | `"default"` | | `statusMessage` | string | Status message | `null` | | `tags` | array | User tags | `[]` | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `lastActiveAt` | number | Epoch timestamp of last activity | `1745550000` | | Parameter | Type | Description | Sample Value | | --------- | ------ | ---------------------------- | -------------------------------------------------------------- | | `code` | string | Error code identifier | `"ERR_CHAT_API_FAILURE"` | | `message` | string | Human-readable error message | `"Failed to process the reaction."` | | `details` | string | Additional technical details | `"An unexpected error occurred while processing the request."` | ## Remove a Reaction Call `removeReaction()` with the same message ID and emoji. | Parameter | Type | Description | | ----------- | -------- | -------------------------------------------------------------------- | | `messageId` | `int` | The ID of the message to remove the reaction from. | | `reaction` | `String` | The reaction emoji to remove (e.g., `"\U0001f600"`, `"\U0001f44d"`). | ```dart theme={null} int messageId = 1; CometChat.removeReaction(messageId, "\U0001f634", onSuccess: (message) { debugPrint("Success : ${message.getReactions().last}"); }, onError: (e) { debugPrint("Error: ${e.message}"); }); ``` **On Success** — A `BaseMessage` object representing the message with the reaction removed: **BaseMessage Object:** | Parameter | Type | Description | Sample Value | | -------------------- | ------ | -------------------------------------------------- | ---------------------------------------------------- | | `id` | number | Unique message ID | `401` | | `metadata` | object | Custom metadata attached to the message | `{}` | | `receiver` | object | Receiver user object | [See below \u2193](#remove-reaction-receiver-object) | | `editedBy` | string | UID of the user who edited the message | `null` | | `conversationId` | string | Unique conversation identifier | `"cometchat-uid-1_user_cometchat-uid-2"` | | `sentAt` | number | Epoch timestamp when the message was sent | `1745554729` | | `receiverUid` | string | UID of the receiver | `"cometchat-uid-2"` | | `type` | string | Type of the message | `"text"` | | `readAt` | number | Epoch timestamp when the message was read | `0` | | `deletedBy` | string | UID of the user who deleted the message | `null` | | `deliveredAt` | number | Epoch timestamp when the message was delivered | `1745554750` | | `deletedAt` | number | Epoch timestamp when the message was deleted | `0` | | `replyCount` | number | Number of replies to this message | `0` | | `sender` | object | Sender user object | [See below \u2193](#remove-reaction-sender-object) | | `receiverType` | string | Type of the receiver | `"user"` | | `editedAt` | number | Epoch timestamp when the message was edited | `0` | | `parentMessageId` | number | ID of the parent message (for threads) | `0` | | `readByMeAt` | number | Epoch timestamp when read by the current user | `0` | | `category` | string | Message category | `"message"` | | `deliveredToMeAt` | number | Epoch timestamp when delivered to the current user | `0` | | `updatedAt` | number | Epoch timestamp when the message was last updated | `1745554729` | | `unreadRepliesCount` | number | Count of unread replies | `0` | | `quotedMessageId` | number | ID of the quoted message | `null` | *** **`sender` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ---------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the sender | `"cometchat-uid-1"` | | `name` | string | Display name of the sender | `"Andrew Joseph"` | | `link` | string | Profile link | `null` | | `avatar` | string | Avatar URL | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-1.webp"` | | `metadata` | object | Custom metadata | `{}` | | `status` | string | Online status | `"online"` | | `role` | string | User role | `"default"` | | `statusMessage` | string | Status message | `null` | | `tags` | array | User tags | `[]` | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `lastActiveAt` | number | Epoch timestamp of last activity | `1745554700` | *** **`receiver` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ---------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the receiver | `"cometchat-uid-2"` | | `name` | string | Display name of the receiver | `"George Alan"` | | `link` | string | Profile link | `null` | | `avatar` | string | Avatar URL | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-2.webp"` | | `metadata` | object | Custom metadata | `{}` | | `status` | string | Online status | `"offline"` | | `role` | string | User role | `"default"` | | `statusMessage` | string | Status message | `null` | | `tags` | array | User tags | `[]` | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `lastActiveAt` | number | Epoch timestamp of last activity | `1745550000` | | Parameter | Type | Description | Sample Value | | --------- | ------ | ---------------------------- | -------------------------------------------------------------- | | `code` | string | Error code identifier | `"ERR_CHAT_API_FAILURE"` | | `message` | string | Human-readable error message | `"Failed to process the reaction."` | | `details` | string | Additional technical details | `"An unexpected error occurred while processing the request."` | Both `addReaction()` and `removeReaction()` return a [`BaseMessage`](/sdk/reference/messages#basemessage) object with the updated reactions. ## Read Reaction Data from a Message Any `BaseMessage` exposes reaction data through its `reactions` property: ### Get All Reactions Use the `reactions` property to retrieve the list of reactions on a message. Returns a `List<`[`ReactionCount`](/sdk/reference/auxiliary#reactioncount)`>` containing the reactions, or an empty list if no one has reacted. ```dart theme={null} message.reactions ``` ### Check if the Logged-in User Has Reacted Use the `reactedByMe` property on any `ReactionCount` object to check whether the logged-in user has reacted with that particular emoji. Returns `true` if they have, `false` otherwise. ```dart theme={null} for (ReactionCount reactionCount in message.reactions) { debugPrint("isReactedByMe ${reactionCount.reactedByMe}"); //Return true is logged-in user reacted on that message, otherwise false } ``` ## Fetch Reactions for a Message To get the full list of who reacted with what on a specific message, use `ReactionsRequestBuilder`. You can paginate through results with `fetchNext()` and `fetchPrevious()` (max 100 per request). | Builder Property | Type | Description | | ---------------- | --------- | ------------------------------------------------------------------------------------------------------------- | | `messageId` | `int?` | The message ID to fetch reactions for. Required. | | `reaction` | `String?` | Filter to a specific emoji (e.g., `"\U0001f60a"`). When set, only reactions matching this emoji are returned. | | `limit` | `int` | Number of reactions to fetch per request. Default is `10`. | ### Fetch Next The `fetchNext()` method fetches the next set of reactions for the message. ```dart theme={null} int messageId = 1; ReactionsRequest reactionsRequest = (ReactionsRequestBuilder() ..limit = 30 ..messageId = messageId ).build(); reactionsRequest.fetchNext( onSuccess: (reactions) { for (Reaction reaction in reactions) { debugPrint("Success: $reaction"); } }, onError: (e) { debugPrint("Error: ${e.message}"); }, ); ``` The `fetchNext()` method returns a `List` representing individual user reactions on the message. **On Success** — A list of `Reaction` objects for the message: **Reaction Object (per item in list):** | Parameter | Type | Description | Sample Value | | ----------- | ------ | ------------------------------------------- | --------------------------------------------------------- | | `id` | string | Unique reaction identifier | `"r1"` | | `messageId` | number | ID of the message this reaction belongs to | `1` | | `reaction` | string | The reaction emoji | `"\U0001f634"` | | `uid` | string | UID of the user who reacted | `"cometchat-uid-1"` | | `reactedAt` | number | Epoch timestamp when the reaction was added | `1745554729` | | `reactedBy` | object | User who added the reaction | [See below \u2193](#fetch-next-reaction-reactedby-object) | *** **`reactedBy` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ---------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the user | `"cometchat-uid-1"` | | `name` | string | Display name of the user | `"Andrew Joseph"` | | `link` | string | Profile link | `null` | | `avatar` | string | Avatar URL | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-1.webp"` | | `metadata` | object | Custom metadata | `{}` | | `status` | string | Online status | `"online"` | | `role` | string | User role | `"default"` | | `statusMessage` | string | Status message | `null` | | `tags` | array | User tags | `[]` | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `lastActiveAt` | number | Epoch timestamp of last activity | `1745554700` | | Parameter | Type | Description | Sample Value | | --------- | ------ | ---------------------------- | -------------------------------------------------------------- | | `code` | string | Error code identifier | `"ERR_CHAT_API_FAILURE"` | | `message` | string | Human-readable error message | `"Failed to fetch the requested data."` | | `details` | string | Additional technical details | `"An unexpected error occurred while processing the request."` | ### Fetch Previous The `fetchPrevious()` method fetches the previous set of reactions for the message. ```dart theme={null} int messageId = 1; ReactionsRequest reactionsRequest = (ReactionsRequestBuilder() ..limit = 30 ..messageId = messageId ).build(); reactionsRequest.fetchPrevious( onSuccess: (reactions) { for (Reaction reaction in reactions) { debugPrint("Success: $reaction"); } }, onError: (e) { debugPrint("Error: ${e.message}"); }, ); ``` **On Success** — A list of `Reaction` objects for the message: **Reaction Object (per item in list):** | Parameter | Type | Description | Sample Value | | ----------- | ------ | ------------------------------------------- | ------------------------------------------------------------- | | `id` | string | Unique reaction identifier | `"r1"` | | `messageId` | number | ID of the message this reaction belongs to | `1` | | `reaction` | string | The reaction emoji | `"\U0001f634"` | | `uid` | string | UID of the user who reacted | `"cometchat-uid-1"` | | `reactedAt` | number | Epoch timestamp when the reaction was added | `1745554729` | | `reactedBy` | object | User who added the reaction | [See below \u2193](#fetch-previous-reaction-reactedby-object) | *** **`reactedBy` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ---------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the user | `"cometchat-uid-1"` | | `name` | string | Display name of the user | `"Andrew Joseph"` | | `link` | string | Profile link | `null` | | `avatar` | string | Avatar URL | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-1.webp"` | | `metadata` | object | Custom metadata | `{}` | | `status` | string | Online status | `"online"` | | `role` | string | User role | `"default"` | | `statusMessage` | string | Status message | `null` | | `tags` | array | User tags | `[]` | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `lastActiveAt` | number | Epoch timestamp of last activity | `1745554700` | | Parameter | Type | Description | Sample Value | | --------- | ------ | ---------------------------- | -------------------------------------------------------------- | | `code` | string | Error code identifier | `"ERR_CHAT_API_FAILURE"` | | `message` | string | Human-readable error message | `"Failed to fetch the requested data."` | | `details` | string | Additional technical details | `"An unexpected error occurred while processing the request."` | ## Real-Time Reaction Events Register a `MessageListener` to receive reaction events as they happen. This is how you keep your UI in sync when other users add or remove reactions. ```dart theme={null} class MyClass with MessageListener { String listenerID = "UNIQUE_LISTENER_ID"; MyClass() { CometChat.addMessageListener(listenerID, this); } @override void onMessageReactionAdded(ReactionEvent reactionEvent) { debugPrint("Reaction added ${reactionEvent.reaction}"); } @override void onMessageReactionRemoved(ReactionEvent reactionEvent) { debugPrint("Reaction removed ${reactionEvent.reaction}"); } } ``` Each reaction listener callback receives a `ReactionEvent` object containing: | Parameter | Type | Description | | ----------------- | ----------- | ----------------------------------------------------- | | `reaction` | `Reaction?` | The reaction that was added or removed. | | `receiverId` | `String?` | The UID or GUID of the receiver. | | `receiverType` | `String?` | The type of the receiver (`"user"` or `"group"`). | | `conversationId` | `String?` | The unique conversation identifier. | | `parentMessageId` | `int?` | The ID of the parent message (for threaded messages). | ### Remove the Listener ```dart theme={null} String listenerID = "UNIQUE_LISTENER_ID"; CometChat.removeMessageListener(listenerID); ``` Always remove listeners when they're no longer needed (e.g., in the `dispose()` method). Failing to remove listeners can cause memory leaks and duplicate event handling. ## Update a Message with Reaction Info When you receive a real-time reaction event, you'll want to update the corresponding message object so your UI reflects the change. `CometChatHelper.updateMessageWithReactionInfo()` does this — it takes the `BaseMessage` instance, the `Reaction` event data, and the action type, then returns the updated message. | Parameter | Type | Description | | ----------------- | ------------- | ------------------------------------------------------------------ | | `baseMessage` | `BaseMessage` | The message object to update. | | `messageReaction` | `Reaction` | The reaction event received from the listener. | | `action` | `String` | `ReactionAction.reactionAdded` or `ReactionAction.reactionRemoved` | ```dart theme={null} // Pass the message and Reaction from your listener (e.g. onMessageReactionAdded) Future refreshMessageWithReaction( BaseMessage message, Reaction messageReaction, ) async { // The received reaction event action type: reactionAdded or reactionRemoved var action = ReactionAction.reactionAdded; BaseMessage? modifiedBaseMessage = await CometChatHelper.updateMessageWithReactionInfo( message, messageReaction, action, ); // Use modifiedBaseMessage?.reactions to refresh your UI } ``` After calling this method, use `modifiedBaseMessage?.reactions` to get the latest reactions and refresh your UI. *** ## Next Steps Send text, media, and custom messages to users and groups Listen for incoming messages in real-time and fetch missed messages Create and manage message threads Mention users and groups in messages