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


The UI Kitβs customizable 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.
I want to explore the sample app
Kindly, click on below button to download our React Native Chat Sample App.
Installation Steps
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)
Installing CometChat React Native Chat UI Kit
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/[email protected] --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-community/async-storage
@cometchat-pro/react-native-calls
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 set up 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4, and SUPERHERO5.
Add UI Kit to your project
- Clone this repository.
https://github.com/cometchat-team/cometchat-pro-react-native-chat-ui-kit.git
- 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
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 website/application.


import {CometChatUI} from './react-native-chat-ui-kit';
function StackNavigator(props) {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator
headerMode="none"
initialRouteName={props.isLoggedIn ? 'HomePage' : null}>
<Stack.Screen name="LoginPage" component={LoginPage} />
<Stack.Screen name="HomePage" component={HomePage} />
<Stack.Screen
name="CometChatUI"
component={CometChatUI}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Checkout our sample app
Visit our React Native App repo to run the React Native sample app.
Updated 3 days ago
What's Next
Explore Customizable UI Components |