From f3372344d39748ee1b1bfba5e896ba2d6bb4abf6 Mon Sep 17 00:00:00 2001 From: Suraj Chauhan Date: Wed, 24 Jun 2026 17:43:05 +0530 Subject: [PATCH 1/4] docs(react-native): add guide for Message Privately feature Adds guide-message-privately.mdx for React Native v5 covering the built-in sendMessagePrivately message option, CometChatUIEvents.openChat listener pattern, private chat screen setup, and hideMessagePrivatelyOption prop. Closes ENG-36602 --- docs.json | 1 + .../react-native/guide-message-privately.mdx | 252 ++++++++++++++++++ 2 files changed, 253 insertions(+) create mode 100644 ui-kit/react-native/guide-message-privately.mdx diff --git a/docs.json b/docs.json index f2ad5f2c5..abb888cc7 100644 --- a/docs.json +++ b/docs.json @@ -1177,6 +1177,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", 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..e7f871c2a --- /dev/null +++ b/ui-kit/react-native/guide-message-privately.mdx @@ -0,0 +1,252 @@ +--- +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 | `CometChatUIEvents.openChat` emitted by the UIKit | +| 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 a `CometChatUIEvents.openChat` event with the user object +3. Your app listens for this event 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. Listen for the openChat Event + +In your group chat screen, register a `CometChatUIEvents.openChat` listener. When it fires, navigate to a private chat screen with the user. + +```tsx +import React, { useEffect } from 'react'; +import { useNavigation } from '@react-navigation/native'; +import { + CometChatUIEventHandler, + CometChatUIEvents, +} from '@cometchat/chat-uikit-react-native'; +import { CometChat } from '@cometchat/chat-sdk-react-native'; + +const LISTENER_ID = 'message_privately_listener'; + +export default function GroupChatScreen({ group }: { group: CometChat.Group }) { + const navigation = useNavigation(); + + useEffect(() => { + CometChatUIEventHandler.addUIEventListener(LISTENER_ID, { + openChat: ({ user }: { user: CometChat.User }) => { + navigation.navigate('PrivateChat', { user }); + }, + }); + + return () => { + CometChatUIEventHandler.removeUIEventListener(LISTENER_ID); + }; + }, [navigation]); + + return ( + // ... your group chat UI + null + ); +} +``` + +--- + +### 2. Group Chat Screen with Message List + +Render the full group chat. The "Message Privately" option is available by default on every message in a group conversation. + +```tsx +import React, { useEffect, useState } from 'react'; +import { View, StyleSheet } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; +import { + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, + CometChatUIEventHandler, + CometChatUIEvents, +} 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.addUIEventListener(LISTENER_ID, { + openChat: ({ user }: { user: CometChat.User }) => { + navigation.navigate('PrivateChat', { user, fromGroup: group }); + }, + }); + + return () => { + CometChatUIEventHandler.removeUIEventListener(LISTENER_ID); + }; + }, [navigation, group]); + + return ( + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { flex: 1 }, +}); +``` + +--- + +### 3. 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 }, +}); +``` + +--- + +### 4. 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 | `CometChatUIEvents.openChat` with `{ user: CometChat.User }` | +| Listen for event | `CometChatUIEventHandler.addUIEventListener` | +| 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. + + From b218fc7ad080870d1c6f78a49827741b5a4256d4 Mon Sep 17 00:00:00 2001 From: Suraj Chauhan Date: Wed, 24 Jun 2026 18:00:41 +0530 Subject: [PATCH 2/4] fix(react-native): fix broken getting-started links and add orphaned pages to nav - Replace /ui-kit/react-native/getting-started (404) with /ui-kit/react-native/overview in campaigns.mdx and property-changes.mdx - Add calling-integration to Features group in docs.json (before call-features) - Add property-changes to Migration Guide group in docs.json Co-Authored-By: Claude Sonnet 4.6 --- docs.json | 4 +++- ui-kit/react-native/campaigns.mdx | 2 +- ui-kit/react-native/property-changes.mdx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs.json b/docs.json index abb888cc7..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" ] @@ -1189,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/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 From f9dcaf249b05dd3ad2012f76b1b2dffd40d0463b Mon Sep 17 00:00:00 2001 From: Suraj Chauhan Date: Wed, 24 Jun 2026 18:54:07 +0530 Subject: [PATCH 3/4] fix(react-native): correct UIEventHandler API in guide-message-privately MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - addUIEventListener → addUIListener (correct method name) - removeUIEventListener → removeUIListener (correct method name) - openChat callback typed as { user?, group? } matching actual UIEventListener - Remove incorrect CometChatUIEvents import (not needed) --- .../react-native/guide-message-privately.mdx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/ui-kit/react-native/guide-message-privately.mdx b/ui-kit/react-native/guide-message-privately.mdx index e7f871c2a..8ac6ccf67 100644 --- a/ui-kit/react-native/guide-message-privately.mdx +++ b/ui-kit/react-native/guide-message-privately.mdx @@ -11,7 +11,7 @@ description: "Start private one-to-one chats from CometChat React Native UI Kit | Package | `@cometchat/chat-uikit-react-native` | | Key components | `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` | | Trigger | Long-press a message in a group chat → "Message Privately" | -| Event | `CometChatUIEvents.openChat` emitted by the UIKit | +| 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) | @@ -29,8 +29,8 @@ Before starting, complete the [Getting Started](/ui-kit/react-native/react-nativ 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 a `CometChatUIEvents.openChat` event with the user object -3. Your app listens for this event and navigates to a private chat screen +2. It emits an `openChat` UI event with `{ user }` via `CometChatUIEventHandler` +3. Your app listens with `addUIListener` and navigates to a private chat screen --- @@ -54,10 +54,7 @@ In your group chat screen, register a `CometChatUIEvents.openChat` listener. Whe ```tsx import React, { useEffect } from 'react'; import { useNavigation } from '@react-navigation/native'; -import { - CometChatUIEventHandler, - CometChatUIEvents, -} from '@cometchat/chat-uikit-react-native'; +import { CometChatUIEventHandler } from '@cometchat/chat-uikit-react-native'; import { CometChat } from '@cometchat/chat-sdk-react-native'; const LISTENER_ID = 'message_privately_listener'; @@ -66,14 +63,16 @@ export default function GroupChatScreen({ group }: { group: CometChat.Group }) { const navigation = useNavigation(); useEffect(() => { - CometChatUIEventHandler.addUIEventListener(LISTENER_ID, { - openChat: ({ user }: { user: CometChat.User }) => { - navigation.navigate('PrivateChat', { user }); + CometChatUIEventHandler.addUIListener(LISTENER_ID, { + openChat: ({ user, group: openedGroup }: { user?: CometChat.User; group?: CometChat.Group }) => { + if (user) { + navigation.navigate('PrivateChat', { user }); + } }, }); return () => { - CometChatUIEventHandler.removeUIEventListener(LISTENER_ID); + CometChatUIEventHandler.removeUIListener(LISTENER_ID); }; }, [navigation]); @@ -99,7 +98,6 @@ import { CometChatMessageList, CometChatMessageComposer, CometChatUIEventHandler, - CometChatUIEvents, } from '@cometchat/chat-uikit-react-native'; import { CometChat } from '@cometchat/chat-sdk-react-native'; @@ -109,14 +107,16 @@ export default function GroupChatScreen({ group }: { group: CometChat.Group }) { const navigation = useNavigation(); useEffect(() => { - CometChatUIEventHandler.addUIEventListener(LISTENER_ID, { - openChat: ({ user }: { user: CometChat.User }) => { - navigation.navigate('PrivateChat', { user, fromGroup: group }); + CometChatUIEventHandler.addUIListener(LISTENER_ID, { + openChat: ({ user }: { user?: CometChat.User; group?: CometChat.Group }) => { + if (user) { + navigation.navigate('PrivateChat', { user, fromGroup: group }); + } }, }); return () => { - CometChatUIEventHandler.removeUIEventListener(LISTENER_ID); + CometChatUIEventHandler.removeUIListener(LISTENER_ID); }; }, [navigation, group]); @@ -227,8 +227,8 @@ To disable "Message Privately" in specific contexts (e.g., direct 1:1 chats, AI | Feature | How | |:---|:---| | Trigger | Long-press any message → "Message Privately" | -| Event emitted | `CometChatUIEvents.openChat` with `{ user: CometChat.User }` | -| Listen for event | `CometChatUIEventHandler.addUIEventListener` | +| 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 })` | From 309afdb91709b07e22c30aa3d3f9df02572f2ecf Mon Sep 17 00:00:00 2001 From: Suraj Chauhan Date: Wed, 24 Jun 2026 18:58:00 +0530 Subject: [PATCH 4/4] docs(react-native): replace placeholder return with full group chat example --- .../react-native/guide-message-privately.mdx | 46 ++----------------- 1 file changed, 4 insertions(+), 42 deletions(-) diff --git a/ui-kit/react-native/guide-message-privately.mdx b/ui-kit/react-native/guide-message-privately.mdx index 8ac6ccf67..a5ed2a15c 100644 --- a/ui-kit/react-native/guide-message-privately.mdx +++ b/ui-kit/react-native/guide-message-privately.mdx @@ -47,50 +47,12 @@ The feature is built into `CometChatMessageList`. When a user selects "Message P ## Integration Steps -### 1. Listen for the openChat Event +### 1. Group Chat Screen -In your group chat screen, register a `CometChatUIEvents.openChat` listener. When it fires, navigate to a private chat screen with the user. +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 { useNavigation } from '@react-navigation/native'; -import { CometChatUIEventHandler } from '@cometchat/chat-uikit-react-native'; -import { CometChat } from '@cometchat/chat-sdk-react-native'; - -const LISTENER_ID = 'message_privately_listener'; - -export default function GroupChatScreen({ group }: { group: CometChat.Group }) { - const navigation = useNavigation(); - - useEffect(() => { - CometChatUIEventHandler.addUIListener(LISTENER_ID, { - openChat: ({ user, group: openedGroup }: { user?: CometChat.User; group?: CometChat.Group }) => { - if (user) { - navigation.navigate('PrivateChat', { user }); - } - }, - }); - - return () => { - CometChatUIEventHandler.removeUIListener(LISTENER_ID); - }; - }, [navigation]); - - return ( - // ... your group chat UI - null - ); -} -``` - ---- - -### 2. Group Chat Screen with Message List - -Render the full group chat. The "Message Privately" option is available by default on every message in a group conversation. - -```tsx -import React, { useEffect, useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { @@ -136,7 +98,7 @@ const styles = StyleSheet.create({ --- -### 3. Private Chat Screen +### 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. @@ -186,7 +148,7 @@ const styles = StyleSheet.create({ --- -### 4. Navigation Setup +### 3. Navigation Setup Register both screens in your navigator.