Message Privately

Start private one-to-one chats from CometChat React Native UI Kit group conversations using the built-in message option and openChat event.

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

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.

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.

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.

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.

<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

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.