Message Information - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatMessageInformation",
  "package": "@cometchat/chat-uikit-react-native",
  "import": "import { CometChatMessageInformation } from \"@cometchat/chat-uikit-react-native\";",
  "description": "Shows delivery and read information for one message. In a group it lists every recipient with their own timestamps; in a one-on-one chat it shows a single Delivered / Read pair.",
  "openedBy": "CometChatMessageList raises it from the message options sheet. Render it yourself only for a custom screen.",
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The message to describe" },
      "template": { "type": "CometChatMessageTemplate", "default": "undefined", "note": "Template used to draw the message preview. The options sheet passes the list's own template, which already carries its formatters" },
      "textFormatters": { "type": "CometChatTextFormatter[]", "default": "undefined", "note": "Only needed when the screen is rendered on its own — a passed template already carries them" }
    },
    "callbacks": {
      "onError": "(error: CometChat.CometChatException) => void"
    },
    "customization": {
      "title": { "type": "string", "default": "localized" },
      "BubbleView": "(message: CometChat.BaseMessage) => JSX.Element",
      "ListItemView": "(message: CometChat.BaseMessage, receipt: { sender: CometChat.User | CometChat.Group; sentAt: number; deliveredAt: number; readAt: number }) => JSX.Element",
      "receiptDatePattern": "(timestamp: number) => string",
      "LoadingStateView": "() => JSX.Element",
      "ErrorStateView": "() => JSX.Element",
      "EmptyStateView": "() => JSX.Element",
      "style": "DeepPartial<CometChatTheme[\"messageInformationStyles\"]>"
    }
  }
}

CometChatMessageInformation answers one question about one message: who got it, and who read it. In a group, it fetches the receipts from the server and lists every recipient with their own delivered and read timestamps. In a one-on-one chat there is only one recipient, so it shows a single Delivered / Read pair read from the message itself. Both are kept live — a receipt that arrives while the screen is open updates in place.

textFormatters requires @cometchat/chat-uikit-react-native 5.5.1 or later. It does not exist in 5.5.0. Everything else on this page works on either version.

Where It Fits

You usually do not render this component. CometChatMessageList raises it from the Info option in the message options sheet, inside a bottom sheet, and hands it the template the list is already using — so the preview at the top matches the bubble the user long-pressed. Render it yourself when you want message information on its own screen — a navigation route rather than a sheet, for example. That is the one case where you pass textFormatters explicitly: without the list’s template, the screen has no other way to learn your formatters, and your own token would reach the preview unrecognised.

In a group the receipts come from the server on open (CometChat.getMessageReceipts()), so the screen shows a loading state first. In a one-on-one chat the timestamps are already on the message and render immediately.

Minimal Render

TypeScript

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

function MessageInfoScreen({ message }: { message: CometChat.BaseMessage }) {
  return (
    <CometChatMessageInformation
      message={message}
    />
  );
}

message is the only required prop. The screen draws no header controls of its own — just a centred title — so put it on a route whose navigator supplies the back affordance, or render it inside a sheet or modal you close yourself.

Rendering Your Own Formatters

On its own screen the component has no template to inherit from, so pass the same array you give CometChatMessageList. Otherwise the preview at the top of this screen reads differently from the bubble the user came from.

TypeScript

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

<CometChatMessageInformation
  message={message}
  textFormatters={textFormatters} // the same array passed to CometChatMessageList
/>

See Text Formatters for writing one.

Actions and Events

Callback Props

onError

Fires when fetching the receipts fails.

onError?: (error: CometChat.CometChatException) => void

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

<CometChatMessageInformation
  message={message}
  onError={(error: CometChat.CometChatException) => {
    console.error("MessageInformation error:", error);
  }}
/>

Custom View Slots

Slot	Signature	Replaces
`BubbleView`	`(message) => JSX.Element`	The message preview at the top of the screen
`ListItemView`	`(message, receipt) => JSX.Element`	One recipient row, including its timestamps
`LoadingStateView`	`() => JSX.Element`	The shimmer shown while receipts load
`ErrorStateView`	`() => JSX.Element`	The error state
`EmptyStateView`	`() => JSX.Element`	Adds an empty state. There is no default one — without this the screen renders nothing when no receipt has arrived yet

receiptDatePattern is the smaller hook: keep the default rows and change only how each timestamp is written.

<CometChatMessageInformation
  message={message}
  receiptDatePattern={(timestamp: number) =>
    new Date(timestamp * 1000).toLocaleString()
  }
/>

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 screen without touching it.

<CometChatMessageInformation
  message={message}
  style={{
    containerStyle: { backgroundColor: "#FEEDE1" },
    titleStyle: { color: "#F76808" },
    receiptItemStyle: {
      titleStyle: { color: "#F76808" },
    },
  }}
/>

Style Properties

Property	Type	Applies to
`containerStyle`	`ViewStyle`	The screen container
`titleContainerStyle`	`ViewStyle`	The header row
`titleStyle`	`TextStyle`	The header title
`messageBubbleContainerStyle`	`ViewStyle`	The preview area around the bubble
`receiptItemStyle`	`object`	One recipient row — `containerStyle`, `titleStyle`, `subtitleStyle`, `avatarStyle`, `emojiStyle`, `receiptStyles`
`skeletonStyle`	`object`	The loading shimmer — `linearGradientColors`, `shimmerBackgroundColor`, `shimmerOpacity`, `speed`
`errorStateStyle`	`object`	The error state — `containerStyle`, `icon`, `iconStyle`, `iconContainerStyle`, `titleStyle`, `subtitleStyle`

Props

message is required. Everything else is optional.

message

The message to describe.


Type	`CometChat.BaseMessage`
Default	—

template

Template used to draw the preview at the top. The message options sheet passes the list’s own template, which already carries its formatters.


Type	`CometChatMessageTemplate`
Default	—

textFormatters

Text formatters for the message preview. Only needed when this screen is rendered on its own — a passed template already carries them. See Text Formatters.


Type	`CometChatTextFormatter[]`
Default	Default formatters from the data source

title

Header title.


Type	`string`
Default	Localized — “Message Info” in English

onError

Called when fetching the receipts fails.


Type	`(error: CometChat.CometChatException) => void`
Default	—

BubbleView

Replaces the message preview at the top.


Type	`(message: CometChat.BaseMessage) => JSX.Element`
Default	The template’s bubble

ListItemView

Replaces one recipient row.


Type	`(message: CometChat.BaseMessage, receipt: { sender: CometChat.User \| CometChat.Group; sentAt: number; deliveredAt: number; readAt: number }) => JSX.Element`
Default	Built-in row

receiptDatePattern

Formats each delivered / read timestamp.


Type	`(timestamp: number) => string`
Default	Localized time

LoadingStateView

Replaces the loading shimmer.


Type	`() => JSX.Element`
Default	Built-in skeleton

ErrorStateView

Replaces the error state.


Type	`() => JSX.Element`
Default	Built-in error view

EmptyStateView

Adds an empty state, shown while no recipient has received the message yet. There is no default — without this the screen renders nothing in that condition.


Type	`() => JSX.Element`
Default	— (renders nothing)

style

Per-instance style override, merged over the theme.


Type	`DeepPartial<CometChatTheme["messageInformationStyles"]>`
Default	Theme values

Next Steps

Message List

Where the Info option is raised

Text Formatters

Write the formatters this screen renders

Delivery & Read Receipts (SDK)

The SDK methods underneath this component

Component Styling

How the theme resolves into these styles

​Where It Fits

​Minimal Render

​Rendering Your Own Formatters

​Actions and Events

​Callback Props

​onError

​Custom View Slots

​Styling

​Style Properties

​Props

​message

​template

​textFormatters

​title

​onError

​BubbleView

​ListItemView

​receiptDatePattern

​LoadingStateView

​ErrorStateView

​EmptyStateView

​style

​Next Steps

Message List

Text Formatters

Delivery & Read Receipts (SDK)

Component Styling

Where It Fits

Minimal Render

Rendering Your Own Formatters

Actions and Events

Callback Props

onError

Custom View Slots

Styling

Style Properties

Props

message

template

textFormatters

title

onError

BubbleView

ListItemView

receiptDatePattern

LoadingStateView

ErrorStateView

EmptyStateView

style

Next Steps