Skip to content

adds react native docs #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
swapnil-cometchat wants to merge 5 commits into
base: main
Choose a base branch
from
Open

adds react native docs #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
08612b0
adds react native docs
swapnil-cometchat Jan 5, 2026
2f3ae5c
updates text
swapnil-cometchat Jan 5, 2026
e61fceb
Update getting-started.mdx
swapnil-cometchat Jan 5, 2026
8d45ddb
updates docs
swapnil-cometchat Jan 5, 2026
f7c98b1
Update react-native-integration.mdx
swapnil-cometchat Jan 5, 2026
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
10 changes: 9 additions & 1 deletion docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,7 +843,15 @@
"group": " ",
"pages": [
"ui-kit/react-native/overview",
"ui-kit/react-native/getting-started",
{
"group": "Getting Started",
"pages": [
"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": [
Expand Down
210 changes: 112 additions & 98 deletions ui-kit/react-native/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,173 +4,197 @@ 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.

<Frame>
<img src="/images/4c141125-Instant_Messaging-3e86359342605c94dc912604de8f6617.png" />
</Frame>
***

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

<Tip>

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

</Tip>

***

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

<Tabs>
<Tab title="Bash">
<Tab title="React Native CLI">

```sh
npx @react-native-community/cli init ChattingApp
```

<Warning>

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.

</Warning>

</Tab>
<Tab title="Expo">

```sh
npx create-expo-app ChattingApp
```

</Tab>
</Tabs>

***

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

<Tabs>
<Tab title="Bash">
<Tab title="npm">

```sh
npm i @cometchat/chat-uikit-react-native
npm install @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native
```

</Tab>
<Tab title="yarn">

</Tabs>
```sh
yarn add @cometchat/chat-uikit-react-native @cometchat/chat-sdk-react-native
```

***
</Tab>
</Tabs>

#### Other Dependencies
Peer dependencies often used by the UI Kit:

<Tabs>
<Tab title="Bash">
```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
```

</Tab>
<Note>

</Tabs>
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`.

</Note>

***

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

<Tabs>
<Tab title="XML">
```xml
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.VIBRATE" />
```

</Tab>
***

</Tabs>
### 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
}
```

<Note>

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

</Note>

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

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

</Warning>
***

1. You can install `@cometchat/calls-sdk-react-native` Calling SDK for React Native using below command.
### Step 6: Choose a chat experience

<Tabs>
<Tab title="Bash">
```sh
npm i @cometchat/calls-sdk-react-native
```
Pick the layout that matches your UX:

</Tab>
* [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)

</Tabs>
***

## Optional: Calling support

2. Install dependancies required for call SDK to work
1. Install the Calls SDK (v3+):

<Tabs>
<Tab title="Bash">
```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
```

</Tab>
2. Install required dependencies:

</Tabs>
```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**

<Tabs>
<Tab title="XML">
```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
Expand All @@ -179,25 +203,15 @@ React Native UI Kit supports Calls SDK V3 or higher.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```

</Tab>
**iOS**

</Tabs>

**iOS:**

<Tabs>
<Tab title="XML">
```xml
<key>NSCameraUsageDescription</key>
<string>This is for Camera permission</string>
<string>Camera permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>This is for Mic permission</string>
<string>Microphone permission</string>
```

</Tab>

</Tabs>

***

Step 3
Expand Down
Loading