• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
    • Manifesto
  • Companies
  • For Business
    • EN
    • IT
    • ES
  • Sign in

CodemotionAugust 29, 2022

How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase

Frontend
creating a chat app with react native and Firebase
facebooktwitterlinkedinreddit

This tutorial will give you a comprehensive, step-by-step guide on building a secure and functional chat app with React Native and Firebase providing the backend service. The chat app will have a log-in and registration screen, allowing users to add chats in a real-time chat application.

What is React Native?

React Native (also known as RN) is an open-source mobile app development framework that enables users to build mobile apps for Android and iOS with native UI elements. It was built based on React, which is a JavaScript library. React Native has been a global success for various reasons.

Recommended article
May 6, 2025

Top 10 Free Web Hosting Services Every Developer Should Know

Lucilla Tomassi

Lucilla Tomassi

Frontend

First, you can use code created on it to power Android and iOS apps, saving a lot of time and energy. Second, the framework can also be used by front-end developers, who previously could only do app development using web-based technologies.

What is Firebase?

Firebase is Google’s app development platform that offers developers the services and tools they need for the development of quality apps without needing to manage servers. It is categorized as a NoSQL database program. Firebase’s key features include hosting, authentication, notification, and a real-time database.

How to Create the Chat App

Here is an in-depth, step-by-step tutorial on how to create the chat app.

Step 1: Prerequisites

To develop the chat app, you should have a working understanding of React Native; the other stacks are easily understood.

The packages needed for developing the app are as listed below:

  • Firebase
  • ReactNative
  • Node.js
  • ReactNative Media Query
  • Expo
  • Formik
  • Comet Chat
  • Yup
react native for creating a chat app. Firebase.
React Native is an open-source mobile app development framework that enables users to build mobile apps for Android and iOS with native UI elements.

Step 2: Installing Dependencies

First, you will need to download and install Node.js on your machine.

Second, you will need to install the Expo-CLI on your computer. You need to install it as a global npm package. To install and use Expo CLI, you should have installed the tools below on your machine.

  • Git
  • Node.js LTS release
  • Watchmen (Only for Linux and macOS users)

If the Expo CLI installation is successful, you will receive a ‘not logged in’ message. You do not need to be logged in to an account to proceed, and you can continue.

After installation, navigate to the terminal and create and name a new expo project. When prompted, choose the blank template.

Then start the expo project that you have just created. Running the command below will start a new react native project on the browser.

expo start

You can now launch the Web Interface, Android, or iOS by choosing the one you want. Afterward, use a simulator to spin up the development server on Android or iOS.

After you are done with that, you can install the other essential dependencies for the project, as shown below. Yarn is the default package manager for expo.

  • Install the Native React navigation libraries: yarn add @react-navigation/native-stack
  • Install the dependencies into an expo-managed project: expo install react-native-screens react-native-safe-area-context
  • Install Formik and Yup to validate your forms: yarn add formik yup

Now we can add Firebase for the project!

Step 3: Adding Firebase

The following steps give a comprehensive guide on how to add and set up Firebase.

Installation

To begin, run the command below on your terminal to install it properly.

expo install Firebase

Create a Firebase account and a new project

If you do not have an account, start by signing up for one. Then go to Firebase, create a new project, and activate the email and password authentication. Below the authentication tab in your project, click the ‘sign-in method,’ and you will be provided with a list of providers supported by Firebase. Choose the one you want to enable and save your choice.

Activate the Firestore service

You then need to activate the Firestore service. You will use this to store the posts coming from your application. To do this, go to the Firestore tab (on the sidebar) and click on ‘Create database .’ Navigate to Firestore rules, make the changes, and publish those changes.

Use the timestamp as an index to order your posts

To achieve this, start by creating an index for it. Go to the ‘indexes‘ tab, navigate to ‘single field‘ and click on ‘add exemption .’Enter ‘Posts’ in the Collection ID space and ‘timestamp’ in the field path space. Then click ‘Next,’ enable the scopes (ascending, descending, array), and save.

If you complete the steps above correctly, you will notice that the loading indicators on the exception blocks will have disappeared.

Generate the SDK configuration keys for Firebase

Start by registering your application under your Firebase project. On the overview page, choose the add option, and select web as the platform. After finishing up the configuration, go back to the overview page, and click on settings so that you can copy the SDK configuration setups.

Note: Copy the configuration keys into a separate file that you will use later. Create a file called firebase.js at the root of your project, paste your codes, and save.

Step 4: Set Up the Project Structure

Your chat app with React Native and Firebase is almost ready!
Your chat app with React Native and Firebase is almost ready!

This project will have several directories, including the components folder. Starting with the components folder at the root of your project, create a folder named components at the root of the project. The components of the chat app are as shown below.

  • The header component: Use the power of react-native-media-query to craft it, as seen in the prototype below.
  • The BottomTabs component: These are usually seen at the bottom of the Home Screen. Create a ‘BottomTabs.js’ component and paste the codes into it. The image below shows a prototype of the code.
  • The card component: Create a card.js component and paste the codes into it.

Step 5: Log-In and Registration Screen

Screens are analogous to website pages, and every screen represents a page. Let’s go into detail on the login and registration screens.

The log-in screen

The log-in screen is used to authenticate already registered users on your platform. When you use the correct details to log in, Firebase and the chat app authenticate you. If you supply the incorrect details, you will be kicked out.

The registration screen

This is the screen that is responsible for creating new users. It interfaces between the app’s authentication and that of Firebase. New users can sign up to the chat app and Firebase simultaneously.

Note: Other screens include:

  • The AddPost screen is liable for making new posts. You use Yup and Formik to save collected data and save it in the Firestore database.
  • The ChatList screen that lists all registered users
  • The chat screen allows users to engage in chats.

Step 6: Test Chat App

You can now test the chat app to determine if it works as planned. Below are some system testing cases and their expected outcomes.

  • Signing up a new user: A new user should be allowed to enter the chat panel
  • Check newly created user in the Firebase database: A newly created user date and unique UID in Firebase
  • User messages with time: The user writes a message, and the receiver views it with the time
  • Chat data for a logged-in user in Firebase: User’s chat data available in Firebase’s real-time data
  • The logged-in user refreshes chat automatically: Chat panel windows refreshes and is observed by the viewer.

Your chat app is ready!

Congratulations! You have now created a chat app with React Native and Firebase! Firebase is an excellent asset for React Native developers who want to build app prototypes without building a complete backend from scratch. You can now build your first app or app prototype with the steps highlighted above.

Related Posts

Understanding Angular — Exploring Dependency Injection and Design Patterns — Part 0 🔥🚀

Giorgio Galassi
February 5, 2025

Let’s Create a Bento Box Design Layout Using Modern CSS

Massimo Avvisati
January 21, 2025
React library: all you need to know about it.

Building reusable multiple-step form in ReactJS

Noa Shtang
August 8, 2024
excalidraw codemotion magazine

Excalidraw: Diagrams Set in Stone

TheZal
July 9, 2024
Share on:facebooktwitterlinkedinreddit

Tagged as:Full Stack Developer React

Codemotion
Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.
IoT Trends and Buzzwords Today
Previous Post
Video: How to go From Monolith to Serverless With Java
Next Post

Footer

Discover

  • Events
  • Community
  • Partners
  • Become a partner
  • Hackathons

Magazine

  • Tech articles

Talent

  • Discover talent
  • Jobs

Companies

  • Discover companies

For Business

  • Codemotion for companies

About

  • About us
  • Become a contributor
  • Work with us
  • Contact us

Follow Us

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions