Build a LinkedIn Chat Clone with React Native and Firebase

What you’ll be building. See live demo and Git Repo Here.

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, Firebase, and CometChat. 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
- Firebase
- CometChat
- Formik
- Yup
- ReactNative Media Query
- Expo
- NodeJs

Installing The Project Dependencies

First, Download and Install NodeJs on your machine, visit their website 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.

# 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 or Android 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 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.

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”.

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

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.

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

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

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

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

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.

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

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

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

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.

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

Setting CometChat

Head to CometChat and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below.

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.

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

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.

The Header Component

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

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

The BottomTabs Component

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.

Lastly, lets include the card component for this project.

The Card Component

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.

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

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.

The Login Screen

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.

The Home Screen

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.

The AddPostScreen

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.

The ChatsListScreen

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.

The ChatScreen

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

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 fileThis 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.

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.

The App file

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

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/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, Firebase, and CometChat. 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.

First published here