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

# Reactions

> Add, remove, and fetch message reactions in real-time using the CometChat React Native SDK. Includes listener events and helper methods for updating UI.

<Accordion title="AI Integration Quick Reference">
  ```javascript theme={null}
  let messageId = "MESSAGE_ID";

  // Add a reaction
  await CometChat.addReaction(messageId, "😊");

  // Remove a reaction
  await CometChat.removeReaction(messageId, "😊");

  // Fetch reactions for a message
  const request = new CometChat.ReactionsRequestBuilder()
    .setMessageId(messageId).setLimit(10).build();
  const reactions = await request.fetchNext();

  // Listen for reaction events
  CometChat.addMessageListener("LISTENER_ID", new CometChat.MessageListener({
    onMessageReactionAdded: (reaction) => {},
    onMessageReactionRemoved: (reaction) => {}
  }));
  ```
</Accordion>

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.

## Add a Reaction

Call `addReaction()` with a message ID and an emoji string.

<Tabs>
  <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>

  <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>
</Tabs>

## Remove a Reaction

Call `removeReaction()` with the same message ID and emoji.

<Tabs>
  <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>

  <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>
</Tabs>

Both `addReaction()` and `removeReaction()` return a [`BaseMessage`](/sdk/reference/messages#basemessage) object with the updated reactions.

## Read Reaction Data from a Message

Any [`BaseMessage`](/sdk/reference/messages#basemessage) exposes reaction data through two methods:

### Get All Reactions

Use `getReactions()` to retrieve the list of reactions on a message. Returns an array of [`ReactionCount`](/sdk/reference/auxiliary#reactioncount) objects, or an empty array if no one has reacted.

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

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

### Check if the Logged-in User Has Reacted

Call `getReactedByMe()` on any [`ReactionCount`](/sdk/reference/auxiliary#reactioncount) object to check whether the logged-in user has reacted with that particular emoji. Returns `true` if they have, `false` otherwise.

<Tabs>
  <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>

  <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>
</Tabs>

## 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 Method        | Description                                                                                           |
| --------------------- | ----------------------------------------------------------------------------------------------------- |
| `setMessageId(value)` | The message ID to fetch reactions for. Required.                                                      |
| `setReaction(value)`  | Filter to a specific emoji (e.g., `"😊"`). When set, only reactions matching this emoji are returned. |
| `setLimit(value)`     | Number of reactions to fetch per request. Max 100.                                                    |

### Fetch Next

<Tabs>
  <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>

  <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>
</Tabs>

### Fetch Previous

<Tabs>
  <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>

  <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>
</Tabs>

## 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.

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

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

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

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

### Remove the Listener

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

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

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

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

<Warning>
  Always remove listeners when they're no longer needed (e.g., on component unmount or screen navigation). In React Native, place this in a cleanup function inside `useEffect` or in `componentWillUnmount`. Failing to remove listeners can cause memory leaks and duplicate event handling.
</Warning>

## 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="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 received reaction event real-time action type
    let action: CometChat.REACTION_ACTION = CometChat.REACTION_ACTION.REACTION_ADDED;

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

  <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 received reaction event real-time action type
    let action = CometChat.REACTION_ACTION.REACTION_ADDED;

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

On success, this method returns a [`BaseMessage`](/sdk/reference/messages#basemessage) object. After calling this method, use `modifiedBaseMessage.getReactions()` to get the latest reactions and refresh your UI.

| Parameter         | Type              | Description                                                                                |
| ----------------- | ----------------- | ------------------------------------------------------------------------------------------ |
| `message`         | `BaseMessage`     | The message object to update                                                               |
| `messageReaction` | `MessageReaction` | The reaction event received from the listener                                              |
| `action`          | `REACTION_ACTION` | `CometChat.REACTION_ACTION.REACTION_ADDED` or `CometChat.REACTION_ACTION.REACTION_REMOVED` |

***

## Next Steps

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

  <Card title="Receive Messages" icon="inbox" href="/sdk/react-native/receive-messages">
    Listen for incoming messages in real-time and fetch missed messages
  </Card>

  <Card title="Mentions" icon="at" href="/sdk/react-native/mentions">
    Mention specific users in messages
  </Card>

  <Card title="Threaded Messages" icon="comments" href="/sdk/react-native/threaded-messages">
    Organize conversations with message threads
  </Card>
</CardGroup>