> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Saved Messages

> Display the logged-in user's saved messages across every conversation, with unsave and jump-to-message actions.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatSavedMessages",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatSavedMessages } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Lists every message the logged-in user has saved, newest save first. A save is private and spans all conversations, so there is no user or group prop.",
    "requires": {
      "dashboardFlag": "Save Messages must be enabled for your app in the CometChat Dashboard",
      "resolution": "The kit reads the flag at login and on every reconnect — no app code required. Force a re-read with refreshPinSaveFeatures()"
    },
    "props": {
      "data": {
        "limit": { "type": "number", "default": 30, "note": "Page size for the fetch; the SDK caps it at 100" }
      },
      "callbacks": {
        "onBack": "() => void",
        "onItemPress": "(message: CometChat.BaseMessage, source: SavedMessageSource | null) => void"
      },
      "visibility": {
        "hideUnsaveMessageOption": { "type": "boolean", "default": false }
      },
      "customization": {
        "ItemView": "(message: CometChat.BaseMessage) => JSX.Element",
        "title": { "type": "string", "default": "localized" },
        "style": "DeepPartial<SavedMessagesStyle>"
      }
    },
    "helpers": {
      "isSaved": "(message) => boolean — savedAt is per-viewer, always about the logged-in user"
    }
  }
  ```
</Accordion>

`CometChatSavedMessages` lists every message the logged-in user has saved, newest save first. Unlike a
pin, a save is **private and spans conversations** — nobody else can see it, and the list is not scoped
to a single chat.

<Warning>
  **Save Messages must be enabled for your app in the CometChat Dashboard.** Until it is, the Save
  option never renders and this panel has nothing to show. The UI Kit reads that flag itself at login
  and on every reconnect — there is no app code to write.
</Warning>

## Where It Fits

Because the list is account-wide, this panel belongs at app level — a tab, a drawer entry, or a
profile screen — not inside a single conversation.

## Minimal Render

There is deliberately no `user` or `group` prop. Scoping it to one conversation would defeat the point.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChatSavedMessages } from "@cometchat/chat-uikit-react-native";

    <CometChatSavedMessages
      onBack={() => navigation.goBack()}
      onItemPress={(message: CometChat.BaseMessage, source) => {
        // `source` carries the conversation the message came from
        openConversation(message, source);
      }}
    />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import { CometChatSavedMessages } from "@cometchat/chat-uikit-react-native";

    <CometChatSavedMessages
      onBack={() => navigation.goBack()}
      onItemPress={(message, source) => {
        openConversation(message, source);
      }}
    />
    ```
  </Tab>
</Tabs>

## Props

| Property                  | Type                              | Default   | Description                                                                                  |
| ------------------------- | --------------------------------- | --------- | -------------------------------------------------------------------------------------------- |
| `limit`                   | `number`                          | `30`      | Page size for the fetch. The SDK rejects a value above 100.                                  |
| `onBack`                  | `() => void`                      | —         | Called when the back affordance is pressed.                                                  |
| `onItemPress`             | `(message, source) => void`       | —         | Called when a row is pressed. `source` identifies which conversation the message belongs to. |
| `hideUnsaveMessageOption` | `boolean`                         | `false`   | Hides Unsave in the row menu.                                                                |
| `ItemView`                | `(message) => JSX.Element`        | —         | Replaces the default row entirely.                                                           |
| `title`                   | `string`                          | localized | Panel title.                                                                                 |
| `style`                   | `DeepPartial<SavedMessagesStyle>` | —         | Style overrides.                                                                             |

## Routing a tap back to its conversation

Because the rows come from different conversations, `onItemPress` hands you a `source` alongside the
message. If you build a custom `ItemView`, the message itself carries the same context.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatSavedMessages
      onItemPress={(message: CometChat.BaseMessage) => {
        const conversationId = message.getConversationId();
        const receiverType = message.getReceiverType(); // "user" or "group"
        const receiverId = message.getReceiverId();

        navigateToConversation({ receiverType, receiverId, conversationId });
      }}
    />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    <CometChatSavedMessages
      onItemPress={(message) => {
        navigateToConversation({
          receiverType: message.getReceiverType(),
          receiverId: message.getReceiverId(),
          conversationId: message.getConversationId(),
        });
      }}
    />
    ```
  </Tab>
</Tabs>

## Reading save state yourself

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    import { isSaved } from "@cometchat/chat-uikit-react-native";

    if (isSaved(message)) {
      // The logged-in user saved this one
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    import { isSaved } from "@cometchat/chat-uikit-react-native";

    if (isSaved(message)) {
      // The logged-in user saved this one
    }
    ```
  </Tab>
</Tabs>

<Note>
  `savedAt` is **per-viewer**. The same message reads saved for the user who saved it and unsaved for
  everybody else — so `isSaved()` is always a statement about the logged-in user, never about the
  message globally.
</Note>

## Actions and Events

| Event                                 | Fires when                                 |
| ------------------------------------- | ------------------------------------------ |
| `ccMessageSaved` / `ccMessageUnsaved` | This device saved or unsaved.              |
| `onMessageSaved` / `onMessageUnsaved` | The same user saved on **another** device. |

<Note>
  The SDK listener never fires on the device that performed the save — that device already has the
  resolved message. The panel updates from the local event there, and from the SDK event everywhere
  else, so a save on a phone appears on a tablet without a refresh.
</Note>

## Common Patterns

### A saved-messages tab

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <Tab.Screen
      name="Saved"
      children={() => (
        <CometChatSavedMessages
          onItemPress={(message: CometChat.BaseMessage) => openConversation(message)}
        />
      )}
    />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    <Tab.Screen
      name="Saved"
      children={() => (
        <CometChatSavedMessages onItemPress={(message) => openConversation(message)} />
      )}
    />
    ```
  </Tab>
</Tabs>

### Read-only list

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatSavedMessages hideUnsaveMessageOption />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    <CometChatSavedMessages hideUnsaveMessageOption />
    ```
  </Tab>
</Tabs>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Pinned Messages" icon="thumbtack" href="/docs/ui-kit/react-native/pinned-messages">
    The conversation-wide, everyone-sees-it counterpart
  </Card>

  <Card title="Message List" icon="comments" href="/docs/ui-kit/react-native/message-list">
    Where the Save option is raised
  </Card>

  <Card title="Save A Message (SDK)" icon="bookmark" href="/docs/sdk/react-native/save-message">
    The SDK methods underneath this component
  </Card>

  <Card title="Events" icon="tower-broadcast" href="/docs/ui-kit/react-native/events">
    Every UI Kit event, in one place
  </Card>
</CardGroup>