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

# Edit Message

> Edit CometChat text and custom messages in React Native apps by message ID and listen for real-time edit events.

<Accordion title="AI Integration Quick Reference">
  ```javascript theme={null}
  let receiverID = "UID";
  let receiverType = CometChat.RECEIVER_TYPE.USER;
  let messageId = "MESSAGE_ID";

  // Edit a text message
  const textMessage = new CometChat.TextMessage(receiverID, "Updated text", receiverType);
  textMessage.setId(messageId);
  await CometChat.editMessage(textMessage);

  // Listen for real-time edits
  CometChat.addMessageListener("edits", new CometChat.MessageListener({
    onMessageEdited: (message) => console.log("Edited:", message)
  }));
  ```
</Accordion>

Editing a message is straightforward. Receiving edit events has two parts:

1. Adding a listener for [real-time edits](#real-time-message-edit-events) when your app is running
2. Fetching [missed edits](#missed-message-edit-events) when your app was offline

## Edit a Message

Use `editMessage()` with a [`TextMessage`](/sdk/reference/messages#textmessage) or [`CustomMessage`](/sdk/reference/messages#custommessage) object. Set the message ID using `setId()`.

### Add/Update Tags

Use `setTags()` to update tags when editing. New tags replace existing ones.

<Tabs>
  <Tab title="Text Message (TypeScript)">
    ```typescript theme={null}
    let tags: Array<String> = ["pinnedMessage"];

    textMessage.setTags(tags);
    ```
  </Tab>

  <Tab title="Text Message (JavaScript)">
    ```javascript theme={null}
    let tags = ["pinnedMessage"];

    textMessage.setTags(tags);
    ```
  </Tab>

  <Tab title="Custom Message (TypeScript)">
    ```typescript theme={null}
    let tags: Array<String> = ["pinnedMessage"];

    customMessage.setTags(tags);
    ```
  </Tab>

  <Tab title="Custom Message (JavaScript)">
    ```javascript theme={null}
    let tags = ["pinnedMessage"];

    customMessage.setTags(tags);
    ```
  </Tab>
</Tabs>

Once the message object is ready, call `editMessage()`.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    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);
      }
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
    }
    );
    ```

    Alternatively, you can use the `async/await` syntax:

    ```javascript theme={null}
    try {
      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);

      const message = await CometChat.editMessage(textMessage);
      console.log("Message Edited", message);
    } catch (error) {
      console.log("Message editing failed with error:", error);
    }
    ```
  </Tab>
</Tabs>

The edited message object is returned with `editedAt` (timestamp) and `editedBy` (UID of editor) fields set.

The `editMessage()` method returns a [`BaseMessage`](/sdk/reference/messages#basemessage) object (or a subclass like [`TextMessage`](/sdk/reference/messages#textmessage)).

Relevant fields to access on the returned message:

| Field    | Getter          | Return Type | Description                            |
| -------- | --------------- | ----------- | -------------------------------------- |
| editedAt | `getEditedAt()` | `number`    | Timestamp when the message was edited  |
| editedBy | `getEditedBy()` | `string`    | UID of the user who edited the message |

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

Message editing in CometChat is controlled by -

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

Use `onMessageEdited` in `MessageListener` to receive real-time edit events.

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

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

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

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

<Warning>
  Always remove message listeners when they're no longer needed (e.g., on component unmount or page navigation). Failing to remove listeners can cause memory leaks and duplicate event handling.

  ```javascript theme={null}
  CometChat.removeMessageListener("UNIQUE_LISTENER_ID");
  ```
</Warning>

The `onMessageEdited` callback receives a [`BaseMessage`](/sdk/reference/messages#basemessage) object with the `editedAt` and `editedBy` fields set.

Relevant fields to access on the returned message:

| Field    | Getter          | Return Type | Description                            |
| -------- | --------------- | ----------- | -------------------------------------- |
| editedAt | `getEditedAt()` | `number`    | Timestamp when the message was edited  |
| editedBy | `getEditedBy()` | `string`    | UID of the user who edited the message |

## Missed Message Edit Events

When fetching message history, edited messages have `editedAt` and `editedBy` fields set. Additionally, an [`Action`](/sdk/reference/messages#action) message is created when a message is edited.

The [`Action`](/sdk/reference/messages#action) object contains:

* `action` — `edited`
* `actionOn` — Updated message object
* `actionBy` — User who edited the message
* `actionFor` — Receiver (User/Group)

<Note>
  You must be the message sender or a group admin/moderator to edit a message.
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Delete a Message" icon="trash" href="/sdk/react-native/delete-message">
    Remove messages from conversations
  </Card>

  <Card title="Send Messages" icon="paper-plane" href="/sdk/react-native/send-message">
    Send text, media, and custom messages
  </Card>

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

  <Card title="Receive Messages" icon="envelope-open" href="/sdk/react-native/receive-messages">
    Listen for incoming messages in real time
  </Card>
</CardGroup>