Skip to main content
Introducing CometChat UIKitV4 UI kits offer modular design, extended functionality & customization for a tailored chat experience. Check out our new UIKits here.
The CometChat React Native UI Kit cuts development efforts significantly when integrating text, voice and video messaging into your React Native chat application.
The React Native UI Kit’s customizable React Native chat UI components simplify the process of integrating text chat and voice/video calling features to your website or mobile application in a few minutes.

I want to checkout React Native Chat UI Kit.

Follow the steps mentioned in the README.md file.Kindly, click on below button to download our React Native Chat UI Kit..React Native Chat UI KitView on Github

I want to explore the sample app

Kindly, click on below button to download our React Native Chat Sample App.React Native Sample AppView on Github

​
Prerequisites

Before you begin, ensure you have met the following requirements:
  1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)
  2. Node
  3. npm
  4. React-Native

​
Installing the React Native Chat UI Kit

ImportantPlease follow the steps provided in the Key Concepts to create V3 apps before you proceed.

​
Setup

  1. Register on CometChat
    • To install React Native UI Kit, you need to first register on the CometChat Dashboard. Click here to Sign Up.
  2. 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.
  3. Add the CometChat dependency
  • CLI
npm install @cometchat-pro_react-native-chat@3.0.2 --save
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-safe-area-context
react-native-webview
react-native-swipe-list-view

​
Configure CometChat inside your React Native app

  • 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.
  • JavaScript
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.
  },
);
Replace APP_ID and REGION with your CometChat App ID and Region in the above code
  • 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.
  • JavaScript
import {CometChat} from '@cometchat-pro/react-native-chat';

const authKey = 'AUTH_KEY';
const uid = 'cometchat-uid-1';

CometChat.login(uid, authKey).then(
  (user) => {
    console.log('Login Successful:', { user });
  },
  (error) => {
    console.log('Login failed with exception:', { error });
  },
);
Replace AUTH_KEY with your CometChat Auth Key in the above code.
We have set up 5 users for testing having UIDs: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, and cometchat-uid-5.We have used uid cometchat-uid-1 as an example here. You can create a User from CometChat Dashboard as well.

​
Add the React Native chat UI components to your project

  • Clone this repository.
  • CLI
https://github.com/cometchat-pro/cometchat-pro-react-native-ui-kit.git -b v3
  • Copy the cometchat-pro-react-native-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

​
Launch CometChat

CometChatUI is an option to launch a fully functional chat application using the React Native Chat UI Kit. In CometChatUI all the UI Components are interlinked and work together to launch a fully functional chat on your website/application.
  • JavaScript
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>
  );
}

​
Check out our React Native sample app

Visit our React Native repo to run a sample app featuring these React Native chat components.
⌘I