Edit A Message

Edit text and custom messages, listen for real-time edit events, and retrieve missed edits using the CometChat React Native SDK.

Quick Reference - Edit a text message:

let receiverID = "RECEIVER_UID";
let messageText = "Updated message text";
let receiverType = CometChat.RECEIVER_TYPE.USER;
let textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);
textMessage.setId(MESSAGE_ID);

CometChat.editMessage(textMessage).then(
  message => console.log("Message Edited", message),
  error => console.log("Edit failed:", error)
);

Available via: SDK | REST API | UI Kits

While editing a message is straightforward, receiving events for edited messages with CometChat has two parts:

1. Adding a listener to receive real-time message edits when your app is running.
2. Calling a method to retrieve missed message edits when your app was not running.

Edit a Message

In other words, as a sender, how do I edit a message?

To edit a message, you can use the editMessage() method. This method takes an object of the BaseMessage class. At the moment, you are only allowed to edit TextMessage and CustomMessage. Thus, the BaseMessage object must either be a Text or a Custom Message.

Add/Update Tags

While editing a message, you can update the tags associated with the message. Use the setTags() method to do so. The tags added while editing a message will replace the tags set when the message was sent.

JavaScript (Text)

let tags = ["pinnedMessage"];

textMessage.setTags(tags);

JavaScript (Custom)

let tags = ["pinnedMessage"];

customMessage.setTags(tags);

TypeScript (Text)

let tags: Array<String> = ["pinnedMessage"];

textMessage.setTags(tags);

TypeScript (Custom)

let tags: Array<String> = ["pinnedMessage"];

customMessage.setTags(tags);

Once the message object is ready, you can use the editMessage() method and pass the message object to it.

JavaScript

let receiverID = "RECEIVER_UID";
let messageText = "Hello world!";
let receiverType = CometChat.RECEIVER_TYPE.USER;
let messageId = "MESSAGE_ID_OF_THE_MESSAGE_TO_BE_EDITED";
let textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);

textMessage.setId(messageId);

CometChat.editMessage(textMessage).then(
message => {
  console.log("Message Edited", message);
}, error => {
  console.log("Message editing failed with error:", error);
}
);

TypeScript

let receiverID: string = "RECEIVER_UID";
let messageText: string = "Hello world!";
let receiverType: string = CometChat.RECEIVER_TYPE.USER;
let messageId: number = 1;
let textMessage: CometChat.TextMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);

textMessage.setId(messageId);

CometChat.editMessage(textMessage).then(
  (message: CometChat.TextMessage) => {
      console.log("Message Edited", message);
  }, (error: CometChat.CometChatException) => {
      console.log("Message editing failed with error:", error);
  }
);

The object of the edited message will be returned in the onSuccess() callback method of the listener. The message object will contain the editedAt field set with the timestamp of the time the message was edited. This will help you identify if the message was edited while iterating through the list of messages. The editedBy field is also set to the UID of the user who edited the message.

By default, CometChat allows certain roles to edit a message.

User Role	Conversation Type	Edit Capabilities
Message Sender	One-on-One Conversation	Messages they have sent.
Message Sender	Group Conversation	Messages they have sent.
Group Owner	Group Conversation	All messages in the group.
Group Moderator	Group Conversation	All messages in the group.

Real-time Message Edit Events

In other words, as a recipient, how do I know when someone has edited their message when my app is running?

To receive real-time events for a message being edited, you need to override the onMessageEdited() method of the MessageListener class.

JavaScript

var listenerID = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(
listenerID,
new CometChat.MessageListener({
  onMessageEdited: message => {
    console.log("Edited Message", message);
  }
})
);  

TypeScript

let listenerID: string = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(
listenerID,
new CometChat.MessageListener({
  onMessageEdited: (message: CometChat.BaseMessage) => {
    console.log("Edited Message", message);
  }
})
);

Always remove your message listeners when the component unmounts to prevent memory leaks and unexpected behavior. Call CometChat.removeMessageListener("UNIQUE_LISTENER_ID") in your cleanup function (e.g., in a useEffect return or componentWillUnmount).

Missed Message Edit Events

In other words, as a recipient, how do I know when someone edited their message when my app was not running?

When you retrieve the list of previous messages, for the message that was edited, the editedAt and the editedBy fields will be set. Also, for example, if the total number of messages for a conversation is 100, and the message with message ID 50 was edited, the message with ID 50 will have the editedAt and the editedBy fields set whenever it is pulled from the history. Additionally, the 101st message will be an [Action] message informing you that the message with ID 50 has been edited.

For the message edited event, in the Action object received, the following fields can help you get the relevant information:

1. action - edited
2. actionOn - Updated message object with the edited details.
3. actionBy - User object containing the details of the user who has edited the message.
4. actionFor - User/group object having the details of the receiver to which the message was sent.

To edit a message, you need to be either the sender of the message or the admin/moderator of the group in which the message was sent.

Best Practices

• Always verify the message type (TextMessage or CustomMessage) before attempting an edit, as other message types are not supported.
• Use the editedAt and editedBy fields to display edit indicators in your UI so users know a message has been modified.
• Register your message edit listener early in the component lifecycle to avoid missing real-time edit events.
• When updating tags via setTags(), remember that the new tags fully replace any previously set tags — merge existing tags manually if you need to preserve them.

Troubleshooting

• Edit fails with permission error: Ensure the current user is the message sender, or a group owner/moderator for group messages.
• onMessageEdited not firing: Confirm that CometChat.addMessageListener() has been called with a unique listener ID and that the listener has not been removed prematurely.
• Edited message not reflected in history: After editing, re-fetch or update the local message list. The editedAt field on the message object confirms the edit was applied.
• Tags not updating: Make sure you call setTags() on the message object before passing it to editMessage(). Tags set during editing replace all previous tags.

Next Steps

Delete a Message

Remove messages from conversations for users or groups.

Send a Message

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

Receive Messages

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

Threaded Messages

Send and receive replies within message threads.