This tutorial is outdated. We're currently working on an updated version. In the meantime, for instructions on building a chat app using CometChat, please visit our documentation.
App and web development have come a long way over the last few years. We use a lot of social applications, and chat applications every day. This tutorial will teach you how to create your own chat application with React Native, Firebase, and the CometChat UI Kit.
We will cover the following topics:
Registering users, login, and login out, we will use the Firebase Authentication service to create new accounts and authenticate users.
Using the CometChat React Native UI Kit. We will use the CometChatUI component to implement chat, voice, and video calling features, and the CometChatUserList component to show the list of users with the search bar. For more information about the CometChat React Native UI Kit components, you can refer to this link.
Prerequisites
To follow this tutorial, you must understanding the basics of using React Native. You will also need to have Node.js installed.
Installing the App Dependencies
Create a new project named clubhouse with version 0.63.3 by running the following command
npx react-native init react-native-chat-app --version 0.63.3
Copy the dependencies from here and run the following command
npm i --force
You need to increase the minimum target version for ios in the Podfile to 11. For more information about how to setup CometChat in Android and IOS, you can refer to this link
Navigate to the ios folder and run pod install. Once all the pods are installed navigate back to the root folder.
cd ios && pod install && cd ..
In this application, we need to load SVG files. For this reason, we use the react-native-svg and react-native-svg-transformer libraries. Therefore, we need to update the metro.config.js file as follow.
https://gist.github.com/hieptlccc/45c6f2a1aab0b3fc86176b2983b6bf4b
Configuring the CometChat SDK
In this tutorial, we will be using the CometChat React Native UI Kit. When users log in to our application, they also log in to the CometChat platform.
We can configure the CometChat SDK following the steps below:
Head to CometChat and create an account.
Figure 1. Register a new CometChat account if you do not have one.
Log in to the CometChat dashboard
Figure 2. Log in to the CometChat Dashboard with your created account.
Add a new app, named chat-app
Figure 3. Create a new CometChat app - Step 1.
Figure 4. Create a new CometChat app - Step 2.
Select your new app from the list
Figure 5. Select your created app.
From the Quick Start, copy the APP_ID, REGION, and AUTH_KEY. You will need these later
Figure 6. Copy the the APP_ID, REGION, and AUTH_KEY
Navigate to the Users tab and delete the default users
Figure 7. Navigate to Users tab and delete all the default users
Navigate to the Groups tab and delete the default groups
Figure 8. Navigate to Group tab and delete all the default groups.
Create an env.js file in the root folder of your project. Edit your env.js file to export the CometChat App ID, Region and Auth Key for your app
export const cometChatConfig = {
cometChatAppId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
cometChatRegion: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
cometChatAuthKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
};
Note: include env.js in your .gitignore file to prevent it being tracked by git
Setting up a Firebase Project
We will be using Firebase to allow users to create accounts and store messages through their Realtime Database and Authentication services.
Head over to Firebase and create a new project.
Figure 9. Firebase
Firebase provides support for authentication using different providers, For example, Social Auth, phone numbers, and email address and password combination.
Users will authenticate using an email address and password. By default this method is disabled, so we need to enable it.
Under the authentication tab for your project, click Sign-in method, you should see a list of providers currently supported by Firebase.
Figure 10. Firebase Authentication.
Click the edit icon on the email/password provider and enable it.
Figure 11. Enable Firebase Authentication with Email and Password
Next, you need to enable the Firebase Realtime Database. This will be used to store user information in the app.
To set up the Firebase Realtime Database service in our application, we need to follow the below steps:
Choose the “Realtime Database” option from the navigation on the left
Figure 12. Choose “Realtime Database” option.
Click on the “Create Database” option to create a new Firebase database
Figure 13. Click on “Create Database".
Select the location where your realtime database will be stored
Figure 14. Select location where your realtime database will be stored.
Select the “Start in test mode” option when setting up the database
Figure 15. Select “Start in test mode” for the learning purpose.
You should now be able to se your database in Firebase
Figure 16. Database Url.
You need to set the .indexOn for some fields that we want to query in the app. Select the “Rules” tab an edit it to index the email and fullname fields as follows
We will add the user's information to the Firebase Realtime Database after the user has registered successfully in our application.
We need to add a new field the .indexOn array if we want to fetch the user’s information using that field. In our application, we want to fetch the user’s information using their email or their full name. For this reason, the .indexOn array contains two elements - email and full name.
Figure 17. Update Firebase Realtime Database Rules.
We also need to upload images, and user’s avatars as part of the app, we will store these using the Firebase Storage service.
To enable the Firebase Storage service, please follow the steps below:
Click on the “Storage” option on the left, then click on the “Get started” button
Figure 18. Enable Firebase Storage Service.
Click on the “Next” button
Figure 19. Click on the “Next” button
Click on the “Done” button
Figure 20. Click on the “Done” button
Update the Firebase Storage rules so that everyone, who can access the application, can upload files
Figure 21. Update the rules.
After registering the Firebase services (Firebase Realtime Database, Firebase Authentication, Firebase Storage), you need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick web as the platform, and follow the guidelines. After doing that, you should see the below screen.
Figure 22. Firebase Dashboard
After you have setup the Authentication, Realtime Database and Storage services, you’ll be presented with a screen containing your application credentials which need to be added to your env.js file, like the example below
Figure 23. Firebase credentials.
export const fbConfig = {
apiKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
authDomain: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
databaseURL: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
projectId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
storageBucket: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
messagingSenderId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
appId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
measurementId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
};
export const cometChatConfig = {
cometChatAppId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
cometChatRegion: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
cometChatAuthKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
};
The image below shows the data structure that we will store in the Firebase Realtime database. In this tutorial, we just need to store the user information, and that information contains the avatar, email, list of followers, full name, and id.
Figure 24. Data Structure - Users
Project Structure - Client Side
The image below reveals the project structure after we follow this tutorial. This section will talk about some important folders
Figure 25. The Project Structure
components: this folder stores components that will be used in the application.
images: this folder contains images that will be used in the application such as audio icon, video icon, settings icon and so on.
env.js: this file stores configuration of the application such as Firebase and CometChat configuration.
context.js this file helps us store the state that will be shared across all components without passing down at every level. For this reason, we can avoid props drilling.
React Context
In this application, we will be using the React Context API to pass data between different components. the React Context API helps us pass data through the component tree without passing it down every level individually. Please create a context.js file inside the src folder. The full source code of the context.js file can be found here
Images
You can get a copy of all the images used in this application here. Create an images folder inside the src folder, and add all of the images from the link above
The Firebase.js File.
The firebase.js file will take responsibility to interact with the Firebase services. For this reason, we need to set up this file in our code base. To set up the firebase.js file, you need to create a firebase.js file inside the root folder of your project. Please refer to the below code snippet below, or the full source code can be found here.
Setting Up Common Services
We create some common services so that we can reuse them in different places. The services folder will contain all of the service files . A copy of the folder can be found here.
firebase.js will contain functions that will be used to interact with Firebase’s services, such as inserting new data toFirebase Realtime Database, or uploading files to the Firebase Storage. Please create a firebase.js file inside the services folder. The full source code can be found here.
ui.js will contain functions that are related to the UI, such as showing an alert message. Please create the ui.js file inside the services folder. The full source code can be found here.
The App.js File
The App.js file is responsible for rendering different components based on the state of the application. For example, it will render the login page if the user has not logged in, yet or it renders the home page if the user has signed in to the system.
It will also be used to initialize CometChat. The full source code of the app.js file can be found here.
The code below initialize CometChat using your CometChat API Credentials from the .env.js file.
The Login Component
Figure 26. The Login Component
This component is responsible for authenticating our users. It accepts the users credentials and either signs them up or in, depending on if they are a new user or not. The steps below explain the authentication flow.
Step 1: Users input their credentials (email/password).
Step 2: The application validates the credentials.
Step 3: If the credentials are valid, the application calls the Firebase Authentication service using those credentials.
Step 4: If the Firebase Authentication service returns the user’s aid the application continues to log in to the CometChat using the returned uid.
Step 5: If the CometChat service returns a valid response, the application calls the Firebase Realtime Database service to get the authenticated information, and then store that information in Async Storage. When we need to get the authenticated information, we just need to get the data from Async Storage instead of calling the Firebase Realtime Database service.
The code below is responsible for how our app interacts with the Firebase Authentication service, and the CometChat SDK.
Please create a components folder inside the root directory of the project. The components folder should also contain a login folder with a file named Login.js. The full source code for the Login.js file can be found here.
We store the authenticated Information in the async storage so that users don’t have to login each time they visit the app.
To login to the CometChat, we call the loginCometChat function, you can refer to the below code snippet for more information. This function is used inside the Login.js file as we can see from the above code snippet.
The Sign Up Component
Figure 27. The Sign Up Component
The sign-up component will help users to register new accounts. This component will do two things. The first thing is to register new accounts by calling the create user API. Aside from that, it also registers new accounts on CometChat by using the CometChat SDK.
Create a register folder inside the components folder, and create a SignUp.js file inside it. The full source code can be found here.
To create a new CometChat account, we call the createCometChatAccount function. This function will be used inside the SignUp.js as we can see in the above code snippet. Following that, you can refer to the below code snippet below for more information.
Add the CometChat UI to our Application
Before we can use the CometChat Pro React Native UI kit, we need to add it in our project so that we can reference it. In this case, we are using React Native UI Kit v3.0.6-3
Clone the CometChat React Native UI Kit Repository like so. For more information about React Native UI Kit, you can check this link.
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.
Figure 28. Add the CometChat UI Kit to the React Native project.
Check your current package.json file, if your package.json file does not have the dependencies listed in the peer dependencies section in the image below, copy all the peer dependencies from the package.json, which is in the CometChat React Native UI Kit, into your project's package.json and install them using npm install.
Figure 29. Copy all peer dependencies and install them
As soon as the installation is completed, you now have access to all the React Native UI Components. The React UI kit contains different chat UI components as you can see in the documentation here. It includes:
1. CometChatUI
2. CometChatUserListWithMessages
3. CometChatGroupListWithMessages
4. CometChatConversationListWithMessages
5. CometChatMessages
6. CometChatUserList
7. CometChatGroupList
8. CometChatConversationList
9. CometChatAvatar.
10. CometChatUserPresence
11. CometChatBadgeCount
The Home Component
Figure 30. The Home Component
To show the full chat application, we need to use CometChat Kit. The CometChat team is handling everything for us, they are creating the CometChat SDK that contains the full-text chat, voice, and video calling functionalities. They also provide the CometChat React Native UI Kit, we just need to reuse the components from the UI Kit, and then we can build a full chat application with minimal effort. It means that we do not need to develop everything from scratch. What we need to do is very easy. We just need to import the CometChatUIKit component to get the full features. Please create the “home” folder inside the “components” folder and create the “Home.js” file inside it. The full source code can be found here.
Conclusion
To run the application, we can follow the guides which is mentioned here.
In conclusion, we have done an amazing job in developing a full chat application by leveraging React Native, Firebase, and CometChat UI Kit. You’ve been introduced to the chemistry behind the full chat application and how the CometChat makes the chat application buildable.
You have seen how to build most of the chat functionalities such as real-time messaging using CometChat. I hope you enjoyed this tutorial.
Hiep Le
CometChat
