Saved Messages

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

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

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

JavaScript

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

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

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

JavaScript

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

Reading save state yourself

TypeScript

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

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

JavaScript

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

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

JavaScript

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

Read-only list

TypeScript

<CometChatSavedMessages hideUnsaveMessageOption />

JavaScript

<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