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.

AI Integration Quick Reference

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

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

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

JavaScript

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

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

JavaScript

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

message.getReactions()

JavaScript

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

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

JavaScript

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

TypeScript

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

JavaScript

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

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

JavaScript

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

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.

TypeScript

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

JavaScript

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

Remove the Listener

TypeScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

JavaScript

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

TypeScript

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

JavaScript

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

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	MessageReaction	The reaction event received from 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