Skip to content
4 changes: 3 additions & 1 deletion docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -1110,6 +1110,7 @@
"ui-kit/react-native/extensions"
]
},
"ui-kit/react-native/calling-integration",
"ui-kit/react-native/call-features",
"ui-kit/react-native/campaigns"
]
Expand Down Expand Up @@ -1173,7 +1174,8 @@
{
"group": "Migration Guide",
"pages": [
"ui-kit/react-native/upgrading-from-v4"
"ui-kit/react-native/upgrading-from-v4",
"ui-kit/react-native/property-changes"
]
},
"ui-kit/react-native/troubleshooting",
Expand Down
4 changes: 3 additions & 1 deletion ui-kit/react-native/campaigns.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
CometChat Campaigns enables you to send rich, interactive notifications to users through an in-app notification feed. Each notification is rendered as a native card using the **CometChat Cards** library — supporting images, text, buttons, layouts, and interactive actions.

<Note>
Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react-native/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns.
Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react-native/overview) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns.
</Note>

<Frame>
Expand Down Expand Up @@ -53,6 +53,7 @@

### Card Schema JSON Example

{/* vale off */}
```json
{
"version": "1.0",
Expand Down Expand Up @@ -90,6 +91,7 @@
}
}
```
{/* vale on */}

The above JSON renders as:

Expand All @@ -97,7 +99,7 @@
<img src="/images/announcement.png" />
</Frame>

The schema supports **20 element types** (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table) and **9 action types** (openUrl, chatWithUser, chatWithGroup, sendMessage, copyToClipboard, downloadFile, initiateCall, apiCall, customCallback).

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'progressBar'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'codeBlock'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'iconButton'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'openUrl'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'sendMessage'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'downloadFile'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'initiateCall'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'apiCall'?

Check warning on line 102 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L102

Did you really mean 'customCallback'?

---

Expand Down
33 changes: 32 additions & 1 deletion ui-kit/react-native/message-list.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: "Message List"
description: "Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features."
description: "Display sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features."
---
<Accordion title="AI Integration Quick Reference">
{/* vale off */}
```json
{
"component": "CometChatMessageList",
Expand All @@ -26,17 +27,17 @@
},
"callbacks": {
"onThreadRepliesPress": "(messageObject: CometChat.BaseMessage, messageBubbleView: () => JSX.Element | null) => void",
"onError": "(error: CometChat.CometChatException) => void",

Check warning on line 30 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L30

Did you really mean 'onError'?
"onReactionPress": "(reaction: CometChat.ReactionCount, messageObject: CometChat.BaseMessage) => void",
"onReactionLongPress": "(reaction: CometChat.ReactionCount, messageObject: CometChat.BaseMessage) => void",
"onReactionListItemPress": "(reaction: CometChat.Reaction, messageObject: CometChat.BaseMessage) => void",
"onAddReactionPress": "() => void",
"onSuggestedMessageClick": "(suggestion: string) => void",
"onLoad": "(messageList: CometChat.BaseMessage[]) => void",

Check warning on line 36 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L36

Did you really mean 'onLoad'?
"onEmpty": "() => void"

Check warning on line 37 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L37

Did you really mean 'onEmpty'?
},
"visibility": {
"receiptsVisibility": { "type": "boolean", "default": true },

Check warning on line 40 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L40

Did you really mean 'receiptsVisibility'?
"avatarVisibility": { "type": "boolean", "default": true },
"hideError": { "type": "boolean", "default": false },
"hideTimestamp": { "type": "boolean", "default": false },
Expand All @@ -61,6 +62,7 @@
"alignment": { "type": "MessageListAlignmentType", "values": ["leftAligned", "standard"], "default": "standard" },
"scrollToBottomOnNewMessage": { "type": "boolean", "default": false },
"startFromUnreadMessages": { "type": "boolean", "default": false },
"loadLastAgentConversation": { "type": "boolean", "default": false, "note": "Loads the most recent existing agent conversation on start" },
"streamingSpeed": { "type": "number", "default": "undefined", "note": "AI response streaming speed in ms" }
},
"sound": {
Expand All @@ -68,7 +70,7 @@
"customSoundForMessages": { "type": "audio source", "default": "built-in" }
},
"ai": {
"suggestedMessages": { "type": "string[]", "note": "Predefined prompts for AI assistant chats" },

Check warning on line 73 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L73

Did you really mean 'suggestedMessages'?
"aiAssistantTools": { "type": "CometChatAIAssistantTools", "note": "Tool actions for AI assistant" },
"quickReactionList": { "type": "string[]", "default": "predefined reactions" },
"streamingSpeed": { "type": "number", "default": "undefined", "note": "AI response streaming speed in ms" }
Expand Down Expand Up @@ -117,11 +119,12 @@
}
}
```
{/* vale on */}
</Accordion>

## Where It Fits

`CometChatMessageList` renders a scrollable, real-time message feed for a user or group conversation. Wire it alongside `CometChatMessageHeader` and `CometChatMessageComposer` to build a standard chat view.

Check warning on line 127 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L127

Did you really mean 'scrollable'?

```tsx lines
import { useState, useEffect } from "react";
Expand Down Expand Up @@ -248,7 +251,7 @@
}
```

#### onError

Check warning on line 254 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L254

Did you really mean 'onError'?

Fires on internal errors (network failure, auth issue, SDK exception).

Expand Down Expand Up @@ -293,7 +296,7 @@
}
```

#### onLoad

Check warning on line 299 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L299

Did you really mean 'onLoad'?

Fires when messages are successfully fetched and loaded.

Expand All @@ -312,7 +315,7 @@

### Global UI Events

`CometChatUIEventHandler` emits events subscribable from anywhere in the application. Subscribe in a `useEffect` and unsubscribe on cleanup.

Check warning on line 318 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L318

Did you really mean 'subscribable'?

| Event | Fires when | Payload |
| --- | --- | --- |
Expand Down Expand Up @@ -381,7 +384,7 @@
| `ErrorView` | `() => JSX.Element` | Error state |
| `NewMessageIndicatorView` | `() => JSX.Element` | New messages indicator |
| `templates` | `CometChatMessageTemplate[]` | Message bubble rendering |
| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in messages |

Check warning on line 387 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L387

Did you really mean 'textFormatters'?

### HeaderView

Expand Down Expand Up @@ -514,7 +517,7 @@
}
```

### datePattern

Check warning on line 520 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L520

Did you really mean 'datePattern'?

Custom format for message timestamps.

Expand All @@ -539,15 +542,15 @@
return (
<CometChatMessageList
user={chatUser}
datePattern={generateDateString}

Check warning on line 545 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L545

Did you really mean 'datePattern'?
/>
);
}
```

### textFormatters

Check warning on line 551 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L551

Did you really mean 'textFormatters'?

Custom text formatters for message content.

Check warning on line 553 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L553

Did you really mean 'formatters'?

<Frame>
<img src="/images/e2732868-mentions_message_bubble-fccf9cbdd63a54c2f734803e4480418a.png" />
Expand Down Expand Up @@ -612,8 +615,8 @@
<CometChatMessageList
user={chatUser}
receiptsVisibility={false}
avatarVisibility={false}

Check warning on line 618 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L618

Did you really mean 'avatarVisibility'?
hideTimestamp={true}

Check warning on line 619 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L619

Did you really mean 'hideTimestamp'?
hideGroupActionMessages={true}
/>
);
Expand Down Expand Up @@ -672,6 +675,23 @@
}
```

### Load last agent conversation

Resume the most recent AI agent conversation on start:

```tsx lines
import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function AgentChat() {
return (
<CometChatMessageList
user={agentUser}
loadLastAgentConversation={true}
/>
);
}
```

---

## Styling
Expand Down Expand Up @@ -885,7 +905,7 @@

---

### hideError

Check warning on line 908 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L908

Did you really mean 'hideError'?

Hides the error state view.

Expand Down Expand Up @@ -1039,6 +1059,17 @@

---

### loadLastAgentConversation

Automatically loads the most recent agent conversation when set to `true`.

| | |
| --- | --- |
| Type | `boolean` |
| Default | `false` |

---

### LoadingView

Custom component displayed during the loading state.
Expand Down Expand Up @@ -1206,7 +1237,7 @@

---

### searchKeyword

Check warning on line 1240 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L1240

Did you really mean 'searchKeyword'?

Keyword to highlight in message text.

Expand Down Expand Up @@ -1261,7 +1292,7 @@

---

### addTemplates

Check warning on line 1295 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L1295

Did you really mean 'addTemplates'?

Additional message templates to append to the default templates.

Expand Down Expand Up @@ -1294,7 +1325,7 @@

---

### streamingSpeed

Check warning on line 1328 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L1328

Did you really mean 'streamingSpeed'?

Speed in milliseconds for AI response streaming animation.

Expand All @@ -1318,12 +1349,12 @@

### textFormatters

Custom text formatters for message content.

Check warning on line 1352 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L1352

Did you really mean 'formatters'?

| | |
| --- | --- |
| Type | `CometChatTextFormatter[]` |
| Default | Default formatters from data source |

Check warning on line 1357 in ui-kit/react-native/message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/message-list.mdx#L1357

Did you really mean 'formatters'?

---

Expand Down
2 changes: 1 addition & 1 deletion ui-kit/react-native/property-changes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -663,7 +663,7 @@ description: "Comprehensive reference of new, renamed, and removed properties fo
<Card title="Theming" icon="palette" href="/ui-kit/react-native/theme">
Customize colors, fonts, and styles with the theme provider
</Card>
<Card title="Getting Started" icon="rocket" href="/ui-kit/react-native/getting-started">
<Card title="Getting Started" icon="rocket" href="/ui-kit/react-native/overview">
Set up the v5 UI Kit from scratch
</Card>
</CardGroup>