Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion ui-kit/react-native/campaigns.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -69,9 +69,9 @@
"type": "button",
"label": "Learn More",
"backgroundColor": { "light": "transparent", "dark": "transparent" },
"textColor": { "light": "#6C5CE7", "dark": "#6C5CE7" },

Check warning on line 72 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L72

Did you really mean 'textColor'?
"size": 40,
"fontSize": 13,

Check warning on line 74 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L74

Did you really mean 'fontSize'?
"borderRadius": 6,
"padding": { "top": 0, "right": 16, "bottom": 0, "left": 16 },
"action": { "type": "openUrl", "url": "" },
Expand All @@ -81,11 +81,11 @@
"id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2"
}
],
"fallbackText": "",

Check warning on line 84 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L84

Did you really mean 'fallbackText'?
"style": {
"background": { "light": "#E8E8E8", "dark": "#E8E8E8" },
"borderRadius": 16,
"borderColor": { "light": "#DFE6E9", "dark": "#DFE6E9" },

Check warning on line 88 in ui-kit/react-native/campaigns.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/campaigns.mdx#L88

Did you really mean 'borderColor'?
"padding": 12
}
}
Expand Down
214 changes: 214 additions & 0 deletions ui-kit/react-native/guide-message-privately.mdx
Original file line number Diff line number Diff line change
@@ -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."

Check warning on line 4 in ui-kit/react-native/guide-message-privately.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/guide-message-privately.mdx#L4

Did you really mean 'openChat'?
---

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

Check warning on line 21 in ui-kit/react-native/guide-message-privately.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/guide-message-privately.mdx#L21

Did you really mean 'UIKit'?

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()`

Check warning on line 31 in ui-kit/react-native/guide-message-privately.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/guide-message-privately.mdx#L31

Did you really mean 'UIKit'?
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.

Check warning on line 52 in ui-kit/react-native/guide-message-privately.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/guide-message-privately.mdx#L52

Did you really mean 'UIKit'?

```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 })` |

Check warning on line 195 in ui-kit/react-native/guide-message-privately.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/react-native/guide-message-privately.mdx#L195

Did you really mean 'param'?

---

## 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>
2 changes: 1 addition & 1 deletion ui-kit/react-native/property-changes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>