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.
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
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.
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.
Click the edit icon on the email/password provider and enable it.
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
Click on the “Create Database” option to create a new Firebase database
Select the location where your realtime database will be stored
Select the “Start in test mode” option when setting up the database
You should now be able to se your database in Firebase
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.
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
Click on the “Next” button
Click on the “Done” button
Update the Firebase Storage rules so that everyone, who can access the application, can upload files
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.
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
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.
Project Structure - Client Side
The image below reveals the project structure after we follow this tutorial. This section will talk about some important folders
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.
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
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
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
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
Copy the cometchat-pro-react-native-ui-kit folder to your source folder.
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.
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:
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.
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.