Reactions - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-sdk-react-native`
Import	`import { CometChat } from "@cometchat/chat-sdk-react-native";`
Key Methods	`addMessageListener()`, `addReaction()`, `removeMessageListener()`, `removeReaction()`
Key Classes	`BaseMessage`, `CometChatException`, `CometChatHelper`, `MessageListener`, `REACTION_ACTION`, `ReactionCount`
Prerequisites	SDK initialized via `CometChat.init()` and a logged-in user via `CometChat.login()`
Primary output	`addReaction()` / `removeReaction()` → `Promise<CometChat.BaseMessage>` — the message with its updated reaction set
Constraints	Reactions resolve to the message, not a reaction object. Enumerate with `ReactionsRequest` (`fetchNext()` → `Promise<Reaction[]>`). Every `addListener()` needs a matching `removeListener()` with the same listener ID — unremoved listeners leak and fire after unmount.
Related	Send a Message · Receive Messages · Real-Time Listeners
Full reference	`Reaction` · `ReactionCount` · `ReactionEvent` · `BaseMessage`

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: (reactionEvent) => {},
  onMessageReactionRemoved: (reactionEvent) => {}
}));

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.

TypeScript
JavaScript

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);
})

let messageId = "1";
let emoji = "😊";

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

Remove a Reaction

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

TypeScript
JavaScript

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);
})

let messageId = "1";
let emoji = "😊";

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

Both addReaction() and removeReaction() return a BaseMessage object with the updated reactions.

Read Reaction Data from a Message

Any 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 objects, or an empty array if no one has reacted.

TypeScript
JavaScript

message.getReactions()

message.getReactions()

Check if the Logged-in User Has Reacted

Call getReactedByMe() on any ReactionCount object to check whether the logged-in user has reacted with that particular emoji. Returns true if they have, false otherwise.

TypeScript
JavaScript

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
})

let reactions = message.getReactions();
reactions.forEach((reaction) => {
  reaction.getReactedByMe(); //Returns true if 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() (default 10, maximum 1000 per request). A larger limit is sent as 1000.

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. Default 10, maximum 1000.

Fetch Next

TypeScript
JavaScript

let limit:number = 10;
let messageId:number = 1;

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

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

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);
    },
  );

Fetch Previous

TypeScript
JavaScript

let limit:number = 10;
let messageId:number = 1;

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

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

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);
    },
  );

Offline Behaviour

With offline support enabled, ReactionsRequest.fetchNext() and fetchPrevious() first deliver onCachedReactions from the device when you pass a ReactionFetchListener (empty when nothing was recorded), then onServerReactions with the live page to reconcile by reaction id. Use a separate ReactionsRequest for each direction. Offline, a read ends with onError with code FAILED_TO_FETCH after the cached page.

Builder method	Offline
`setLimit()`	Cached
`setMessageId()`	Cached
`setReaction()`	Cached

The cached phase replays the page this request last received from the server online, in the same direction. It does not re-run these settings as a query against the cache.

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. Override onMessageReactionAdded and onMessageReactionRemoved. Each receives a ReactionEvent, whose getReaction() returns the Reaction and whose getReceiverId(), getReceiverType(), getConversationId() and getParentMessageId() identify where it happened.

TypeScript
JavaScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, new CometChat.MessageListener({
    onMessageReactionAdded:(reactionEvent: CometChat.ReactionEvent) => {
      console.log("Reaction added", reactionEvent.getReaction().getReaction());
    },
    onMessageReactionRemoved:(reactionEvent: CometChat.ReactionEvent) => {
      console.log("Reaction removed", reactionEvent.getReaction().getReaction());
    }
  }))

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, new CometChat.MessageListener({
    onMessageReactionAdded:(reactionEvent) => {
      console.log("Reaction added", reactionEvent.getReaction().getReaction());
    },
    onMessageReactionRemoved:(reactionEvent) => {
      console.log("Reaction removed", reactionEvent.getReaction().getReaction());
    }
  }))

Remove the Listener

Remove the listener with the same listener ID:

TypeScript
JavaScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

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.

Update Message With Reaction Info

When a user adds or removes a reaction, you will receive a real-time event. Once you receive it, you would want to update the message with the latest reaction information. To do so, use CometChat.CometChatHelper.updateMessageWithReactionInfo(). Pass the BaseMessage the reaction belongs to, the Reaction from the event (reactionEvent.getReaction()), and the action: CometChat.REACTION_ACTION.REACTION_ADDED from onMessageReactionAdded or CometChat.REACTION_ACTION.REACTION_REMOVED from onMessageReactionRemoved. It returns the message with its getReactions() updated.

TypeScript
JavaScript

// The message to which the reaction is related
let message: CometChat.BaseMessage = ...;

// The reaction from the real-time ReactionEvent
let messageReaction: CometChat.Reaction = reactionEvent.getReaction();

// CometChat.REACTION_ACTION.REACTION_ADDED or CometChat.REACTION_ACTION.REACTION_REMOVED
let action: CometChat.REACTION_ACTION = CometChat.REACTION_ACTION.REACTION_ADDED;

let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
message,
messageReaction,
action
);

// The message to which the reaction is related
let message = ...;

// The reaction from the real-time ReactionEvent
let messageReaction = reactionEvent.getReaction();

// CometChat.REACTION_ACTION.REACTION_ADDED or CometChat.REACTION_ACTION.REACTION_REMOVED
let action = CometChat.REACTION_ACTION.REACTION_ADDED;

let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
message,
messageReaction,
action
);

On success, this method returns a 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`	`Reaction`	The reaction from the `ReactionEvent` received by the listener
`action`	`REACTION_ACTION`	`CometChat.REACTION_ACTION.REACTION_ADDED` or `CometChat.REACTION_ACTION.REACTION_REMOVED`

Next Steps

Send Messages

Send text, media, and custom messages to users and groups

Receive Messages

Listen for incoming messages in real-time and fetch missed messages

Mentions

Mention specific users in messages

Threaded Messages

Organize conversations with message threads

​Add a Reaction

​Remove a Reaction

​Read Reaction Data from a Message

​Get All Reactions

​Check if the Logged-in User Has Reacted

​Fetch Reactions for a Message

​Fetch Next

​Fetch Previous

​Offline Behaviour

​Real-Time Reaction Events

​Remove the Listener

​Update Message With Reaction Info

​Next Steps

Send Messages

Receive Messages

Mentions

Threaded Messages

Add a Reaction

Remove a Reaction

Read Reaction Data from a Message

Get All Reactions

Check if the Logged-in User Has Reacted

Fetch Reactions for a Message

Fetch Next

Fetch Previous

Offline Behaviour

Real-Time Reaction Events

Remove the Listener

Update Message With Reaction Info

Next Steps