Build a Realtime Chat App with React Native and Firebase

I'll teach you how to build a realtime chat app using React Native and Firebase. You’ll learn how to set up Firebase authentication with email and password, configure Firestore as your database, and integrate the Gifted Chat UI component for a native messaging experience. The tutorial covers everything from creating the project with Expo to implementing realtime message syncing.

If you want to add chat features to your React Native app with user authentication and instant updates, this video walks you through the key steps. You’ll see how to manage environment variables securely, build navigation and screens for login, signup, home, and chat, and handle realtime messaging with Firestore listeners.

What's inside

Creating a new React Native project with Expo
Installing navigation and Firebase dependencies
Setting up a Firebase project and enabling email/password authentication
Configuring environment variables to secure Firebase keys
Initializing Firebase in the React Native app
Creating Firestore database and setting security rules
Building navigation and screens for login, signup, home, and chat
Implementing realtime chat UI with Gifted Chat and syncing messages

Creating a new React Native project with Expo

I start by creating a new Expo project using the blank template with the command . This sets up a clean starting point for the chat app. After the project is created, it’s opened in Visual Studio Code and started with , allowing you to run the app on iOS or Android simulators or devices easily.

Using Expo simplifies development by handling native builds and providing a smooth workflow. The blank template gives you a minimal setup to add navigation, Firebase, and UI components as needed.

To enable navigation and Firebase integration, several dependencies are installed:

React Navigation stack for managing screen transitions
Firebase SDK for authentication and Firestore database access
Expo Constants to manage environment variables securely
React Native Gesture Handler, Screens, Safe Area Context, and Mask View to support navigation gestures and layouts

These packages ensure smooth navigation between screens and reliable backend connectivity for authentication and realtime data.

Setting up a Firebase project and enabling email/password authentication

A Firebase project is created in the Firebase console with a custom name. Email/password authentication is enabled as the sign-in method for simplicity and ease of use.

This allows users to register and log in with email credentials. I show how to enable email/password authentication in the Firebase Authentication section and save the settings.

Configuring environment variables to secure Firebase keys

To keep your Firebase API keys secure, environment variables are used instead of hardcoding them. A file is created to store Firebase config keys such as API key, domain, and project ID.

The app configuration file is renamed from to so it can load these environment variables using Expo Constants. This approach prevents exposing sensitive keys in your codebase or public repositories, which is important for security and cost control.

Initializing Firebase in the React Native app

Inside a new folder, a file is created to initialize Firebase. It imports the necessary Firebase modules and uses the environment variables for configuration.

The Firebase app is initialized with using the config object. Authentication and Firestore database instances are then exported for use throughout the app. This setup centralizes Firebase initialization and makes it easy to import Firebase services wherever needed.

Creating Firestore database and setting security rules

In the Firebase console, Cloud Firestore is enabled and set up in test mode for development. Test mode allows open read and write access for 30 days, which simplifies initial testing but should be changed before production.

I recommend choosing a database location close to your users to reduce latency. Once enabled, the Firestore database is ready to store chat messages and support realtime syncing.

The app structure includes a folder with separate files for Home, Login, Signup, and Chat screens. React Navigation stack is configured to switch between these screens based on user authentication state.

I explain creating basic screen components and wiring navigation to handle user flows. For simplicity, only login and signup are implemented without password reset features.

Implementing realtime chat UI with Gifted Chat and syncing messages

The chat screen uses the Gifted Chat package to provide a native iOS-style messaging UI. Messages are stored and retrieved from Firestore in realtime using Firestore’s realtime listeners.

I demonstrate sending and receiving messages instantly between devices logged into different accounts. I also show how to handle user authentication states and sign out.

Random user avatars are used for demo purposes but can be customized. The realtime syncing leverages Firestore’s realtime update capabilities to keep messages in sync across devices immediately.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

YouTubeBuild a Realtime Chat App with React Native and Firebase

Step-by-step tutorial to create a realtime chat app with authentication and Firestore.

Let's connect!