> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-fix-react-js-thread-subscription-pin-sav.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Information

> Show who has received and read a message, with per-recipient delivery and read timestamps.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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\"]>"
      }
    }
  }
  ```
</Accordion>

`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.

<Note>
  **`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.
</Note>

## Where It Fits

You usually do not render this component. [`CometChatMessageList`](/ui-kit/react-native/message-list)
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.

<Note>
  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.
</Note>

## Minimal Render

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    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}
        />
      );
    }
    ```
  </Tab>
</Tabs>

`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`](/ui-kit/react-native/message-list). Otherwise the preview at the top of this
screen reads differently from the bubble the user came from.

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

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

See [Text Formatters](/ui-kit/react-native/custom-text-formatter-guide) for writing one.

## Actions and Events

### Callback Props

#### onError

Fires when fetching the receipts fails.

```tsx lines theme={null}
onError?: (error: CometChat.CometChatException) => void
```

```tsx lines theme={null}
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.

```tsx lines theme={null}
<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.

```tsx lines theme={null}
<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](/ui-kit/react-native/custom-text-formatter-guide).

| | |
| - | - |
| 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

<CardGroup cols={2}>
  <Card title="Message List" icon="comments" href="/ui-kit/react-native/message-list">
    Where the Info option is raised
  </Card>

  <Card title="Text Formatters" icon="pen-nib" href="/ui-kit/react-native/custom-text-formatter-guide">
    Write the formatters this screen renders
  </Card>

  <Card title="Delivery & Read Receipts (SDK)" icon="check-double" href="/sdk/react-native/delivery-read-receipts">
    The SDK methods underneath this component
  </Card>

  <Card title="Component Styling" icon="palette" href="/ui-kit/react-native/component-styling">
    How the theme resolves into these styles
  </Card>
</CardGroup>