diff --git a/docs.json b/docs.json
index f2ad5f2c5..72cca131b 100644
--- a/docs.json
+++ b/docs.json
@@ -1125,6 +1125,7 @@
"ui-kit/react-native/extensions"
]
},
+ "ui-kit/react-native/calling-integration",
"ui-kit/react-native/call-features",
"ui-kit/react-native/campaigns"
]
@@ -1177,6 +1178,7 @@
"ui-kit/react-native/guide-group-chat",
"ui-kit/react-native/guide-threaded-messages",
"ui-kit/react-native/guide-search-messages",
+ "ui-kit/react-native/guide-message-privately",
"ui-kit/react-native/guide-block-unblock-user",
"ui-kit/react-native/custom-text-formatter-guide",
"ui-kit/react-native/mentions-formatter-guide",
@@ -1188,7 +1190,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",
diff --git a/ui-kit/react-native/campaigns.mdx b/ui-kit/react-native/campaigns.mdx
index ff6d26c24..d45e81990 100644
--- a/ui-kit/react-native/campaigns.mdx
+++ b/ui-kit/react-native/campaigns.mdx
@@ -6,7 +6,7 @@ description: "Deliver targeted, rich notifications to users via an in-app notifi
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.
-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.
diff --git a/ui-kit/react-native/guide-message-privately.mdx b/ui-kit/react-native/guide-message-privately.mdx
new file mode 100644
index 000000000..a5ed2a15c
--- /dev/null
+++ b/ui-kit/react-native/guide-message-privately.mdx
@@ -0,0 +1,214 @@
+---
+title: "Message Privately"
+sidebarTitle: "Message Privately"
+description: "Start private one-to-one chats from CometChat React Native UI Kit group conversations using the built-in message option and openChat event."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react-native` |
+| Key components | `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
+| Trigger | Long-press a message in a group chat → "Message Privately" |
+| Event | `openChat` via `CometChatUIEventHandler.addUIListener` |
+| Prop | `hideMessagePrivatelyOption` on `CometChatMessageList` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/examples/SampleApp) |
+| Related | [Message List](/ui-kit/react-native/message-list) · [All Guides](/ui-kit/react-native/guide-overview) |
+
+
+
+Message Privately lets users start a direct 1:1 conversation with a group member from within a group chat. The user long-presses a message, selects "Message Privately", and the UIKit opens a private conversation with the message sender.
+
+Before starting, complete the [Getting Started](/ui-kit/react-native/react-native-cli-integration) guide.
+
+---
+
+## How It Works
+
+The feature is built into `CometChatMessageList`. When a user selects "Message Privately" from the message long-press menu:
+
+1. The UIKit fetches the message sender via `CometChat.getUser()`
+2. It emits an `openChat` UI event with `{ user }` via `CometChatUIEventHandler`
+3. Your app listens with `addUIListener` and navigates to a private chat screen
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatMessageList` | Group chat — shows the "Message Privately" long-press option |
+| `CometChatMessageHeader` | Header for the private 1:1 chat screen |
+| `CometChatMessageList` | Message list for the private 1:1 chat screen |
+| `CometChatMessageComposer` | Composer for the private 1:1 chat screen |
+
+---
+
+## Integration Steps
+
+### 1. Group Chat Screen
+
+Render the full group chat and register an `openChat` listener. The "Message Privately" option appears automatically in the long-press menu for every message in a group conversation — no extra setup needed. When selected, the UIKit fetches the sender and fires `openChat`, which your listener catches to navigate to the private chat.
+
+```tsx
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+ CometChatUIEventHandler,
+} from '@cometchat/chat-uikit-react-native';
+import { CometChat } from '@cometchat/chat-sdk-react-native';
+
+const LISTENER_ID = 'group_chat_private_listener';
+
+export default function GroupChatScreen({ group }: { group: CometChat.Group }) {
+ const navigation = useNavigation();
+
+ useEffect(() => {
+ CometChatUIEventHandler.addUIListener(LISTENER_ID, {
+ openChat: ({ user }: { user?: CometChat.User; group?: CometChat.Group }) => {
+ if (user) {
+ navigation.navigate('PrivateChat', { user, fromGroup: group });
+ }
+ },
+ });
+
+ return () => {
+ CometChatUIEventHandler.removeUIListener(LISTENER_ID);
+ };
+ }, [navigation, group]);
+
+ return (
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: { flex: 1 },
+});
+```
+
+---
+
+### 2. Private Chat Screen
+
+Create a dedicated screen for the private conversation. Include a back button in the header so the user can return to the group.
+
+```tsx
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from '@cometchat/chat-uikit-react-native';
+import { CometChat } from '@cometchat/chat-sdk-react-native';
+
+type RouteParams = {
+ user: CometChat.User;
+ fromGroup?: CometChat.Group;
+};
+
+export default function PrivateChatScreen() {
+ const navigation = useNavigation();
+ const { user, fromGroup } = useRoute().params as RouteParams;
+
+ return (
+
+ {
+ if (fromGroup) {
+ navigation.navigate('GroupChat', { group: fromGroup });
+ } else {
+ navigation.goBack();
+ }
+ }}
+ />
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: { flex: 1 },
+});
+```
+
+---
+
+### 3. Navigation Setup
+
+Register both screens in your navigator.
+
+```tsx
+import { createStackNavigator } from '@react-navigation/stack';
+import GroupChatScreen from './GroupChatScreen';
+import PrivateChatScreen from './PrivateChatScreen';
+
+const Stack = createStackNavigator();
+
+export default function AppNavigator() {
+ return (
+
+
+
+
+ );
+}
+```
+
+---
+
+## Hiding the Option
+
+To disable "Message Privately" in specific contexts (e.g., direct 1:1 chats, AI assistant chats), pass `hideMessagePrivatelyOption` to `CometChatMessageList`.
+
+```tsx
+
+```
+
+---
+
+## Feature Matrix
+
+| Feature | How |
+|:---|:---|
+| Trigger | Long-press any message → "Message Privately" |
+| Event emitted | `openChat` with `{ user?: CometChat.User, group?: CometChat.Group }` |
+| Listen for event | `CometChatUIEventHandler.addUIListener` |
+| Hide the option | `hideMessagePrivatelyOption` prop on `CometChatMessageList` |
+| Return to group | Pass `fromGroup` as nav param, call `navigation.navigate('GroupChat', { group })` |
+
+---
+
+## Next Steps
+
+
+
+ Full prop reference for CometChatMessageList.
+
+
+ Display and manage group member lists.
+
+
+ Customize the chat header with back navigation.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/react-native/property-changes.mdx b/ui-kit/react-native/property-changes.mdx
index b13b0c8de..3057ff978 100644
--- a/ui-kit/react-native/property-changes.mdx
+++ b/ui-kit/react-native/property-changes.mdx
@@ -663,7 +663,7 @@ description: "Comprehensive reference of new, renamed, and removed properties fo
Customize colors, fonts, and styles with the theme provider
-
+
Set up the v5 UI Kit from scratch