Reactions

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

Quick Reference - Add and remove reactions:

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

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

Available via: SDK | REST API | UI Kits

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.

JavaScript

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

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

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

Response

On Success — addReaction() returns the updated message object with the reaction added:

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 ↓
receiver	object	Receiver user details	See below ↓
data	object	Additional message data with reactions	See below ↓
reactions	array	Message reactions (root level)	[]
mentionedUsers	array	Users mentioned in message	[]
mentionedMe	boolean	Whether current user is mentioned	false

---

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	[]

---

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	[]

---

data Object:

Parameter	Type	Description	Sample Value
text	string	Message text	"Message for Reactions"
reactions	array	Reaction counts	See below ↓

---

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

You can react on text message, media message and custom message

Remove a Reaction

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

JavaScript

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

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

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

Response

On Success — removeReaction() returns the updated message object with the reaction removed:

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 ↓
receiver	object	Receiver user details	See below ↓
data	object	Additional message data	See below ↓
reactions	array	Message reactions	[]
mentionedUsers	array	Users mentioned in message	[]
mentionedMe	boolean	Whether current user is mentioned	false

---

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	[]

---

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	[]

---

data Object:

Parameter	Type	Description	Sample Value
text	string	Message text	"Message for Reactions"

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.

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

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

Fetch Previous

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

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

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

Response

On Success — fetchNext() or fetchPrevious() returns an array of MessageReaction objects:

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 ↓

---

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

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.

JavaScript

let listenerID = "UNIQUE_LISTENER_ID";

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

TypeScript

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

Response

On Event — onMessageReactionAdded returns the reaction event data:

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

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

Removing a Reaction Listener

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

JavaScript

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

TypeScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.removeMessageReactionListener(listenerID);

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

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.

JavaScript

message.getReactions()

TypeScript

message.getReactions()

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

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.

JavaScript

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Returns true if logged-in user reacted on that message, otherwise false
})

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

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.

JavaScript

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

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

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: []

Best Practices

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.

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.

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.

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.

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.

Troubleshooting

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.

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.

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.

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.

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

Next Steps

Explore related features to build a richer messaging experience:

Send a Message

Learn how to send text, media, and custom messages to users and groups.

Receive Messages

Set up real-time message listeners and fetch message history.

Mentions

Tag users in messages to notify and engage them directly.

Interactive Messages

Send rich, interactive messages with forms, cards, and custom elements.