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 re-reads it on every reconnection — no app code required"
  },
  "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>"
    }
  }
}

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

Actions and Events

Callback Props

onItemPress

Fires when a saved row is tapped. Because the rows come from different conversations, it hands you a source alongside the message so you can open the right chat.

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

function SavedWithRouting() {
  const handleItemPress = (message: CometChat.BaseMessage, source) => {
    navigation.navigate("Messages", {
      receiverType: source?.receiverType, // "user" | "group"
      receiverId: source?.receiverId,
      messageId: String(message.getId()),
    });
  };

  return <CometChatSavedMessages onItemPress={handleItemPress} />;
}

source is null when the conversation could not be resolved. Otherwise it carries:

Field	Type	Description
receiverType	string	"user" or "group" — drives the open-conversation call
receiverId	string	The GUID, or the UID of the other party in a 1-1
name	string	Plain display name — what the row title shows
label	string	Display text with its sigil, e.g. #engineering or @alice
avatar	string?	Group icon or user avatar, when the payload carries a hydrated party

You can also read the routing off the message itself:

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

onBack

Fires when the back affordance in the header is pressed.

<CometChatSavedMessages onBack={() => navigation.goBack()} />

Events

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

The panel keeps itself current without a manual refresh, so a save made on a phone appears on that user’s tablet on its own.

A save is per-viewer. The same message reads saved for the user who saved it and unsaved for everybody else — it is never a property of the message globally.

---

Custom View Slots

Slot	Signature	Replaces
ItemView	(message: CometChat.BaseMessage) => JSX.Element	Entire saved row

The empty, error and loading states are not view slots on this component. Restyle them through style.emptyStateStyle and style.errorStateStyle instead — see Styling.

ItemView

Replace the whole row. The default row is a conversation row — avatar, source conversation name, and a one-line preview — so a replacement usually wants the same three pieces.

import { CometChatSavedMessages, useTheme } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text } from "react-native";

function CustomSavedRow() {
  const theme = useTheme();

  const getItemView = (message: CometChat.BaseMessage) => (
    <View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
      <Text style={{ ...theme.typography.body.medium, color: theme.color.textPrimary }}>
        {message.getReceiverId()}
      </Text>
      <Text
        numberOfLines={1}
        style={{ ...theme.typography.caption1.regular, color: theme.color.textSecondary }}>
        {(message as CometChat.TextMessage).getText?.()}
      </Text>
    </View>
  );

  return <CometChatSavedMessages ItemView={getItemView} />;
}

---

Common Patterns

A saved-messages tab

Because the list is account-wide, a tab or drawer entry is the natural home for it.

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

Read-only list

<CometChatSavedMessages hideUnsaveMessageOption />

A custom title and close icon

<CometChatSavedMessages
  title="Bookmarks"
  style={{ closeButtonIcon: require("./assets/chevron-left.png") }}
/>

---

Styling

The component uses the theme system from CometChatThemeProvider. Pass a style prop to customize the appearance. Every default value resolves from a semantic theme token, so retheming the kit restyles this panel without touching it.

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

function StyledSavedMessages() {
  return (
    <CometChatSavedMessages
      style={{
        containerStyle: {
          backgroundColor: "#FEEDE1",
        },
        titleStyle: {
          color: "#F76808",
        },
        previewIconStyle: {
          tintColor: "#F76808",
        },
      }}
    />
  );
}

SavedMessagesStyle deliberately has no itemStyle. The rows are conversation rows and take their chrome from theme.conversationStyles.itemStyle — the same tokens the conversation list uses — so the two surfaces cannot drift apart. Restyle the rows there and both update together.

Style Properties

Property	Type	Description
containerStyle	ViewStyle	Root container
headerContainerStyle	ViewStyle	Header row holding the back control and title
titleStyle	TextStyle	Header title text
closeButtonIconStyle	ImageStyle	Size and tint of the back control
closeButtonIcon	ImageSourcePropType | JSX.Element	Replaces the back icon itself
previewIconStyle	ImageStyle	Type glyph in the row subtitle — image, video, audio, file, sticker
previewIconContainerStyle	ViewStyle	Wrapper around that glyph
menuIconStyle	ImageStyle	Glyph in the long-press menu (Unsave)
emptyStateStyle	object	containerStyle, titleStyle, subTitleStyle, iconStyle
errorStateStyle	object	containerStyle, titleStyle, subTitleStyle, iconStyle

---

Props

All props are optional. There is deliberately no user or group prop — see Minimal Render.

limit

Page size for the fetch.

Type	number
Default	30

The server rejects a value above 100.

---

onBack

Called when the back affordance is pressed.

Type	() => void
Default	—

---

onItemPress

Called when a row is pressed. source identifies which conversation the message belongs to.

Type	(message: CometChat.BaseMessage, source: SavedMessageSource | null) => void
Default	—

The source fields are listed under Callback Props.

---

hideUnsaveMessageOption

Hides Unsave in the row’s long-press menu.

Type	boolean
Default	false

---

ItemView

Replaces the default row entirely.

Type	(message: CometChat.BaseMessage) => JSX.Element
Default	—

---

title

Panel title.

Type	string
Default	Localized “Saved Messages”

---

style

Per-instance style overrides, merged over the theme’s savedMessagesStyles.

Type	DeepPartial<SavedMessagesStyle>
Default	—

See Styling.

---

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