How to Build a Private Messaging Chat App with React-Native (Signal Clone)
Tags: reactnative, javascript, chatapp, firebase
Published: 2021-11-01 09:46:30

What you’ll be building. Git Repo [Here](https://github.com/Daltonic/signal-clone).

![Signal Chat App Clone](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635675862780_signal-clone.gif)



## Introduction

Mobile communication applications are here to stay, and they are changing our world, the way we communicate and interact with one another in public, private, and at work. The advancement of modern technologies enables developers all over the world to incorporate these communication features into applications, thereby resolving issues for their various clients and business associates. React Native is a solid JavaScript cross-platform application development framework. It is, without a doubt, one of the most advantageous technologies for developing a chat application. In this tutorial, you will learn how to create a cross-platform private messaging chat app using the power of React Native, Firebase, and Expo.


## Prerequisites

To benefit from this tutorial, you must first understand how to use React Native and Firebase. This will allow you to follow along with the rest of the tutorial. This tutorial utilizes the following technologies.

- [React Native](https://reactnative.dev/)
- [Firebase](https://firebase.google.com/)
- [Expo](https://expo.dev/)


## Installing The Project Dependencies
![Project Dependencies](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635679834081_Screenshot+copy.png)


First, you need to have NodeJs installed on your machine; visit their [website](https://nodejs.org/) to do that.

Second, 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

Next, on the terminal create a new expo project with the name signal-clone and the blank template when prompted.


    #Create a new expo project and navigate to the directory
    expo init signal-clone
    cd signal-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](https://reactnative.dev/docs/environment-setup) to use an IOS or Android simulator, otherwise, use the web interface and follow up the tutorial.

Now, install these essential dependencies for our project using the instruction below. The default package manager for the expo is yarn.


    # 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

Fantastic, now let’s go ahead to setting up Firebase for the project.


## Setting Up Firebase

First, run the command below on your expo project.


    #Install firebase with the command
    expo install firebase

Next, signup for a firebase account if you don’t have one already. Afterward, head to Firebase and create a new project named signal-clone, activate the email and password authentication service, details are spelled out below.


![Firebase Console Create Project](https://res.cloudinary.com/practicaldev/image/fetch/s--SztG1tuD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_94342B8C9D531180A1CAB38C7EF43DFCA121631072793ACD0C6A8FCD3626C584_1618991584708_screenshoteasy.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 Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mdvy9q2ozti1c18jiig.png)

Next, click the edit icon on the **email/password** provider and enable it.

![Firebase Enabling Authentication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqut7quz3uszpf1x9vis.png)

Now, 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.


![Project Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eifuppgdbt6nzisflxkz.png)

Once you’re done registering the application, you’ll be presented with a screen containing your application credentials. Take note of the second script tag as we’ll be using it shortly in our application. Congratulations, now that you're done with the installations, let's do some configurations.

On the Firebase console click on the project settings, you will be navigated to the project settings page.


![Project Settings Page](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635680376232_screenshoteasy+13.png)


Scroll down below, and you will see the project SDK setup and configuration which we will be very instrumental in the course of our project.

![Firebase SDK setup and Configuration](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635680683625_screenshoteasy+14.png)


Copy the firebaseConfig object, create a separate file called firebase.js in the root of your project. Paste the above firebase config object codes in the file and save. This configuration object is to be kept secret in a production app, however, since this is a demo app, let’s just don’t bother with keeping it secret.

The firebase.js file should carry the code snippet below.


{% gist https://gist.github.com/Daltonic/2f042a51dee53a790c95daec299577e9 %}


Note to replace the firebaseConfig object with your firebase config setting. Great, let's take a look at our project structure.

## Project Structure

Your project structure should be looking like this.


![Project Structure](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635681201898_Screenshot+219.png)


You should keep this as a reference guide as you code along. Jump in along with me and let's start creating our project directories and files one after the other.


## 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. Now, in this components folder create a file called the **CustomListItem.js**. This component will later be used to control how we render chats on the **HomeScreen**.


![CustomListItem.js Component](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635681647549_screenshoteasy+10+copy.png)


This **CustomListitem** component includes parameters such as the **chatAvatar**, **chatName**, and a **chatLastMessage**. Below is the code snippet responsible for this behavior.


{% gist https://gist.github.com/Daltonic/3626092b6e77781ab741fed063261004 %}


This intelligent component does more than just render a list of chats. It also watches and renders the last message discussed on that chat group and also the avatar of the last person to say anything in that chat group.
Now, let's make sure our app is secured by authenticating all users before letting them in.
 

## The Login Screen
![The Login Screen](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635682705033_screenshoteasy+12.png)


This screen is responsible for authenticating our already existing users before allowing them to chat with our app. The user must provide an email and password used in registering on our platform. To proceed with this process, create a folder within the root of the project called screens. Next, create a new file called **LoginScreen.js** in the screens directory, paste, and save the code below inside it. The code snippet below best describes this behavior.

**Note:** Download a PNG logo of the image above, rename it to **“logo.png”** and move it to the assets folder at the root of our application.


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


Fantastic, with that setup, we are good to proceed with the registration screen.


## The Registration Screen
![The Registration Screen](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635751806766_screenshoteasy+15.png)


Almost like the login screen, the **RegistrationScreen** is responsible for signing up new users into our chat app and authorizing their credentials for subsequent authentications using the firebase authentication service. The screen collects user information such as the name, email, password, and image URL. The code snippet below showcases how to implement the registration screen using the new **firebase version 9** syntax.


{% gist https://gist.github.com/Daltonic/928c2e820c122edadf2d11a5d927162b %}


Congrats on that screen, now let’s implement the Home Screen.


## The Home Screen 
![The Home Screen](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635751870742_screenshoteasy+10.png)


The Home Screen is responsible for outputting all the group chats on our platform. It uses the **CustomListItem** component to render each of the chat groups. At the header of the screen are two groups of elements, the left contains the avatar of the currently signed-in user and **“signal”**, which is the name of our app. By the right is another group containing three icons, a camera, pencil, and logout icons. When pressed, the pencil icon leads the user to an **AddChatScreen**, whereas, the logout icon signs out a user and navigates them to the login screen. Enough talk, here is the codes responsible for these actions.


{% gist https://gist.github.com/Daltonic/37c875c378a5c4f4a21a49895e0d1048 %}


Now that we are done with the Home screen, lets proceed to the **AddChatScreen**.


## The Add Chat Screen
![The Add Chat Screen](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635752516496_screenshoteasy+11.png)


This screen is saddled with the responsibility of adding a new chat group to our chat app. Employing the services of firestore, this component collects a chat name from the UI to create/add a new chat to our chat list. Here is the code snippet catering for this behavior.



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


Nice Job, you are just a few steps from completing this signal-clone app.


## The Chat Screen
![The Chat Screen](https://paper-attachments.dropbox.com/s_205DE51AEB882987355709088CA249BC02A885324040CD3C42F281216EDB3EB3_1635753086890_screenshoteasy+9.png)


This is the chat screen, where all the magic happens. This screen is responsible for the core purpose of this application. It engages users on a one to many chats. Below is the code responsible for its behavior.


{% gist https://gist.github.com/Daltonic/859a5cbbc2192e6eb24a44268edd9bca %}


Terrific job, you have just added all the screens we will need for this application, lets proceed to write the code for App.js.


## The App.js

This is the wrapper file for our application. All the screens in our applications are boarded on this entry file. You can apply global styles in your application in this **App.js** file. Take a look at the piece of code carrying out these responsibilities.


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


Epic Job, you have just completed writing this application.


## Conclusion

Finally, creating a chat app has become much simpler, and React Native makes it feel like a cool breeze in the middle of a hot summer. Private messaging apps will always be in demand, and understanding how to build one is almost a requirement for all developers. This tutorial walked you through the process of creating a private messaging chat application with React Native. You should use this newfound trick to crush other chat apps.

## About Author

Gospel Darlington is a remote **Fullstack** developer, prolific with technologies such as **VueJs**, **Angular**, **ReactJs**, **React Native**, and **API development**. 

He takes a huge interest in the development of high-grade and responsive web applications.
Gospel Darlington currently works as a **freelancer developing apps and writing tutorials** that teach other developers how to integrate software products into their projects.

He spends his free time **coaching young people** on how to be successful in life. His hobbies include inventing new recipes, book writing, songwriting, and singing. You can reach me on [Website](https://daltonic.github.io/), [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125/), [Twitter](https://twitter.com/idaltonic), [Facebook](https://www.facebook.com/darlington.gospel01), or [GitHub](https://github.com/Daltonic) for any discussion.