> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Reactions

> Add, remove, and manage message reactions in real-time using the CometChat React Native SDK.

<Info>
  **Quick Reference** - Add and remove reactions:

  ```javascript theme={null}
  // Add a reaction
  await CometChat.addReaction("MESSAGE_ID", "😊");

  // Remove a reaction
  await CometChat.removeReaction("MESSAGE_ID", "😊");
  ```
</Info>

<Note>
  Available via: [SDK](/sdk/react-native/reactions) | [REST API](/rest-api/messages/add-reaction) | [UI Kits](/ui-kit/react-native/core-features#reactions)
</Note>

Enhance user engagement in your chat application with message reactions. Users can express their emotions using reactions to messages. This feature allows users to add or remove reactions, and to fetch all reactions on a message. You can also listen to reaction events in real-time. Let's see how to work with reactions in CometChat's SDK.

## Add a Reaction

Users can add a reaction to a message by calling addReaction with the message ID and the reaction emoji.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let messageId = "1";
    let emoji = "😊";

    CometChat.addReaction(messageId, emoji)
    .then((res) => {
      console.log('response', res);
    }).catch(err => {
      console.log('err', err);
    })
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let messageId:string = "1";
    let emoji:string = "😊";

    CometChat.addReaction(messageId, emoji)
    .then((res:CometChat.BaseMessage) => {
      console.log('response', res);
    }).catch((err:CometChat.CometChatException) => {
      console.log('err', err);
    })
    ```
  </Tab>
</Tabs>

<Accordion title="Response">
  **On Success** — `addReaction()` returns the updated message object with the reaction added:

  <span id="add-reaction-message-object" style={{scrollMarginTop: '100px'}} />

  **Message Object:**

  | Parameter        | Type    | Description                            | Sample Value                                 |
  | ---------------- | ------- | -------------------------------------- | -------------------------------------------- |
  | `id`             | string  | Unique message identifier              | `"25327"`                                    |
  | `conversationId` | string  | Conversation identifier                | `"cometchat-uid-6_user_cometchat-uid-7"`     |
  | `receiverId`     | string  | Receiver's UID                         | `"cometchat-uid-7"`                          |
  | `receiverType`   | string  | Type of receiver                       | `"user"`                                     |
  | `type`           | string  | Message type                           | `"text"`                                     |
  | `category`       | string  | Message category                       | `"message"`                                  |
  | `text`           | string  | Message text content                   | `"Message for Reactions"`                    |
  | `sentAt`         | number  | Unix timestamp when sent               | `1772006757`                                 |
  | `deliveredAt`    | number  | Unix timestamp when delivered          | `1772006757`                                 |
  | `readAt`         | number  | Unix timestamp when read               | `1772006757`                                 |
  | `updatedAt`      | number  | Unix timestamp when updated            | `1772006757`                                 |
  | `sender`         | object  | Sender user details                    | [See below ↓](#add-reaction-sender-object)   |
  | `receiver`       | object  | Receiver user details                  | [See below ↓](#add-reaction-receiver-object) |
  | `data`           | object  | Additional message data with reactions | [See below ↓](#add-reaction-data-object)     |
  | `reactions`      | array   | Message reactions (root level)         | `[]`                                         |
  | `mentionedUsers` | array   | Users mentioned in message             | `[]`                                         |
  | `mentionedMe`    | boolean | Whether current user is mentioned      | `false`                                      |

  ***

  <span id="add-reaction-sender-object" style={{scrollMarginTop: '100px'}} />

  **`sender` Object:**

  | Parameter       | Type    | Description                            | Sample Value                                                            |
  | --------------- | ------- | -------------------------------------- | ----------------------------------------------------------------------- |
  | `uid`           | string  | User's unique identifier               | `"cometchat-uid-6"`                                                     |
  | `name`          | string  | User's display name                    | `"Ronald Jerry"`                                                        |
  | `avatar`        | string  | URL to user's avatar                   | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` |
  | `status`        | string  | User's online status                   | `"offline"`                                                             |
  | `role`          | string  | User's role                            | `"default"`                                                             |
  | `lastActiveAt`  | number  | Last active timestamp                  | `1772004288`                                                            |
  | `hasBlockedMe`  | boolean | Whether user has blocked current user  | `false`                                                                 |
  | `blockedByMe`   | boolean | Whether current user blocked this user | `false`                                                                 |
  | `deactivatedAt` | number  | Deactivation timestamp (0 if active)   | `0`                                                                     |
  | `tags`          | array   | User tags                              | `[]`                                                                    |

  ***

  <span id="add-reaction-receiver-object" style={{scrollMarginTop: '100px'}} />

  **`receiver` Object:**

  | Parameter       | Type    | Description                            | Sample Value                                                            |
  | --------------- | ------- | -------------------------------------- | ----------------------------------------------------------------------- |
  | `uid`           | string  | User's unique identifier               | `"cometchat-uid-7"`                                                     |
  | `name`          | string  | User's display name                    | `"Henry Marino"`                                                        |
  | `avatar`        | string  | URL to user's avatar                   | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
  | `status`        | string  | User's online status                   | `"online"`                                                              |
  | `role`          | string  | User's role                            | `"default"`                                                             |
  | `lastActiveAt`  | number  | Last active timestamp                  | `1772005334`                                                            |
  | `hasBlockedMe`  | boolean | Whether user has blocked current user  | `false`                                                                 |
  | `blockedByMe`   | boolean | Whether current user blocked this user | `false`                                                                 |
  | `deactivatedAt` | number  | Deactivation timestamp (0 if active)   | `0`                                                                     |
  | `tags`          | array   | User tags                              | `[]`                                                                    |

  ***

  <span id="add-reaction-data-object" style={{scrollMarginTop: '100px'}} />

  **`data` Object:**

  | Parameter   | Type   | Description     | Sample Value                                      |
  | ----------- | ------ | --------------- | ------------------------------------------------- |
  | `text`      | string | Message text    | `"Message for Reactions"`                         |
  | `reactions` | array  | Reaction counts | [See below ↓](#add-reaction-data-reactions-array) |

  ***

  <span id="add-reaction-data-reactions-array" style={{scrollMarginTop: '100px'}} />

  **`data.reactions` Array (per item):**

  | Parameter     | Type    | Description                  | Sample Value |
  | ------------- | ------- | ---------------------------- | ------------ |
  | `reaction`    | string  | Emoji reaction               | `"😊"`       |
  | `count`       | number  | Number of users who reacted  | `1`          |
  | `reactedByMe` | boolean | Whether current user reacted | `true`       |
</Accordion>

<Note>
  You can react on text message, media message and custom message
</Note>

## Remove a Reaction

Removing a reaction from a message can be done using the `removeReaction` method.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let messageId = "1";
    let emoji = "😊";

    CometChat.removeReaction(messageId, emoji)
    .then((res) => {
      console.log('response', res);
    }).catch(err => {
      console.log('err', err);
    })
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let messageId:string = "1";
    let emoji:string = "😊";

    CometChat.removeReaction(messageId, emoji)
    .then((res:CometChat.BaseMessage) => {
      console.log('response', res);
    }).catch((err:CometChat.CometChatException) => {
      console.log('err', err);
    })
    ```
  </Tab>
</Tabs>

<Accordion title="Response">
  **On Success** — `removeReaction()` returns the updated message object with the reaction removed:

  <span id="remove-reaction-message-object" style={{scrollMarginTop: '100px'}} />

  **Message Object:**

  | Parameter        | Type    | Description                       | Sample Value                                    |
  | ---------------- | ------- | --------------------------------- | ----------------------------------------------- |
  | `id`             | string  | Unique message identifier         | `"25327"`                                       |
  | `conversationId` | string  | Conversation identifier           | `"cometchat-uid-6_user_cometchat-uid-7"`        |
  | `receiverId`     | string  | Receiver's UID                    | `"cometchat-uid-7"`                             |
  | `receiverType`   | string  | Type of receiver                  | `"user"`                                        |
  | `type`           | string  | Message type                      | `"text"`                                        |
  | `category`       | string  | Message category                  | `"message"`                                     |
  | `text`           | string  | Message text content              | `"Message for Reactions"`                       |
  | `sentAt`         | number  | Unix timestamp when sent          | `1772006757`                                    |
  | `deliveredAt`    | number  | Unix timestamp when delivered     | `1772006757`                                    |
  | `readAt`         | number  | Unix timestamp when read          | `1772006757`                                    |
  | `updatedAt`      | number  | Unix timestamp when updated       | `1772006757`                                    |
  | `sender`         | object  | Sender user details               | [See below ↓](#remove-reaction-sender-object)   |
  | `receiver`       | object  | Receiver user details             | [See below ↓](#remove-reaction-receiver-object) |
  | `data`           | object  | Additional message data           | [See below ↓](#remove-reaction-data-object)     |
  | `reactions`      | array   | Message reactions                 | `[]`                                            |
  | `mentionedUsers` | array   | Users mentioned in message        | `[]`                                            |
  | `mentionedMe`    | boolean | Whether current user is mentioned | `false`                                         |

  ***

  <span id="remove-reaction-sender-object" style={{scrollMarginTop: '100px'}} />

  **`sender` Object:**

  | Parameter       | Type    | Description                            | Sample Value                                                            |
  | --------------- | ------- | -------------------------------------- | ----------------------------------------------------------------------- |
  | `uid`           | string  | User's unique identifier               | `"cometchat-uid-6"`                                                     |
  | `name`          | string  | User's display name                    | `"Ronald Jerry"`                                                        |
  | `avatar`        | string  | URL to user's avatar                   | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` |
  | `status`        | string  | User's online status                   | `"offline"`                                                             |
  | `role`          | string  | User's role                            | `"default"`                                                             |
  | `lastActiveAt`  | number  | Last active timestamp                  | `1772004288`                                                            |
  | `hasBlockedMe`  | boolean | Whether user has blocked current user  | `false`                                                                 |
  | `blockedByMe`   | boolean | Whether current user blocked this user | `false`                                                                 |
  | `deactivatedAt` | number  | Deactivation timestamp (0 if active)   | `0`                                                                     |
  | `tags`          | array   | User tags                              | `[]`                                                                    |

  ***

  <span id="remove-reaction-receiver-object" style={{scrollMarginTop: '100px'}} />

  **`receiver` Object:**

  | Parameter       | Type    | Description                            | Sample Value                                                            |
  | --------------- | ------- | -------------------------------------- | ----------------------------------------------------------------------- |
  | `uid`           | string  | User's unique identifier               | `"cometchat-uid-7"`                                                     |
  | `name`          | string  | User's display name                    | `"Henry Marino"`                                                        |
  | `avatar`        | string  | URL to user's avatar                   | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
  | `status`        | string  | User's online status                   | `"online"`                                                              |
  | `role`          | string  | User's role                            | `"default"`                                                             |
  | `lastActiveAt`  | number  | Last active timestamp                  | `1772005334`                                                            |
  | `hasBlockedMe`  | boolean | Whether user has blocked current user  | `false`                                                                 |
  | `blockedByMe`   | boolean | Whether current user blocked this user | `false`                                                                 |
  | `deactivatedAt` | number  | Deactivation timestamp (0 if active)   | `0`                                                                     |
  | `tags`          | array   | User tags                              | `[]`                                                                    |

  ***

  <span id="remove-reaction-data-object" style={{scrollMarginTop: '100px'}} />

  **`data` Object:**

  | Parameter | Type   | Description  | Sample Value              |
  | --------- | ------ | ------------ | ------------------------- |
  | `text`    | string | Message text | `"Message for Reactions"` |
</Accordion>

## Fetch Reactions for a Message

To get all reactions for a specific message, first create a `ReactionsRequest` using `ReactionsRequestBuilder`. You can specify the number of reactions to fetch with `setLimit` with max limit 100. For this, you will require the ID of the message. This ID needs to be passed to the `setMessageId()` method of the builder class. The `setReaction()` will allow you to fetch details for specific reaction or emoji.

| Setting               | Description                                                                                                                                                                                                             |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setMessageId(value)` | Specifies the unique identifier of the message for which you want to fetch reactions. This parameter is mandatory as it tells the SDK which message's reactions are being requested.                                    |
| `setReaction(value)`  | Filters the reactions fetched by the specified reaction type (e.g., "😊", "😂", "👍"). When set, this method will cause the `ReactionsRequest` to only retrieve details of the provided reaction for the given message. |

## Fetch Next

The `fetchNext()` method fetches the next set of reactions for the message.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let limit = 10;
    let messageId = 1;

    let reactionsRequest = new CometChat.ReactionsRequestBuilder()
    .setMessageId(messageId)
    .setLimit(limit)
    .build();

    reactionsRequest.fetchNext().then(
        reactions => {
          console.log("list fetched:", reactions);
        },
        error => {
          console.log('list fetching failed with error:', error);
        },
      );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let limit:number = 10;
    let messageId:number = 1;

    let reactionsRequest = new CometChat.ReactionsRequestBuilder()
    .setMessageId(messageId)
    .setLimit(limit)
    .build();

    reactionsRequest.fetchNext().then(
        (reactions: CometChat.MessageReaction[]) => {
          console.log("list fetched:", reactions);
        },
        (error: CometChat.CometChatException) => {
          console.log('list fetching failed with error:', error);
        },
      );
    ```
  </Tab>
</Tabs>

## Fetch Previous

The `fetchPrevious()` method fetches the previous set of reactions for the message.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let limit = 10;
    let messageId = 1;

    let reactionsRequest = new CometChat.ReactionsRequestBuilder()
    .setMessageId(messageId)
    .setLimit(limit)
    .build();

    reactionsRequest.fetchPrevious().then(
        reactions => {
          console.log("list fetched:", reactions);
        },
        error => {
          console.log('list fetching failed with error:', error);
        },
      );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let limit:number = 10;
    let messageId:number = 1;

    let reactionsRequest = new CometChat.ReactionsRequestBuilder()
    .setMessageId(messageId)
    .setLimit(limit)
    .build();

    reactionsRequest.fetchPrevious().then(
        (reactions: CometChat.MessageReaction[]) => {
          console.log("list fetched:", reactions);
        },
        (error: CometChat.CometChatException) => {
          console.log('list fetching failed with error:', error);
        },
      );
    ```
  </Tab>
</Tabs>

<Accordion title="Response">
  **On Success** — `fetchNext()` or `fetchPrevious()` returns an array of `MessageReaction` objects:

  <span id="fetch-reactions-array" style={{scrollMarginTop: '100px'}} />

  **MessageReaction Array (per item):**

  | Parameter   | Type   | Description                  | Sample Value                                     |
  | ----------- | ------ | ---------------------------- | ------------------------------------------------ |
  | `id`        | string | Unique reaction identifier   | `"20014"`                                        |
  | `messageId` | string | ID of the message reacted to | `"25327"`                                        |
  | `reaction`  | string | Emoji reaction               | `"❤️"`                                           |
  | `uid`       | string | UID of user who reacted      | `"cometchat-uid-7"`                              |
  | `reactedAt` | number | Unix timestamp when reacted  | `1772007024`                                     |
  | `reactedBy` | object | User who reacted             | [See below ↓](#fetch-reactions-reactedby-object) |

  ***

  <span id="fetch-reactions-reactedby-object" style={{scrollMarginTop: '100px'}} />

  **`reactedBy` Object:**

  | Parameter       | Type    | Description                            | Sample Value                                                            |
  | --------------- | ------- | -------------------------------------- | ----------------------------------------------------------------------- |
  | `uid`           | string  | User's unique identifier               | `"cometchat-uid-7"`                                                     |
  | `name`          | string  | User's display name                    | `"Henry Marino"`                                                        |
  | `avatar`        | string  | URL to user's avatar                   | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
  | `status`        | string  | User's online status                   | `"online"`                                                              |
  | `role`          | string  | User's role                            | `"default"`                                                             |
  | `lastActiveAt`  | number  | Last active timestamp                  | `1772007237`                                                            |
  | `hasBlockedMe`  | boolean | Whether user has blocked current user  | `false`                                                                 |
  | `blockedByMe`   | boolean | Whether current user blocked this user | `false`                                                                 |
  | `deactivatedAt` | number  | Deactivation timestamp (0 if active)   | `0`                                                                     |
</Accordion>

## Real-time Reaction Events

Keep the chat interactive with real-time updates for reactions. Register a listener for these events and make your UI responsive.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";

    CometChat.addMessageListener(listenerID, {
        onMessageReactionAdded:(message) => {
          console.log("Reaction added", message);
        },
        onMessageReactionRemoved:(message) => {
          console.log("Reaction removed", message);
        }
      })
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID:string = "UNIQUE_LISTENER_ID";

    CometChat.addMessageListener(listenerID, {
        onMessageReactionAdded:(message: Object) => {
          console.log("Reaction added", message);
        },
        onMessageReactionRemoved:(message: Object) => {
          console.log("Reaction removed", message);
        }
      })
    ```
  </Tab>
</Tabs>

<Accordion title="Response">
  **On Event** — `onMessageReactionAdded` returns the reaction event data:

  <span id="reaction-added-event-object" style={{scrollMarginTop: '100px'}} />

  **Reaction Event Object (onMessageReactionAdded):**

  | Parameter         | Type   | Description                               | Sample Value                                   |
  | ----------------- | ------ | ----------------------------------------- | ---------------------------------------------- |
  | `parentMessageId` | null   | Parent message ID (null for non-threaded) | `null`                                         |
  | `receiverId`      | string | Receiver's UID                            | `"cometchat-uid-6"`                            |
  | `receiverType`    | string | Type of receiver                          | `"user"`                                       |
  | `conversationId`  | string | Conversation identifier                   | `"cometchat-uid-6_user_cometchat-uid-7"`       |
  | `reaction`        | object | Reaction details                          | [See below ↓](#reaction-added-reaction-object) |

  ***

  <span id="reaction-added-reaction-object" style={{scrollMarginTop: '100px'}} />

  **`reaction` Object (onMessageReactionAdded):**

  | Parameter   | Type   | Description                  | Sample Value                                    |
  | ----------- | ------ | ---------------------------- | ----------------------------------------------- |
  | `id`        | string | Unique reaction identifier   | `"20013"`                                       |
  | `messageId` | string | ID of the message reacted to | `"25327"`                                       |
  | `reaction`  | string | Emoji reaction               | `"❤️"`                                          |
  | `uid`       | string | UID of user who reacted      | `"cometchat-uid-7"`                             |
  | `reactedAt` | number | Unix timestamp when reacted  | `1772006766`                                    |
  | `reactedBy` | object | User who reacted             | [See below ↓](#reaction-added-reactedby-object) |

  ***

  <span id="reaction-added-reactedby-object" style={{scrollMarginTop: '100px'}} />

  **`reaction.reactedBy` Object:**

  | Parameter      | Type   | Description              | Sample Value                                                            |
  | -------------- | ------ | ------------------------ | ----------------------------------------------------------------------- |
  | `uid`          | string | User's unique identifier | `"cometchat-uid-7"`                                                     |
  | `name`         | string | User's display name      | `"Henry Marino"`                                                        |
  | `avatar`       | string | URL to user's avatar     | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
  | `status`       | string | User's online status     | `"online"`                                                              |
  | `role`         | string | User's role              | `"default"`                                                             |
  | `lastActiveAt` | number | Last active timestamp    | `1772005334`                                                            |

  ***

  **On Event** — `onMessageReactionRemoved` returns the reaction event data:

  <span id="reaction-removed-event-object" style={{scrollMarginTop: '100px'}} />

  **Reaction Event Object (onMessageReactionRemoved):**

  | Parameter         | Type   | Description                               | Sample Value                                     |
  | ----------------- | ------ | ----------------------------------------- | ------------------------------------------------ |
  | `parentMessageId` | null   | Parent message ID (null for non-threaded) | `null`                                           |
  | `receiverId`      | string | Receiver's UID                            | `"cometchat-uid-6"`                              |
  | `receiverType`    | string | Type of receiver                          | `"user"`                                         |
  | `conversationId`  | string | Conversation identifier                   | `"cometchat-uid-6_user_cometchat-uid-7"`         |
  | `reaction`        | object | Reaction details                          | [See below ↓](#reaction-removed-reaction-object) |

  ***

  <span id="reaction-removed-reaction-object" style={{scrollMarginTop: '100px'}} />

  **`reaction` Object (onMessageReactionRemoved):**

  | Parameter   | Type   | Description                            | Sample Value                                      |
  | ----------- | ------ | -------------------------------------- | ------------------------------------------------- |
  | `id`        | string | Unique reaction identifier             | `"20013"`                                         |
  | `messageId` | string | ID of the message                      | `"25327"`                                         |
  | `reaction`  | string | Emoji reaction                         | `"❤️"`                                            |
  | `uid`       | string | UID of user who removed reaction       | `"cometchat-uid-7"`                               |
  | `reactedAt` | number | Unix timestamp when originally reacted | `1772006766`                                      |
  | `reactedBy` | object | User who removed reaction              | [See below ↓](#reaction-removed-reactedby-object) |

  ***

  <span id="reaction-removed-reactedby-object" style={{scrollMarginTop: '100px'}} />

  **`reaction.reactedBy` Object:**

  | Parameter      | Type   | Description              | Sample Value                                                            |
  | -------------- | ------ | ------------------------ | ----------------------------------------------------------------------- |
  | `uid`          | string | User's unique identifier | `"cometchat-uid-7"`                                                     |
  | `name`         | string | User's display name      | `"Henry Marino"`                                                        |
  | `avatar`       | string | URL to user's avatar     | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
  | `status`       | string | User's online status     | `"online"`                                                              |
  | `role`         | string | User's role              | `"default"`                                                             |
  | `lastActiveAt` | number | Last active timestamp    | `1772005334`                                                            |
</Accordion>

## Removing a Reaction Listener

To stop listening for reaction events, remove the listener as follows:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";

    CometChat.removeMessageListener(listenerID);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID:string = "UNIQUE_LISTENER_ID";

    CometChat.removeMessageReactionListener(listenerID);
    ```
  </Tab>
</Tabs>

<Warning>
  Always remove your reaction listeners when they are no longer needed — for example, when a component unmounts or a screen is navigated away from. Failing to do so can cause memory leaks and unexpected behavior from stale listeners. Use `CometChat.removeMessageListener("LISTENER_ID")` in your cleanup logic (e.g., `useEffect` return function or `componentWillUnmount`).
</Warning>

## Get Reactions List

To retrieve the list of reactions reacted on particular message, you can use the `message.getReactions()` method. This method will return an array containing the reactions, or an empty array if no one reacted on the message.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    message.getReactions()
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    message.getReactions()
    ```
  </Tab>
</Tabs>

<Accordion title="Response">
  **On Success** — `getReactions()` returns an array of reaction counts:

  | Parameter     | Type    | Description                  | Sample Value |
  | ------------- | ------- | ---------------------------- | ------------ |
  | `reaction`    | string  | Emoji reaction               | `"❤️"`       |
  | `count`       | number  | Number of users who reacted  | `1`          |
  | `reactedByMe` | boolean | Whether current user reacted | `true`       |
</Accordion>

## Check if Logged-in User has Reacted on Message

To check if the logged-in user has reacted on a particular message or not, You can use the `getReactedByMe()` method on any `ReactionCount` object instance. This method will return a boolean value, `true` if the logged-in user has reacted on that message, otherwise `false`.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let reactions = message.getReactions();
    reactions.forEach((reaction) => {
    reaction.getReactedByMe(); //Returns true if logged-in user reacted on that message, otherwise false
    })
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let reactions:CometChat.ReactionCount[] = message.getReactions();
    reactions.forEach((reaction:CometChat.ReactionCount) => {
    reaction.getReactedByMe(); //Returns true if logged-in user reacted on that message, otherwise false
    })
    ```
  </Tab>
</Tabs>

## Update Message With Reaction Info

When a user adds or removes a reaction, you will receive a real-time event. Once you receive the real time event you would want to update the message with the latest reaction information. To do so you can use the `updateMessageWithReactionInfo()` method.

The `updateMessageWithReactionInfo()` method provides a seamless way to update the reactions on a message instance (`BaseMessage`) in real-time. This method ensures that when a reaction is added or removed from a message, the BaseMessage object's `getReactions()` property reflects this change immediately.

When you receive a real-time reaction event (`MessageReaction`), call the `updateMessageWithReactionInfo()` method, passing the BaseMessage instance (`message`), event data (`MessageReaction`) and reaction event action type (`CometChat.REACTION_ACTION.REACTION_ADDED` or `CometChat.REACTION_ACTION.REACTION_REMOVED`) that corresponds to the message being reacted to.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    // The message to which the reaction is related
    let message = ...;

    // The reaction event data received in real-time
    let messageReaction = ...;

    // The recieved reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED
    let action = CometChat.REACTION_ACTION.REACTION_ADDED;

    let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
    baseMessage, 
    messageReaction, 
    action
    );   
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    // The message to which the reaction is related
    let message: CometChat.BaseMessage = ...;

    // The reaction event data received in real-time
    let messageReaction: CometChat.MessageReaction = ...;

    // The recieved reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED
    let action: CometChat.REACTION_ACTION = CometChat.REACTION_ACTION.REACTION_ADDED;

    let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
    baseMessage, 
    messageReaction, 
    action
    );
    ```
  </Tab>
</Tabs>

<Accordion title="Response">
  **On Success (REACTION\_ADDED)** — `updateMessageWithReactionInfo()` returns the updated message. Calling `getReactions()` on it shows:

  | Parameter     | Type    | Description                  | Sample Value |
  | ------------- | ------- | ---------------------------- | ------------ |
  | `reaction`    | string  | Emoji reaction               | `"👍"`       |
  | `count`       | number  | Number of users who reacted  | `1`          |
  | `reactedByMe` | boolean | Whether current user reacted | `false`      |

  **On Success (REACTION\_REMOVED)** — When the last reaction is removed, `getReactions()` returns an empty array: `[]`
</Accordion>

## Best Practices

<AccordionGroup>
  <Accordion title="Use unique listener IDs">
    Always use unique, descriptive listener IDs (e.g., `"ChatScreen_ReactionListener"`) to avoid conflicts with other listeners in your app. This makes it easier to manage and remove specific listeners when needed.
  </Accordion>

  <Accordion title="Clean up listeners on unmount">
    Remove reaction listeners in your component's cleanup phase (`useEffect` return function or `componentWillUnmount`). Orphaned listeners can lead to memory leaks and unexpected UI updates on unmounted components.
  </Accordion>

  <Accordion title="Update messages with reaction info in real-time">
    When you receive a real-time reaction event, always call `updateMessageWithReactionInfo()` to keep your local message state in sync. This avoids stale reaction counts and ensures the UI reflects the latest state.
  </Accordion>

  <Accordion title="Handle errors gracefully">
    Wrap `addReaction` and `removeReaction` calls in proper error handling. Network issues or invalid message IDs can cause failures — show appropriate feedback to the user rather than silently failing.
  </Accordion>

  <Accordion title="Paginate reaction fetches">
    When fetching reactions for messages with many reactions, use `fetchNext()` with a reasonable `setLimit()` value. Avoid fetching all reactions at once to keep performance smooth, especially on lower-end devices.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Reaction not appearing after addReaction call">
    Verify that the `messageId` is valid and the user is logged in. Check the error callback for details — common causes include invalid message IDs, network connectivity issues, or the user not being a participant in the conversation.
  </Accordion>

  <Accordion title="Real-time reaction events not firing">
    Ensure you have registered the message listener with `CometChat.addMessageListener()` before the reaction event occurs. Also confirm that the listener ID is unique and hasn't been accidentally removed or overwritten by another listener registration.
  </Accordion>

  <Accordion title="Reaction count not updating in UI">
    After receiving a real-time reaction event, you must call `CometChat.CometChatHelper.updateMessageWithReactionInfo()` to update the message object. Simply receiving the event does not automatically update the `BaseMessage` instance — you need to explicitly apply the update and re-render.
  </Accordion>

  <Accordion title="getReactedByMe() always returns false">
    Make sure you are calling `getReactedByMe()` on the `ReactionCount` objects returned by `message.getReactions()`, not on the raw reaction event data. Also verify that the logged-in user is the same user who added the reaction.
  </Accordion>

  <Accordion title="fetchNext() or fetchPrevious() returns empty array">
    Confirm that the `messageId` passed to `ReactionsRequestBuilder.setMessageId()` is correct and that the message actually has reactions. If using `setReaction()` to filter by a specific emoji, ensure the emoji string matches exactly (including any variation selectors).
  </Accordion>
</AccordionGroup>

## Next Steps

Explore related features to build a richer messaging experience:

<CardGroup cols={2}>
  <Card title="Send a Message" icon="paper-plane" href="/sdk/react-native/send-message">
    Learn how to send text, media, and custom messages to users and groups.
  </Card>

  <Card title="Receive Messages" icon="inbox" href="/sdk/react-native/receive-messages">
    Set up real-time message listeners and fetch message history.
  </Card>

  <Card title="Mentions" icon="at" href="/sdk/react-native/mentions">
    Tag users in messages to notify and engage them directly.
  </Card>

  <Card title="Interactive Messages" icon="hand-pointer" href="/sdk/react-native/interactive-messages">
    Send rich, interactive messages with forms, cards, and custom elements.
  </Card>
</CardGroup>