How to Build a Chat App using ReactNative and Firebase (LinkedIn Clone)
Tags: reactnative, chatapp, firebase, cometchat
Published: 2021-12-21 03:01:45

What you’ll be building. See live [demo](https://rn-linkedin-clone-a1b25.firebaseapp.com/) and Git Repo [Here](https://github.com/Daltonic/linkedIn-clone).

![LinkedIn Clone Posts](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639677685600_linkedin-clone-2.gif)
![LinkedIn Clone Chat](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639826554331_linkedin-clone-chat-2.gif)

## Introduction

Do you want to advance in your app development career? Then it's time to complete this LinkedIn Clone Project. We will create a LinkedIn Clone using ReactNative, which will vastly improve your understanding of this cross-platform framework. This tutorial was put together with the help of [ReactNative](https://reactnative.dev/), [Firebase](https://console.firebase.google.com/), and [CometChat](https://app.cometchat.com/). We will be creating project with your JavaScript skills, as shown in the images above.

If you want to add this project to your portfolio, then jump on the keyboard with me and we'll figure it out.

## Prerequisite

To digest this tutorial, you should already have ground knowledge of ReactNative, the rest of the stacks can easily be understood with no hassle. Listed below are the packages used for developing this application.

- [ReactNative](https://reactnative.dev/)
- [Firebase](http://)
- [CometChat](https://app.cometchat.com/)
- [Formik](http://)
- [Yup](http://)
- [ReactNative Media Query](https://www.npmjs.com/package/react-native-media-query)
- [Expo](http://)
- [NodeJs](http://)


## Installing The Project Dependencies

First, Download and Install NodeJs on your machine, visit their [website](https://nodejs.org/) and complete the installation if you haven’t already. Next, you need to have the Expo-CLI installed on your computer using the command below. You can visit their doc page using this [link](https://docs.expo.dev/get-started/installation/).


    # Install Expo-CLI
    npm install --global expo-cli

Afterward, open the terminal and create a new expo project with the name linkedin-clone and choose the blank template when prompted. Use the example below to do this.


    #Create a new expo project and navigate to the directory
    expo init linkedin-clone
    cd linkedin-clone
    
    #Start the newly created expo project
    expo start

Running the above commands on the terminal will create a new react-native project and start it up on the browser. Now you will have the option of launching the IOS, Android, or the Web interface by simply selecting the one that you want. To spin up the development server on IOS or Android you will need a simulator for that, use the instruction found here to use an [IOS](https://docs.expo.dev/workflow/ios-simulator/) or [Android](https://docs.expo.dev/workflow/android-studio-emulator/) simulator, otherwise, use the web interface and follow up the tutorial.

Awesome, now let's install these essential dependencies for our project using the instruction below. The default package manager for the expo is yarn, see the codes below.


    # Install the native react navigation libraries
    yarn add @react-navigation/native
    yarn add @react-navigation/native-stack
    
    #Installing dependencies into an Expo managed project
    expo install react-native-screens react-native-safe-area-context
    
    # Install Yup and Formik for validating our forms
    yarn add formik yup

Amazing, now let’s set up Firebase for this project.


## Setting Up Firebase

First, run the command below on your expo project terminal. Use the code below to properly install it.


    #Install firebase with the command
    expo install firebase

Good, let's set up the firebase console for this project including the services we will be using.

We will proceed by signing up for a firebase account if you don’t have one already. Afterward, head to Firebase and create a new project named linkedin-clone, activate the email and password authentication service, details are spelled out below.


![Firebase Projects page](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828562449_screenshoteasy+6.png)

![Step 1](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828654829_screenshoteasy+7.png)
![Step 2](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828654775_screenshoteasy+9.png)
![Step 3](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828654724_screenshoteasy+10.png)


Firebase provides support for authentication using different providers. For example, Social Auth, phone numbers, as well as the standard email and password method. Since we’ll be using the email and password authentication method in this tutorial, we need to enable this method for the project we created in Firebase, as it is by default disabled. Under the authentication tab for your project, click the sign-in method and you should see a list of providers currently supported by Firebase.


![Firebase Authentication Service](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828824288_screenshoteasy+14.png)



![Step 1](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828837286_screenshoteasy+15.png)
![Step 2](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639828837321_screenshoteasy+16.png)


Epic, let's activate the Firestore service which we will be used for storing all the posts coming from our linkedin-clone application.

To activate the Firestore service, navigate to the Firestore tab on the sidebar as seen in the images below and click on “create database”.

![Firestore Service](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639829110627_screenshoteasy+17.png)


Next, go to the Firestore rules and make the changes as seen in the images below.

![Initial Rule](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639907289162_screenshoteasy+18.png)
![Updated Rule](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639907289111_screenshoteasy+19.png)


Next, we want to use the timestamp as an index for ordering our posts, to do so, we have to create an index for it. Follow the process as seen in the images below.


![Cloud Firestore Index](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639907289224_screenshoteasy+20.png)


Click on the single field tab and add an exception as seen in the image below.

![Firestore Exception](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639908395378_screenshoteasy+21.png)


Enter posts as the collection ID and timestamp as the field. Click next, and enable the scopes as seen in the images below.

![Step 1](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639908316736_screenshoteasy+22.png)
![Step 2](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639908316699_screenshoteasy+23.png)


If you have done the above steps correctly, you should have the same result as seen in the image below.


![Exception Creation in Progress, takes up to 5min](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639908776186_screenshoteasy+24.png)


Once everything is completed, the loading indicators on the exception blocks should disappear and should now look like this.


![After The Creation](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639908903668_screenshoteasy+25.png)


Nice, you have set up all that we will need for the Firestore services, now lets generate the Firebase SDK configuration keys.

You need to go and register your application under your Firebase project. 

![Project Overview Page](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639909074851_screenshoteasy+8.png)


On the project’s overview page, select the add app option and pick web as the platform.


![Registering a Firebase SDK](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639909239261_screenshoteasy+11.png)


Once you finish up the SDK config registration, navigate back to the project overview page as seen in the image below.

![Project overview page](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639909377460_screenshoteasy+13.png)


Now you click on the project settings to copy your SDK configuration setups.

![Project Setups](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639909446593_screenshoteasy+12.png)


The config keys seen in the image above must be copied to a separate file which we will later use in the course of this project.

Create a file in the root of this project called firebase.js and paste the following codes and save.


{% gist https://gist.github.com/Daltonic/a44a6277a91984c549ff37084c537999 %}


If you followed all that correctly, you are awesome. Now we will do a similar thing for CometChat next.

## Setting CometChat

Head to [CometChat](https://app.cometchat.com/app/) and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below.

![CometChat Dashboard](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639910070150_screenshoteasy+26.png)


Click on the **Add New App** button to create a new app, you will be presented with a modal where you can enter the app details to be created. An example is seen in the image below.


![Add New App Modal](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639910331236_screenshoteasy+27.png)


After the app creation, you will be navigated to your app dashboard which should look like this.

![App Dashboard](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639910557657_screenshoteasy+28.png)


You will also need to copy those keys to a separate file in the manner below. Simply create a file called **CONSTANTS.js** in the root of the project and paste the code below. Now list this file in the gitIgnore file which is also at the root of this project, this will make sure it won’t be published online.


    export const CONSTANTS = {
      APP_ID: 'xxx-xxx-xxx',
      REGION: 'us',
      Auth_Key: 'xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx',
    }

Fantastic, that will be enough for the setups, let’s start integrating them all into our application.

## The Components Directory

We have several directories in this project, let's start with the components folder. Create a folder called components within the root of this project. Let's start with the Header component.

**Header Component**

![Header Component](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639911028141_screenshoteasy+29.png)


Using the power of react-native-media-query, you will be able to craft out the header component as seen in the image above.


{% gist https://gist.github.com/Daltonic/47b5b713a69f878d0401ac64bbd44d86 %}


Cool, lets add the next component to the components directory.

**The BottomTabs Component**

![BottomTabs](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639911677871_screenshoteasy+31.png)


This sticky component is seen at the bottom of the HomeScreen. When you click on the post button, you will be navigated to the **AddPostScreen**. Create a component called **BottomTabs.js** and paste the codes below into it. See the code snippet below.


{% gist https://gist.github.com/Daltonic/33964b5d8681e52a8b69411245291a8b %}


Lastly, lets include the card component for this project.

**The Card Component**

![The Card Component](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639912576050_screenshoteasy+32.png)


This is a well-crafted card with many parts to it, it's better to see the code yourself. Create a component called **Card.js** in the components directory and paste the codes below into it.


{% gist https://gist.github.com/Daltonic/73bc8a12b8efeef5dddf0ca29ac2776e %}


Awesome, we are just done with the components directory, its time we create the screens.


## The Screens Directory

The screens can be likened to pages on a website, each screen represents a page and you can navigate from screen to screen using the **ReactNative** navigator package. Let's proceed with the **SignupScreen**.

**The Signup Screen**

![The Signup Screen](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639988397801_screenshoteasy+34.png)


This screen is responsible for creating new users. It interfaces between Firebase authentication and CometChat’s. With this screen, you will be able to signup new users to Firebase, and also to CometChat all at once. See the codes below.


{% gist https://gist.github.com/Daltonic/755864868afddc3f3755a0d551a39cf6 %}


**The Login Screen**

![The Login Screen](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639989134344_screenshoteasy+35.png)


This screen authenticates already existing users in our platform. When you log in with your correct details, you will be authenticated both with Firebase and CometChat. If you have supplied the correct data you will be let into the system, otherwise, you will be kicked out. Check out the codes below.


{% gist https://gist.github.com/Daltonic/897f50303e8f8a54c2ab67dc49509945 %}


**The HomeScreen**

![The Home Screen](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639987609004_screenshoteasy+33.png)


The Home Screen comprises three components. The Header, Card, and BottomTabs components. This screen dynamically renders the Card component in synchronization with the posts in Firestore. See the code snippet below.


{% gist https://gist.github.com/Daltonic/cbc5e968757479400d191f6dfc6f452b %}


**The AddPostScreen**

![The AddPost Screen](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639989930072_screenshoteasy+36.png)


This screen is responsible for creating new posts. Using Formik and Yup, we collect data from a form and save it to the Firestore database. Here are the codes exhibiting this behavior.


{% gist https://gist.github.com/Daltonic/b3327deb9c3bd35edbae42053508bc6c %}


**The ChatsListScreen**

![The Chats List Screen](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639990304179_screenshoteasy+37.png)


The ChatList Screen is responsible for listing all users registered on our platform. Using the CometChat SDK we will retrieve the list of users registered with us. This is how the code looks like.


{% gist https://gist.github.com/Daltonic/66e00f9489688f94526d2febaba569b5 %}


**The ChatScreen**

![The Chat Screen](https://paper-attachments.dropbox.com/s_0CD8CF1F8D288F8B67E35429489539F2DEF742656388B21AFE423365DCE87673_1639990611832_screenshoteasy+38.png)


Lastly, we have the chat screen where users engage in a one-on-one chat. Below is the code for it.


{% gist https://gist.github.com/Daltonic/633053fdeafbf05daac7f3c3a7539574 %}



## Setting Up The Router

Now that we have the project all coded, let's set up the navigation routers and guards, create and paste the following codes as directed below.

**The Navigation file**
This categorizes the screens into two groups, the ones requiring authentication and the others not requiring authentication.
Create a new file in the root of the project name **“navigation.js”** and paste the codes below inside of it.


{% gist https://gist.github.com/Daltonic/73cbff9ffefda546647936ca86826305 %}


**The AuthNavigation file**
This file logically presents screens to you based on the authState of the firebase authentication service. To proceed, create another file in the root of the project name **“AuthNavigation.js”** and paste the codes below inside of it.


{% gist https://gist.github.com/Daltonic/1d028897dfddced1495a9c413e5a7685 %}


**The App file**
Lastly, replace the codes in the **App.js** file with the following codes.

{% gist https://gist.github.com/Daltonic/2874cf71fa2d6f2f7572dadffbf1b346 %}


Congratulations, you just crushed this app, you just need to bring in some of the static images.

Download the following images and put them in your assets directory.

[https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/logo.png](https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/logo.png)

[https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/avatar.jpg](https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/avatar.jpg)

[https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/default-avatar.jpg](https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/default-avatar.jpg)

Awesome, you can spin up your server using the code below on your terminal if you have not done that already.


    # Start your ReactNative local server on the web view
    yarn web


## Conclusion

Nothing is impossible here; you can crush a chat app with [ReactNative](https://reactnative.dev/), [Firebase](http://), and [CometChat](http://). You've seen how to implement it step by step; now it's time to crush other chat apps on your own. I also have other tutorials that will show you how to create a private or public group chat. I'm looking forward to seeing your stunning creations.


## About the Author

Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and more.

He is currently freelancing, building apps for clients, and writing technical tutorials teaching others how to do what he does.

Gospel Darlington is open and available to hear from you. You can reach him on [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125/), [Facebook](https://www.facebook.com/darlington.gospel01), [Github](https://github.com/Daltonic), or on his [website](https://daltonic.github.io/).