Saved Messages - CometChat Docs

AI Integration Quick Reference

{
  "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"
  }
}

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.

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.

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.

TypeScript
JavaScript

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

import { CometChatSavedMessages } from "@cometchat/chat-uikit-react-native";

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

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.

TypeScript
JavaScript

<CometChatSavedMessages
  onItemPress={(message: CometChat.BaseMessage) => {
    const conversationId = message.getConversationId();
    const receiverType = message.getReceiverType(); // "user" or "group"
    const receiverId = message.getReceiverId();

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

<CometChatSavedMessages
  onItemPress={(message) => {
    navigateToConversation({
      receiverType: message.getReceiverType(),
      receiverId: message.getReceiverId(),
      conversationId: message.getConversationId(),
    });
  }}
/>

Reading save state yourself

TypeScript
JavaScript

import { isSaved } from "@cometchat/chat-uikit-react-native";

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

import { isSaved } from "@cometchat/chat-uikit-react-native";

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

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.

Actions and Events

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

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.

Common Patterns

A saved-messages tab

TypeScript
JavaScript

<Tab.Screen
  name="Saved"
  children={() => (
    <CometChatSavedMessages
      onItemPress={(message: CometChat.BaseMessage) => openConversation(message)}
    />
  )}
/>

<Tab.Screen
  name="Saved"
  children={() => (
    <CometChatSavedMessages onItemPress={(message) => openConversation(message)} />
  )}
/>

Read-only list

TypeScript
JavaScript

<CometChatSavedMessages hideUnsaveMessageOption />

<CometChatSavedMessages hideUnsaveMessageOption />

Next Steps

Pinned Messages

The conversation-wide, everyone-sees-it counterpart

Message List

Where the Save option is raised

Save A Message (SDK)

The SDK methods underneath this component

Events

Every UI Kit event, in one place

​Where It Fits

​Minimal Render

​Props

​Routing a tap back to its conversation

​Reading save state yourself

​Actions and Events

​Common Patterns

​A saved-messages tab

​Read-only list

​Next Steps

Pinned Messages

Message List

Save A Message (SDK)

Events

Where It Fits

Minimal Render

Props

Routing a tap back to its conversation

Reading save state yourself

Actions and Events

Common Patterns

A saved-messages tab

Read-only list

Next Steps