> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<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 theme={null}
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 theme={null}
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 theme={null}
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 theme={null}
<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>