Building a Private Messaging Chat App with React-Native: An Essential Guide

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.

What you’ll be building: Git Repo Here.

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, Firebase, Expo

Installing The Project Dependencies

First, you need to have NodeJs installed on your machine; visit their website 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.

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

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

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.

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.

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.

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.

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.

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.

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

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

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.

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

The Registration Screen

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.

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

The Home Screen 

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.

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

The Add Chat Screen

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.

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

The Chat Screen

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.

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.

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 my Website, LinkedIn, Twitter, Facebook, or GitHub for any discussion.

Also published on: https://dev.to/daltonic/how-to-build-a-private-messaging-chat-app-with-react-native-signal-clone-44pn