Building a Realtime Messaging app with React Native and Firebase

Building a Realtime Messaging app with React Native and firebase

Building a Realtime Messaging app with React Native and firebase

In today’s world, it’s essential for web and mobile apps to have real-time functionality. This guide shows you how to add real-time messaging functionality a React Native mobile apps using Firebase SDK.

Setting up a Firebase real-time database

Create a new project with a name of your choosing

Create a new project with a name of your choosing

To set up a Realtime database, head over to the firebase console and create a new project with a name of your choosing.

Once your project is set up, add a web app to your project and give it a name you like. In this guide, we use a web app and not android or ios, as the functionality we need is supported by the firebase web SDK.

React Native Setup

To set up our React native project, we use the expo CLI – an amazing tool that helps you get started with react native quickly.

Adding Firebase

Once your project is scaffolded, open it up with your favorite code editor, and install the firebase Javascript SDK in a new terminal.

In the root of your expo project, i.e., the same folder as your package.json file, create a firebaseConfig.js file and add your firebase project configuration in the format below

Next, scaffold a custom metro.config.js file by running the following command.

Once your metro config file is generated, replace the content with the following piece of code to enable metro to recognize firebase files with the .cjs extension.

Adding Navigation

Now that we have firebase set up, let’s proceed to add navigation to our app using the react-navigation library and its required dependencies.

In our project folder, set up a src/screens folder and create two files, namely, WelcomeScreen.js and ChatScreen.js and scaffold a basic react native component in each file.

Next, in the src folder, add a router file named router.js and then set up our screens to show different screens based on the authentication state of the user passed by a hook that we’ll create next.

Next, create the corresponding useAuthentication() hook that listens to firebase auth change events.

Adding Login Functionality using firebase

Firebase provides a host of authentication mechanisms we could easily use to authenticate users in minutes; in this tutorial, we will use the Anonymous auth feature as we don’t need a more complex system.

To enable users login anonymously into our app, replace the content of the WelcomeScreen.js file we set up earlier with the code below to add a Login button and a handleLogin() method that signs users anonymously into our app while displaying a nice little spinner.

Our WelcomeScreen should look like this afterward.



Building Chat UI with Gifted-chat

Next, let’s set up our Chat screen, and it’s corresponding functionality using react-native-gifted-chat and firebase real-time database.

In our src/screens/ChatScreen.js , add the following to see the Giftedchat library in action

GftedChat UI

GftedChat UI

On running the project and clicking on the Login to room button, we see the GftedChat UI in action

GftedChat UIThe above code snippet saves our messages in the messages state, but we intend to save the message in the firebase real-time database we set up earlier.

Adding Realtime Functionality

To add real-time messaging functionality to our react native chat app using firebase, we first need to import the getDatabase method from firebase/database and make a reference to in ChatScreen.js

Sending Messages to the room
To send an actual message, it’s important to distinguish the message sender before anything else. We do this by modifying the user prop passed to GiftedChat to be the actual authenticated firebase user.

Now that our message sender is authenticated, we send messages to our database by modifying the OnSend method passed to GiftedChat to be as below.

On running the app and sending a message, you should see it reflected in your firebase dashboard’s real-time database section.

Real-time database section

Real-time database section

Should you attempt to reload or refresh the app at this point, your messages will be lost as we’re not syncing the chats yet from the database. Let’s fix that by modifying our useEffect() method to automatically sync messages from the database while our ChatScreen component is mounted.

Listening for Messages


We sure have covered a lot in this real-time firebase walkthrough. We started by setting up a real-time database using the firebase console. Then we set up a react native project using the Expo CLI and added navigation and an authentication system using the react-navigation library and firebase, respectively. Next, we built our chat UI using react native gifted-chat library. Finally, we added real-time functionality by connecting our chat UI with the firebase real-time database we set up earlier.

While this tutorial has covered the basics of adding real-time functionality to a react-native app using the firebase SDK, you may want to add extra features to this project to strengthen your knowledge of firebase and react native further. Should you intend to do so, here’s a list of extra features you could consider adding to the project.

  • Advanced authentication using email auth, Facebook, or google social authentication.
  • Custom Rooms
  • Invite only rooms
  • One-on-one (Two person chat rooms)

If you found this guide helpful or want to show me the cool projects you build based on this guide, do give me a Twitter shoutout @theafolayan

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Build Real-World React Native App #11 : Pay For Remove Ads

In this chapter, we are going to apply it in order to implement the Remove Ads feature. First, we are going to implement the Remove ads screen which ...

Build Real-World React Native App #10 : Setup in-App Purchase in iOS

The most awaited and considerably the lengthiest chapter is here. In this chapter, we will learn how to add the in-app purchase service in React ...

Build Real-World React Native App #9 : Implementing Remove Ads Feature

One of the simplest ways to make money from apps is through Advertisements. Hence, we have a popular ads network for mobile that is Admob. There are ...

No comments yet

Sign in

Forgot password?

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy