CometChat React Native UI Kit

CometChat React Native UI Kit is a collection of custom UI Components designed to build text chat and voice/video calling features in your application.

The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

---

Prerequisites

Before you begin, ensure you have met the following requirements:

• A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

• Node

• npm

• React-Native

Note: Support for Expo CLI based apps.
If you are using Expo CLI to build a React Native app, the calling component will not work as our calling component needs native-level changes.However, you can create a React Native app using React Native CLI or use the 'expo eject' command to convert your app from an expo-managed workflow to a bare workflow.

---

Installing CometChat React Native UI Kit

1. Setup 🛠

To install React-Native UI Kit, you need to first register on CometChat Dashboard. Click here to sign up

i. Get your Application Keys 🔑

• Create a new app
• Head over to the Quick Start or API & Auth Keys section and note the App ID, Auth Key, and Region.

ii. Add the CometChat Dependency

 npm install @cometchat-pro/react-native-chat@3.0.6 --save

iii. Other required DEPENDENCIES

These packages help make the ui-kit smooth and functioning

react-native-sound
react-native-vector-icons
react-native-elements
react-native-fast-image
react-native-image-picker
react-native-document-picker
react-native-gesture-handler
react-native-reanimated
reanimated-bottom-sheet
react-native-video
react-native-video-controls
@react-navigation/bottom-tabs
@react-navigation/native
@react-navigation/stack
@react-native-picker/picker
react-native-async-storage/async-storage
@cometchat-pro/react-native-calls
rn-fetch-blob
react-native-autolink
react-native-screens
emoji-mart-native
react-native-keep-awake
react-native-webview
react-native-swipe-list-view

2. Configure CometChat inside your app

i. Initialize CometChat 🌟

The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the created() method of the Application class.

import { CometChat } from "@cometchat-pro/react-native-chat";

const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder()
  .subscribePresenceForAllUsers()
  .setRegion(region)
  .build();
CometChat.init(appID, appSetting).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  },
  (error) => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.
  }
);

Note:

• Replace APP_ID and REGION with your CometChat App ID and Region in the above code.

ii. Login your user 👤

This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user..

import { CometChat } from "@cometchat-pro/react-native-chat";

const authKey = "AUTH_KEY";
const uid = "SUPERHERO1";

CometChat.login(uid, authKey).then(
  (user) => {
    console.log("Login Successful:", { user });
  },
  (error) => {
    console.log("Login failed with exception:", { error });
  }
);

Note:

• Replace AUTH_KEY with your CometChat Auth Key in the above code.

• We have setup 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3,SUPERHERO4 and SUPERHERO5.

3. Add UI Kit to your project

• Clone this repository.
• Copy the react-native-chat-ui-kit folder to your source folder.
• Copy all the peer dependencies from package.json into your project's package.json and install them using npm install.

4. Launch CometChat

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In CometChatUI all the UI Components are interlinked and work together to launch a fully functional chat on your React Native application.

Usage of application in project

import React from "react";
import { View } from "react-native";
import { CometChatUI } from "../cometchat-pro-react-native-ui-kit";

export default function CometChatUIView() {
  return (
    <View style={{ flex: 1 }}>
      <CometChatUI />
    </View>
  );
}

---

Checkout our sample app

Visit our React-Native sample app repo to run the React-Native sample app.

---

Troubleshooting

• To read the full documentation on UI Kit integration visit our Documentation.

• Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in CometChat Dashboard.

---

Contact 📫

Contact us via real time support present in CometChat Dashboard.