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@2.3.0 --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

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.

no-1ne / cometchat-pro-react-native-ui-kit