docs(react-native): add guide for Message Privately feature

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

ui-kit/react-native/campaigns.mdx

@@ -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>
@@ -69,9 +69,9 @@
           "type": "button",
           "label": "Learn More",
           "backgroundColor": { "light": "transparent", "dark": "transparent" },
           "textColor": { "light": "#6C5CE7", "dark": "#6C5CE7" },
           "size": 40,
           "fontSize": 13,
           "borderRadius": 6,
           "padding": { "top": 0, "right": 16, "bottom": 0, "left": 16 },
           "action": { "type": "openUrl", "url": "" },
@@ -81,11 +81,11 @@
       "id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2"
     }
   ],
   "fallbackText": "",
   "style": {
     "background": { "light": "#E8E8E8", "dark": "#E8E8E8" },
     "borderRadius": 16,
     "borderColor": { "light": "#DFE6E9", "dark": "#DFE6E9" },
     "padding": 12
   }
 }

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."
+---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
+
+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<any>();
+
+  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 (
+    <View style={styles.container}>
+      <CometChatMessageHeader group={group} />
+      <CometChatMessageList group={group} />
+      <CometChatMessageComposer group={group} />
+    </View>
+  );
+}
+
+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<any>().params as RouteParams;
+
+  return (
+    <View style={styles.container}>
+      <CometChatMessageHeader
+        user={user}
+        showBackButton={true}
+        onBack={() => {
+          if (fromGroup) {
+            navigation.navigate('GroupChat', { group: fromGroup });
+          } else {
+            navigation.goBack();
+          }
+        }}
+      />
+      <CometChatMessageList user={user} />
+      <CometChatMessageComposer user={user} />
+    </View>
+  );
+}
+
+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 (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="GroupChat" component={GroupChatScreen} />
+      <Stack.Screen name="PrivateChat" component={PrivateChatScreen} />
+    </Stack.Navigator>
+  );
+}
+```
+
+---
+
+## Hiding the Option
+
+To disable "Message Privately" in specific contexts (e.g., direct 1:1 chats, AI assistant chats), pass `hideMessagePrivatelyOption` to `CometChatMessageList`.
+
+```tsx
+<CometChatMessageList
+  group={group}
+  hideMessagePrivatelyOption={true}
+/>
+```
+
+---
+
+## 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
+
+<CardGroup cols={2}>
+  <Card title="Message List" href="/ui-kit/react-native/message-list">
+    Full prop reference for CometChatMessageList.
+  </Card>
+  <Card title="Group Members" href="/ui-kit/react-native/group-members">
+    Display and manage group member lists.
+  </Card>
+  <Card title="Message Header" href="/ui-kit/react-native/message-header">
+    Customize the chat header with back navigation.
+  </Card>
+  <Card title="All Guides" href="/ui-kit/react-native/guide-overview">
+    Browse all feature and formatter guides.
+  </Card>
+</CardGroup>

ui-kit/react-native/property-changes.mdx

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