From 08612b0ecad2c5b3302df6e1266d8ec9f1ea576c Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 10:21:56 +0530 Subject: [PATCH 1/5] adds react native docs --- docs.json | 11 +- .../react-native-conversation.mdx | 152 ++++++++++++++ .../react-native/react-native-integration.mdx | 196 ++++++++++++++++++ .../react-native-one-to-one-chat.mdx | 112 ++++++++++ .../react-native-tab-based-chat.mdx | 192 +++++++++++++++++ 5 files changed, 662 insertions(+), 1 deletion(-) create mode 100644 ui-kit/react-native/react-native-conversation.mdx create mode 100644 ui-kit/react-native/react-native-integration.mdx create mode 100644 ui-kit/react-native/react-native-one-to-one-chat.mdx create mode 100644 ui-kit/react-native/react-native-tab-based-chat.mdx diff --git a/docs.json b/docs.json index 8f9b6b5d..4f5f8a6c 100644 --- a/docs.json +++ b/docs.json @@ -843,7 +843,16 @@ "group": " ", "pages": [ "ui-kit/react-native/overview", - "ui-kit/react-native/getting-started", + { + "group": "Getting Started", + "pages": [ + "ui-kit/react-native/getting-started", + "ui-kit/react-native/react-native-integration", + "ui-kit/react-native/react-native-conversation", + "ui-kit/react-native/react-native-one-to-one-chat", + "ui-kit/react-native/react-native-tab-based-chat" + ] + }, { "group": "Features", "pages": [ diff --git a/ui-kit/react-native/react-native-conversation.mdx b/ui-kit/react-native/react-native-conversation.mdx new file mode 100644 index 00000000..3a293580 --- /dev/null +++ b/ui-kit/react-native/react-native-conversation.mdx @@ -0,0 +1,152 @@ +--- +title: "Building A Conversation List + Message View (React Native)" +sidebarTitle: "Conversation List + Message View" +--- + +The **Conversation List + Message View** layout pairs a **sidebar of recent conversations** with a **chat screen**. On mobile, tapping a conversation hides the list and shows the chat; the back button brings the list back into view. + +*** + +## **User Interface Overview** + +1. **Sidebar (Conversation List)** – users and groups with last message/typing indicators. +2. **Message View** – message header + live message stream. +3. **Message Composer** – send text, media, and reactions. + + + +Make sure you've **initialized the UI Kit and logged in a user** first. See [Integration](./react-native-integration). + + + +*** + +## **Implementation** + +Create a component that toggles between the conversation list and the active chat. The chat view renders a **header**, **message list**, and **composer**. + +```tsx +// src/ConversationMessage.tsx +import React, { useRef, useState } from "react"; +import { View, StyleSheet, TouchableOpacity, type ViewStyle } from "react-native"; +import { + CometChatConversations, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, + CometChatUiKitConstants, + Icon, + useTheme, + CometChatUIKit, +} from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const ConversationMessage: React.FC = () => { + const [messageUser, setMessageUser] = useState(); + const [messageGroup, setMessageGroup] = useState(); + + const Messages = ({ + user, + group, + onBack, + }: { + user?: CometChat.User; + group?: CometChat.Group; + onBack: () => void; + }) => { + const theme = useTheme(); + const loggedInUser = useRef(CometChatUIKit.loggedInUser!).current; + + const TrailingView = ({ user, group }: { user?: CometChat.User; group?: CometChat.Group }) => { + if (group) { + return ( + + console.log("Group info pressed")}> + + + + ); + } + + if (user && !user.getBlockedByMe()) { + return ( + + console.log("User info pressed")}> + + + + ); + } + + return <>; + }; + + return ( + + + + + + ); + }; + + return ( + <> + { + const isUser = + conversation.getConversationType() === CometChatUiKitConstants.ConversationTypeConstants.user; + if (isUser) { + setMessageUser(conversation.getConversationWith() as CometChat.User); + } else { + setMessageGroup(conversation.getConversationWith() as CometChat.Group); + } + }} + /> + + {(messageUser || messageGroup) && ( + { + setMessageUser(undefined); + setMessageGroup(undefined); + }} + /> + )} + + ); +}; + +const styles = StyleSheet.create({ + root: { flex: 1 }, + appBarContainer: { flexDirection: "row", marginLeft: 16 }, +}); + +export default ConversationMessage; +``` + +Place `ConversationMessage` anywhere after login, for example inside your root screen or navigator. + +*** + +## **Run the app** + +``` +npm run android +npm run ios +``` + +*** + +## **Tips** + +* Tapping a conversation sets `messageUser` or `messageGroup`, which hides the list and shows the chat. +* `CometChatMessageHeader` renders a **Back** button; the handler clears the selection to return to the list. +* Use `TrailingView` to add quick actions (e.g., **info**, **block**, **call**) on the header. + diff --git a/ui-kit/react-native/react-native-integration.mdx b/ui-kit/react-native/react-native-integration.mdx new file mode 100644 index 00000000..5cd4ec98 --- /dev/null +++ b/ui-kit/react-native/react-native-integration.mdx @@ -0,0 +1,196 @@ +--- +title: "Getting Started With CometChat React Native UI Kit" +sidebarTitle: "Integration" +--- + +The **CometChat UI Kit for React Native** ships with **ready-to-use chat and calling components** plus flexible theming. It works with both **React Native CLI** and **Expo**, letting you wire chat into mobile apps quickly. + +With native-ready views for **conversations, one-to-one or group chat, and call logs**, you can launch messaging experiences without rebuilding core UI. + +*** + +## **Prerequisites** + +Before installing the **React Native UI Kit**, create a **CometChat app** in the **[CometChat Dashboard](https://app.cometchat.com/)** and keep these values handy: + +1. **App ID** +2. **Region** +3. **Auth Key** (for quick starts) or **Auth Token** (for production) + +Development setup: + +* **Node.js** with **npm** or **Yarn**. +* **React Native CLI** (Xcode + Android Studio) or **Expo CLI**. +* A device or simulator/emulator. +* Android builds need **camera** and **mic** permissions for calling. + +*** + +## **Register & Set Up CometChat** + +1. Sign up or sign in at the **[CometChat Dashboard](https://app.cometchat.com/login)**. +2. Create a new app and open **Application → Credentials**. +3. Copy your **App ID**, **Region**, and **Auth Key/Auth Token**. + + + +Each CometChat application can power multiple client apps. Users on the same CometChat app can chat across platforms (web, Android, iOS, React Native). + + + +*** + +## **Built With** + +| Technology | Description | +| ----------------------------------------------------- | ---------------------------------------- | +| [Node.js](https://nodejs.org/) | JavaScript runtime | +| [React Native](https://reactnative.dev/) | Cross-platform mobile framework | +| [CometChat React Native UI Kit](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5) | Prebuilt chat UI components | + +*** + +## **Getting Started** + +### **Step 1: Create a React Native project** + + + + +``` +npx react-native init MyApp --template react-native-template-typescript +cd MyApp +``` + + + + + +``` +npx create-expo-app MyApp +cd MyApp +``` + + + + +Open the project in your editor and ensure iOS/Android tooling is set up. + +*** + +### **Step 2: Install dependencies** + +Install the UI Kit (includes the Chat SDK): + + + + +``` +npm install @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native +``` + + + + + +``` +yarn add @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native +``` + + + + + + +For tab-based navigation (see [Tab Based Chat](./react-native-tab-based-chat)) also add React Navigation: + +``` +npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens +``` + + + +*** + +### **Step 3: Initialize the UI Kit (App.tsx)** + +Call `CometChatUIKit.init` once on app start. On Android, request camera/mic permissions before initializing if you plan to use calling. + +```tsx +// App.tsx +import { useEffect } from "react"; +import { PermissionsAndroid, Platform } from "react-native"; +import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const UIKIT_SETTINGS: UIKitSettings = { + appId: "APP_ID", + authKey: "AUTH_KEY", // Use Auth Token for production + region: "REGION", + subscriptionType: CometChat.AppSettings.SUBSCRIPTION_TYPE_ALL_USERS, +}; + +export default function App() { + useEffect(() => { + const init = async () => { + if (Platform.OS === "android") { + await PermissionsAndroid.requestMultiple([ + PermissionsAndroid.PERMISSIONS.CAMERA, + PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, + ]); + } + + await CometChatUIKit.init(UIKIT_SETTINGS); + console.log("CometChat UI Kit initialized"); + }; + + init(); + }, []); + + return null; // render your navigators/screens after login +} +``` + + + +For production, prefer **Auth Tokens** over **Auth Keys** for secure authentication. See [`loginUsingAuthToken`](/ui-kit/react-native/methods#login-using-auth-token). + + + +*** + +### **Step 4: Log in a user** + +Use the **UID** of a user you created in the dashboard or via API/SDK. Log the user in after initialization. + +```tsx +import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; + +const UID = "cometchat-uid-1"; // replace with your UID + +CometChatUIKit.getLoggedInUser().then((user) => { + if (!user) { + CometChatUIKit.login({ uid: UID }) + .then((loggedIn) => { + console.log("Login Successful:", loggedIn); + // Render your app screens here + }) + .catch((error) => console.error("Login failed:", error)); + } else { + // Already logged in; render your app + } +}); +``` + +*** + +### **Step 5: Pick your chat experience** + +Start from the scenario that matches your UX: + +* [Conversation List + Message View](./react-native-conversation) +* [One-to-One/Group Chat](./react-native-one-to-one-chat) +* [Tab Based Chat (Chats, Calls, Users, Groups)](./react-native-tab-based-chat) + +You can swap components or theme them later using the **Theming** docs. + diff --git a/ui-kit/react-native/react-native-one-to-one-chat.mdx b/ui-kit/react-native/react-native-one-to-one-chat.mdx new file mode 100644 index 00000000..ee63c831 --- /dev/null +++ b/ui-kit/react-native/react-native-one-to-one-chat.mdx @@ -0,0 +1,112 @@ +--- +title: "Building A One To One/Group Chat Experience (React Native)" +sidebarTitle: "One To One/Group Chat" +--- + +The **One-to-One Chat** view focuses on a single conversation—perfect for support flows, dating apps, and private messaging. You can pass either a **user UID** (one-to-one) or a **group GUID** (group chat) to render a dedicated chat window. + +[Getting Started](./react-native-integration) covers initialization and login; this guide shows the chat screen itself. + +*** + +## **User Interface Preview** + +1. **Chat Header** – recipient details and optional actions. +2. **Message List** – live history for the user or group. +3. **Message Composer** – send text, media, and reactions. + +*** + +## **Implementation** + +Fetch the user (or group) and render **Header + Message List + Composer**. The composer hides automatically when a user is blocked or read-only. + +```tsx +// src/ChatScreenView.tsx +import React, { useEffect, useState } from "react"; +import { ActivityIndicator, View, StyleSheet } from "react-native"; +import { + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +type Props = { + uid?: string; // one-to-one chat + guid?: string; // group chat + onBack?: () => void; +}; + +export const ChatScreen: React.FC = ({ uid, guid, onBack }) => { + const [user, setUser] = useState(); + const [group, setGroup] = useState(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + let isMounted = true; + + const load = async () => { + try { + if (uid) { + const fetched = await CometChat.getUser(uid); + if (isMounted) setUser(fetched); + } else if (guid) { + const fetched = await CometChat.getGroup(guid); + if (isMounted) setGroup(fetched); + } + } catch (e) { + console.warn("[ChatScreen] Unable to fetch entity", e); + } finally { + if (isMounted) setLoading(false); + } + }; + + load(); + return () => { + isMounted = false; + }; + }, [uid, guid]); + + if (loading) { + return ( + + + + ); + } + + return ( + + + + + + ); +}; + +const styles = StyleSheet.create({ + root: { flex: 1 }, + loader: { flex: 1, alignItems: "center", justifyContent: "center" }, +}); +``` + +Use it after login, for example: ` navigation.goBack()} />`. + +*** + +## **Run the app** + +``` +npm run android +npm run ios +``` + +*** + +## **Tips** + +* Pass **`uid`** for one-to-one or **`guid`** for group chat; only one should be set at a time. +* Add calling by installing `@cometchat/calls-sdk-react-native` and enabling call buttons in the header. +* Wrap the screen in your navigator to handle back navigation (e.g., React Navigation `Stack`). + diff --git a/ui-kit/react-native/react-native-tab-based-chat.mdx b/ui-kit/react-native/react-native-tab-based-chat.mdx new file mode 100644 index 00000000..97b0902d --- /dev/null +++ b/ui-kit/react-native/react-native-tab-based-chat.mdx @@ -0,0 +1,192 @@ +--- +title: "Building A Tab Based Chat Experience (React Native)" +sidebarTitle: "Tab Based Chat" +--- + +This guide builds a **tabbed messaging UI** with separate tabs for **Chats, Calls, Users, and Groups** plus a dedicated **messages screen**. It uses **React Navigation** with CometChat UI Kit components. + +*** + +## **User Interface Overview** + +* **Tabs** – switch between Chats, Calls, Users, and Groups. +* **Sidebar per tab** – conversation list, call logs, users, or groups. +* **Message View** – header + messages for the selected user/group. +* **Composer** – send messages with attachments and reactions. + + + +Initialize and log in with the [Integration](./react-native-integration) steps first. + + + +*** + +## **Install navigation dependencies** + +```bash +npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens +``` + +*** + +## **Implementation** + +The example below wires a bottom tab navigator to a stack. Selecting a conversation pushes the **Messages** screen. + +```tsx +// src/examples/TabScreen.tsx +import React from "react"; +import { + NavigationContainer, + DefaultTheme, + useNavigation, +} from "@react-navigation/native"; +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { createStackNavigator, StackNavigationProp } from "@react-navigation/stack"; +import { + SafeAreaView, + View, + Platform, + StyleSheet, +} from "react-native"; +import { + useTheme, + CometChatConversations, + CometChatGroups, + CometChatCallLogs, + CometChatUsers, + CometChatUiKitConstants, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer, +} from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const Stack = createStackNavigator(); +const Tab = createBottomTabNavigator(); + +// Messages screen (header + list + composer) +const MessagesRoot = ({ route, navigation }: any) => { + const { user, group } = route.params || {}; + return ( + + navigation.popToTop()} + showBackButton + /> + + + + + + ); +}; + +// Tab screens +const Conversations: React.FC = () => { + const navigation = useNavigation>(); + return ( + { + const isUser = + conversation.getConversationType() === + CometChatUiKitConstants.ConversationTypeConstants.user; + + navigation.navigate("MESSAGES_ROOT", isUser + ? { user: conversation.getConversationWith() as CometChat.User } + : { group: conversation.getConversationWith() as CometChat.Group } + ); + }} + /> + ); +}; + +const Groups: React.FC = () => { + const theme = useTheme(); + return ( + + + + ); +}; + +const Calls: React.FC = () => { + const theme = useTheme(); + return ( + + + + ); +}; + +const Users: React.FC = () => { + const theme = useTheme(); + const usersRequestBuilder = new CometChat.UsersRequestBuilder().setLimit(30); + return ( + + + + ); +}; + +// Bottom tabs +const BottomTabNavigator = () => ( + + + + + + +); + +// Root stack +const TabScreen = () => { + const theme = useTheme(); + const NavigationTheme = { + ...DefaultTheme, + colors: { ...DefaultTheme.colors, background: theme.color.background1 as string }, + }; + + return ( + + + + + + + ); +}; + +const styles = StyleSheet.create({ + flexOne: { flex: 1 }, +}); + +export default TabScreen; +``` + +Render `` after the user logs in (e.g., in `App.tsx`) to expose tabs + chat. + +*** + +## **Run the app** + +``` +npm run android +npm run ios +``` + +*** + +## **Tips** + +* The **Chats** tab passes either `{ user }` or `{ group }` into the **Messages** stack screen. +* Use `CometChatMessageHeader`'s back button to return to tabs; add `BackHandler` if you want to handle Android hardware back. +* Customize icons, colors, and typography via the **ThemeProvider** and `useTheme`. + From 2f3ae5c98a8414cf3a5188fce254868e0fa6da3e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 10:25:00 +0530 Subject: [PATCH 2/5] updates text --- ui-kit/react-native/react-native-conversation.mdx | 2 +- ui-kit/react-native/react-native-one-to-one-chat.mdx | 2 +- ui-kit/react-native/react-native-tab-based-chat.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui-kit/react-native/react-native-conversation.mdx b/ui-kit/react-native/react-native-conversation.mdx index 3a293580..465c7b4e 100644 --- a/ui-kit/react-native/react-native-conversation.mdx +++ b/ui-kit/react-native/react-native-conversation.mdx @@ -1,5 +1,5 @@ --- -title: "Building A Conversation List + Message View (React Native)" +title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" --- diff --git a/ui-kit/react-native/react-native-one-to-one-chat.mdx b/ui-kit/react-native/react-native-one-to-one-chat.mdx index ee63c831..a67e550d 100644 --- a/ui-kit/react-native/react-native-one-to-one-chat.mdx +++ b/ui-kit/react-native/react-native-one-to-one-chat.mdx @@ -1,5 +1,5 @@ --- -title: "Building A One To One/Group Chat Experience (React Native)" +title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" --- diff --git a/ui-kit/react-native/react-native-tab-based-chat.mdx b/ui-kit/react-native/react-native-tab-based-chat.mdx index 97b0902d..629acba1 100644 --- a/ui-kit/react-native/react-native-tab-based-chat.mdx +++ b/ui-kit/react-native/react-native-tab-based-chat.mdx @@ -1,5 +1,5 @@ --- -title: "Building A Tab Based Chat Experience (React Native)" +title: "Building A Tab Based Chat Experience" sidebarTitle: "Tab Based Chat" --- From e61fceb53d75776b23c7b6d1ad3c50e5d7f83869 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 10:35:02 +0530 Subject: [PATCH 3/5] Update getting-started.mdx --- ui-kit/react-native/getting-started.mdx | 210 +++++++++++++----------- 1 file changed, 112 insertions(+), 98 deletions(-) diff --git a/ui-kit/react-native/getting-started.mdx b/ui-kit/react-native/getting-started.mdx index f5caa112..151403fb 100644 --- a/ui-kit/react-native/getting-started.mdx +++ b/ui-kit/react-native/getting-started.mdx @@ -4,30 +4,19 @@ title: "Getting Started" ## Start your first conversation -CometChat UI Kit for React Native is a collection of prebuilt UI components designed to simplify the development of an in-app chat with all the essential messaging features. Our UI Kit offers light and dark themes, various fonts, colors, and additional customization options. +The **CometChat UI Kit for React Native** bundles ready-made components for conversations, chat screens, calls, theming, and localization so you can ship messaging quickly. -CometChat UI Kit supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch using CometChat React Native UI Kit. - - - - +*** ## Prerequisites -Before installing **UI Kit for React Native**, you need to create a CometChat application on the CometChat Dashboard, which comprises everything required in a chat service including users, groups, calls & messages. You will need the `App ID` , `AuthKey`, `Region` of your CometChat application when initialising the SDK. - -**i. Register on CometChat** - -* To install **UI Kit for React Native**, you need to first register on **CometChat Dashboard**. [Click here to sign up](https://app.cometchat.com/login). - -**ii. Get Your Application Keys** - -* Create a **new app** -* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**. +1. Create a CometChat app in the **[CometChat Dashboard](https://app.cometchat.com/login)**. +2. Copy your **App ID**, **Region**, and **Auth Key/Auth Token** from **Application → Credentials**. +3. React Native environment set up (Android Studio + Xcode for CLI, or Expo CLI). -Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web. +Users in the same CometChat app can chat across platforms (web, Android, iOS, React Native). @@ -35,142 +24,177 @@ Each CometChat application can be integrated with a single client app. Within th ## Getting Started -You can quickly start building a modern messaging experience into your app by installing the new UI Kit, an add-on for the CometChat React Native SDK. - -*** - -Step 1 - -### Create a project - -To get started, open `terminal` and create a new project using below command. +### Step 1: Create a project - + + ```sh npx @react-native-community/cli init ChattingApp ``` -The CometChat React Native UI Kit is officially built and tested with React Native version 0.77.0 and above, up to the latest stable release. While it may work with older versions, they are not officially supported and could lead to unexpected issues. +UI Kit v5 is tested with React Native **0.77.0+** (latest stable). Older versions may work but are not supported. + +```sh +npx create-expo-app ChattingApp +``` + + *** -Step 2 +### Step 2: Install dependencies -### Add Dependency - -You can install **UI Kit for React Native** through using below command. +Install the UI Kit (includes the Chat SDK): - + + ```sh -npm i @cometchat/chat-uikit-react-native +npm install @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native ``` + - +```sh +yarn add @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native +``` -*** + + -#### Other Dependencies +Peer dependencies often used by the UI Kit: - - ```sh -npm i @cometchat/chat-sdk-react-native -npm i @react-native-community/datetimepicker -npm i @react-native-clipboard/clipboard -npm i react-native-svg -npm i react-native-video -npm i dayjs -npm i @react-native-async-storage/async-storage +npm install @react-native-community/datetimepicker @react-native-clipboard/clipboard @react-native-async-storage/async-storage react-native-svg react-native-video dayjs ``` - + - +For a tab-based layout, also install navigation: `@react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens`. + + *** -#### Add Permissions for android +### Step 3: Android permissions -Open `AndroidManifest.xml` file from `android/app/src/main` location and add below permissions +Add camera/mic/network permissions to `android/app/src/main/AndroidManifest.xml`: - - ```xml - - - + ``` - +*** - +### Step 4: Initialize the UI Kit + +Call `CometChatUIKit.init` once on app start. On Android, request camera/mic permissions before calling init. + +```tsx +// App.tsx +import { useEffect } from "react"; +import { PermissionsAndroid, Platform } from "react-native"; +import { CometChatUIKit, UIKitSettings } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const UIKIT_SETTINGS: UIKitSettings = { + appId: "APP_ID", + authKey: "AUTH_KEY", // Use Auth Token in production + region: "REGION", + subscriptionType: CometChat.AppSettings.SUBSCRIPTION_TYPE_ALL_USERS, +}; + +export default function App() { + useEffect(() => { + const init = async () => { + if (Platform.OS === "android") { + await PermissionsAndroid.requestMultiple([ + PermissionsAndroid.PERMISSIONS.CAMERA, + PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, + ]); + } + await CometChatUIKit.init(UIKIT_SETTINGS); + console.log("CometChat UI Kit initialized"); + }; + init(); + }, []); + + return null; // render navigators/screens after login +} +``` -Please make sure Android SDK path is set in the `ANDROID_HOME` environment variable or in `local.properties` via the field `sdk.dir`. +Prefer **Auth Tokens** over **Auth Keys** for production auth. See [`loginUsingAuthToken`](/ui-kit/react-native/methods#login-using-auth-token). -#### Install @cometchat/calls-sdk-react-native Package (Optional) +*** -To enable calling functionality in your application, you need to install the Calling SDK separately within your project. +### Step 5: Log in a user - +Use a UID you created in the dashboard or via SDK/API. -React Native UI Kit supports Calls SDK V3 or higher. +```tsx +import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; + +const UID = "cometchat-uid-1"; // replace with your UID + +CometChatUIKit.getLoggedInUser().then((user) => { + if (!user) { + CometChatUIKit.login({ uid: UID }) + .then(() => { + console.log("Login Successful"); + // Render your app screens here + }) + .catch((error) => console.error("Login failed:", error)); + } +}); +``` - +*** -1. You can install `@cometchat/calls-sdk-react-native` Calling SDK for React Native using below command. +### Step 6: Choose a chat experience - - - ```sh - npm i @cometchat/calls-sdk-react-native - ``` +Pick the layout that matches your UX: - +* [Conversation List + Message View](./react-native-conversation) +* [One-to-One/Group Chat](./react-native-one-to-one-chat) +* [Tab Based Chat (Chats, Calls, Users, Groups)](./react-native-tab-based-chat) - +*** + +## Optional: Calling support -2. Install dependancies required for call SDK to work +1. Install the Calls SDK (v3+): - - ```sh - npm i @cometchat/chat-sdk-react-native - npm i @react-native-async-storage/async-storage - npm i @react-native-community/netinfo - npm i react-native-background-timer - npm i react-native-callstats - npm i react-native-webrtc + npm install @cometchat/calls-sdk-react-native ``` - +2. Install required dependencies: - + ```sh + npm install @cometchat/chat-sdk-react-native @react-native-async-storage/async-storage @react-native-community/netinfo react-native-background-timer react-native-callstats react-native-webrtc + ``` 3. Add permissions - **Android:** + **Android** - - ```xml @@ -179,25 +203,15 @@ React Native UI Kit supports Calls SDK V3 or higher. ``` - + **iOS** - - - **iOS:** - - - ```xml NSCameraUsageDescription - This is for Camera permission + Camera permission NSMicrophoneUsageDescription - This is for Mic permission + Microphone permission ``` - - - - *** Step 3 From 8d45ddb36511d043ebd8987f4888bbece25f0450 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 12:11:03 +0530 Subject: [PATCH 4/5] updates docs --- docs.json | 1 - .../react-native-conversation.mdx | 145 +++++++++--------- .../react-native-one-to-one-chat.mdx | 33 +++- .../react-native-tab-based-chat.mdx | 69 +++++---- 4 files changed, 140 insertions(+), 108 deletions(-) diff --git a/docs.json b/docs.json index 4f5f8a6c..94c48ebc 100644 --- a/docs.json +++ b/docs.json @@ -846,7 +846,6 @@ { "group": "Getting Started", "pages": [ - "ui-kit/react-native/getting-started", "ui-kit/react-native/react-native-integration", "ui-kit/react-native/react-native-conversation", "ui-kit/react-native/react-native-one-to-one-chat", diff --git a/ui-kit/react-native/react-native-conversation.mdx b/ui-kit/react-native/react-native-conversation.mdx index 465c7b4e..aae0548c 100644 --- a/ui-kit/react-native/react-native-conversation.mdx +++ b/ui-kit/react-native/react-native-conversation.mdx @@ -3,41 +3,85 @@ title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" --- -The **Conversation List + Message View** layout pairs a **sidebar of recent conversations** with a **chat screen**. On mobile, tapping a conversation hides the list and shows the chat; the back button brings the list back into view. +The **Conversation List + Message View** layout delivers a two-panel chat experience: pick a conversation in the list, then chat in a dedicated screen. On mobile, the list hides while a chat is open and returns with the back button. *** ## **User Interface Overview** -1. **Sidebar (Conversation List)** – users and groups with last message/typing indicators. -2. **Message View** – message header + live message stream. -3. **Message Composer** – send text, media, and reactions. + + + + +1. **Conversation List** – shows users/groups with last message, presence, and typing indicators. +2. **Message View** – header + real-time message list. +3. **Composer** – send text, media, reactions, and replies. -Make sure you've **initialized the UI Kit and logged in a user** first. See [Integration](./react-native-integration). +Initialize and log in first via [React Native Integration](./react-native-integration). *** -## **Implementation** +## **Step-by-Step Guide** + +### **Step 1: Render the conversation list** + +Handle selection to capture whether the item is a **user** or **group**. + +```tsx + { + const isUser = + conversation.getConversationType() === + CometChatUiKitConstants.ConversationTypeConstants.user; + if (isUser) { + setMessageUser(conversation.getConversationWith() as CometChat.User); + } else { + setMessageGroup(conversation.getConversationWith() as CometChat.Group); + } + }} +/> +``` -Create a component that toggles between the conversation list and the active chat. The chat view renders a **header**, **message list**, and **composer**. +### **Step 2: Build the message view** + +Compose **Header + Message List + Composer** and wire the back button to clear selection. + +```tsx +const Messages = ({ + user, + group, + onBack, +}: { + user?: CometChat.User; + group?: CometChat.Group; + onBack: () => void; +}) => ( + + + + + +); +``` + +### **Step 3: Toggle list vs. chat** + +Hide the list when a chat is open; show it again when the header back button is tapped. ```tsx // src/ConversationMessage.tsx -import React, { useRef, useState } from "react"; -import { View, StyleSheet, TouchableOpacity, type ViewStyle } from "react-native"; +import React, { useState } from "react"; +import { View, StyleSheet, type ViewStyle } from "react-native"; import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer, CometChatUiKitConstants, - Icon, - useTheme, - CometChatUIKit, } from "@cometchat/chat-uikit-react-native"; import { CometChat } from "@cometchat/chat-sdk-react-native"; @@ -45,59 +89,17 @@ const ConversationMessage: React.FC = () => { const [messageUser, setMessageUser] = useState(); const [messageGroup, setMessageGroup] = useState(); - const Messages = ({ - user, - group, - onBack, - }: { - user?: CometChat.User; - group?: CometChat.Group; - onBack: () => void; - }) => { - const theme = useTheme(); - const loggedInUser = useRef(CometChatUIKit.loggedInUser!).current; - - const TrailingView = ({ user, group }: { user?: CometChat.User; group?: CometChat.Group }) => { - if (group) { - return ( - - console.log("Group info pressed")}> - - - - ); - } - - if (user && !user.getBlockedByMe()) { - return ( - - console.log("User info pressed")}> - - - - ); - } - - return <>; - }; - - return ( - - - - - - ); + const onBack = () => { + setMessageUser(undefined); + setMessageGroup(undefined); }; + const showList = !messageUser && !messageGroup; + return ( <> { const isUser = conversation.getConversationType() === CometChatUiKitConstants.ConversationTypeConstants.user; @@ -110,14 +112,11 @@ const ConversationMessage: React.FC = () => { /> {(messageUser || messageGroup) && ( - { - setMessageUser(undefined); - setMessageGroup(undefined); - }} - /> + + + + + )} ); @@ -125,13 +124,12 @@ const ConversationMessage: React.FC = () => { const styles = StyleSheet.create({ root: { flex: 1 }, - appBarContainer: { flexDirection: "row", marginLeft: 16 }, }); export default ConversationMessage; ``` -Place `ConversationMessage` anywhere after login, for example inside your root screen or navigator. +Mount `ConversationMessage` after login inside your navigator or root screen. *** @@ -146,7 +144,6 @@ npm run ios ## **Tips** -* Tapping a conversation sets `messageUser` or `messageGroup`, which hides the list and shows the chat. -* `CometChatMessageHeader` renders a **Back** button; the handler clears the selection to return to the list. -* Use `TrailingView` to add quick actions (e.g., **info**, **block**, **call**) on the header. - +* Use `showBackButton` to return to the list on mobile. +* Swap the `TrailingView` prop on `CometChatMessageHeader` to add actions (info, block, call). +* Customize the list and message styling with the **Theme** APIs. diff --git a/ui-kit/react-native/react-native-one-to-one-chat.mdx b/ui-kit/react-native/react-native-one-to-one-chat.mdx index a67e550d..2687f5a2 100644 --- a/ui-kit/react-native/react-native-one-to-one-chat.mdx +++ b/ui-kit/react-native/react-native-one-to-one-chat.mdx @@ -11,12 +11,44 @@ The **One-to-One Chat** view focuses on a single conversation—perfect for supp ## **User Interface Preview** + + + + 1. **Chat Header** – recipient details and optional actions. 2. **Message List** – live history for the user or group. 3. **Message Composer** – send text, media, and reactions. *** +## **Step-by-Step Guide** + +### **Step 1: Add the Chat Header** + +Show profile details and optional actions like calls or info. + +```tsx + +``` + +### **Step 2: Render the Message List** + +Stream chat history and real-time messages for the selected user or group. + +```tsx + +``` + +### **Step 3: Include the Composer** + +Send text, media, and reactions. The composer hides automatically when blocked/read-only. + +```tsx + +``` + +*** + ## **Implementation** Fetch the user (or group) and render **Header + Message List + Composer**. The composer hides automatically when a user is blocked or read-only. @@ -109,4 +141,3 @@ npm run ios * Pass **`uid`** for one-to-one or **`guid`** for group chat; only one should be set at a time. * Add calling by installing `@cometchat/calls-sdk-react-native` and enabling call buttons in the header. * Wrap the screen in your navigator to handle back navigation (e.g., React Navigation `Stack`). - diff --git a/ui-kit/react-native/react-native-tab-based-chat.mdx b/ui-kit/react-native/react-native-tab-based-chat.mdx index 629acba1..499e7dcd 100644 --- a/ui-kit/react-native/react-native-tab-based-chat.mdx +++ b/ui-kit/react-native/react-native-tab-based-chat.mdx @@ -9,8 +9,12 @@ This guide builds a **tabbed messaging UI** with separate tabs for **Chats, Call ## **User Interface Overview** + + + + * **Tabs** – switch between Chats, Calls, Users, and Groups. -* **Sidebar per tab** – conversation list, call logs, users, or groups. +* **Contextual list** – conversation list, call logs, users, or groups per tab. * **Message View** – header + messages for the selected user/group. * **Composer** – send messages with attachments and reactions. @@ -22,17 +26,45 @@ Initialize and log in with the [Integration](./react-native-integration) steps f *** -## **Install navigation dependencies** +## **Step-by-Step Guide** + +### **Step 1: Install navigation** ```bash npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens ``` -*** +### **Step 2: Create the messages screen** -## **Implementation** +Header + message list + composer with a back button that returns to tabs. -The example below wires a bottom tab navigator to a stack. Selecting a conversation pushes the **Messages** screen. +```tsx +const MessagesRoot = ({ route, navigation }: any) => { + const { user, group } = route.params || {}; + return ( + + navigation.popToTop()} + showBackButton + /> + + + + + + ); +}; +``` + +### **Step 3: Wire tabs to the stack** + +Use a bottom tab navigator for **Chats, Calls, Users, Groups**. Selecting a conversation pushes the **Messages** screen. ```tsx // src/examples/TabScreen.tsx @@ -66,30 +98,6 @@ import { CometChat } from "@cometchat/chat-sdk-react-native"; const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); -// Messages screen (header + list + composer) -const MessagesRoot = ({ route, navigation }: any) => { - const { user, group } = route.params || {}; - return ( - - navigation.popToTop()} - showBackButton - /> - - - - - - ); -}; - -// Tab screens const Conversations: React.FC = () => { const navigation = useNavigation>(); return ( @@ -136,7 +144,6 @@ const Users: React.FC = () => { ); }; -// Bottom tabs const BottomTabNavigator = () => ( @@ -146,7 +153,6 @@ const BottomTabNavigator = () => ( ); -// Root stack const TabScreen = () => { const theme = useTheme(); const NavigationTheme = { @@ -189,4 +195,3 @@ npm run ios * The **Chats** tab passes either `{ user }` or `{ group }` into the **Messages** stack screen. * Use `CometChatMessageHeader`'s back button to return to tabs; add `BackHandler` if you want to handle Android hardware back. * Customize icons, colors, and typography via the **ThemeProvider** and `useTheme`. - From f7c98b152f8947c35acf84746945e713c7b80a9a Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 12:13:37 +0530 Subject: [PATCH 5/5] Update react-native-integration.mdx --- .../react-native/react-native-integration.mdx | 67 +++++++++++++++++-- 1 file changed, 62 insertions(+), 5 deletions(-) diff --git a/ui-kit/react-native/react-native-integration.mdx b/ui-kit/react-native/react-native-integration.mdx index 5cd4ec98..3c34759f 100644 --- a/ui-kit/react-native/react-native-integration.mdx +++ b/ui-kit/react-native/react-native-integration.mdx @@ -186,11 +186,68 @@ CometChatUIKit.getLoggedInUser().then((user) => { ### **Step 5: Pick your chat experience** -Start from the scenario that matches your UX: +Choose the layout that fits your UX. Each option is prebuilt and mobile-ready. -* [Conversation List + Message View](./react-native-conversation) -* [One-to-One/Group Chat](./react-native-one-to-one-chat) -* [Tab Based Chat (Chats, Calls, Users, Groups)](./react-native-tab-based-chat) +*** + +#### **1️⃣ Conversation List + Message View** + +**Best for:** WhatsApp/Slack-style layouts that switch between multiple chats. + +**Features:** + +* **Two-panel flow** – list on one side, chat on the other; auto-hides list on mobile when a chat opens. +* **One-to-one & group switching** – tap a row to open that user or group. +* **Real-time updates** – live presence, typing indicators, and message sync. + + + + + +[Integrate Conversation List + Message](./react-native-conversation) + +*** + +#### **2️⃣ One-to-One/Group Chat** + +**Best for:** Focused, full-screen messaging without a sidebar. + +**Features:** + +* **Dedicated chat window** – pass a UID or GUID to render the chat. +* **Optimized for mobile** – minimal chrome, maximum space for messages. +* **Composer controls** – hides automatically if the user is blocked/read-only. + + + + + +[Integrate One-to-One/Group Chat](./react-native-one-to-one-chat) + +*** + +#### **3️⃣ Tab-Based Chat Experience** + +**Best for:** Apps that need quick navigation between Chats, Calls, Users, and Groups. + +**Features:** + +* **Bottom tabs + stack** – tabs for lists, stack screen for messages. +* **Contextual lists** – conversations, call logs, users, or groups per tab. +* **Mobile-first** – header back button returns to tabs; supports hardware back handling. + + + + + +[Integrate Tab-Based Chat](./react-native-tab-based-chat) + +*** + +## **Build your own** -You can swap components or theme them later using the **Theming** docs. +Prefer to assemble custom flows? Start with the component docs: +* [Components Overview](./components-overview) +* [Core Features](./core-features) +* [Theme & Styling](./theme)