Message Privately - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react-native`
Key components	`CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`
Trigger	Long-press another member’s message in a group chat → “Message Privately”
Event	`openChat` via `CometChatUIEventHandler.addUIListener`
Prop	`hideMessagePrivatelyOption` on `CometChatMessageList`
Sample app	GitHub
Related	Message List · All Guides

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

How It Works

The feature is built into CometChatMessageList. When a user selects “Message Privately” from the message long-press menu:

The UIKit fetches the message sender via CometChat.getUser()
It emits an openChat UI event with { user } via CometChatUIEventHandler
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 messages sent by other members of 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.

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 }) => {
        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.

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 },
});

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

The option is already absent in 1:1 conversations, on your own messages, and in AI agent chats — you don’t need to hide it in those cases. Use hideMessagePrivatelyOption when you want to suppress it in a group screen that would otherwise show it — for example a broadcast or announcement group where members shouldn’t DM each other, or a moderated support group where private contact is off-policy.

<CometChatMessageList
  group={group}
  hideMessagePrivatelyOption={true}
/>

Feature Matrix

Feature	How
Trigger	Long-press another member’s message in a group → “Message Privately”
Event emitted	`openChat` with `{ user: CometChat.User }` — the message sender
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

Message List

Full prop reference for CometChatMessageList.

Group Members

Display and manage group member lists.

Message Header

Customize the chat header with back navigation.

All Guides

Browse all feature and formatter guides.

​How It Works

​Components

​Integration Steps

​1. Group Chat Screen

​2. Private Chat Screen

​3. Navigation Setup

​Hiding the Option

​Feature Matrix

​Next Steps