Photo by Volodymyr Hryshchenko on Unsplash

In the first part of this tutorial series to build a chat-based app in React Native, we learned how to create reusable form elements using the react-native-paper UI library. Along with that, we learned how to install the navigation library react-navigation and configure a basic authentication stack navigator using two routes.

In this tutorial, let’s start using a backend service to add real-time features to the chat app. For our backend services, I’m going to use Firebase. We’ll look at how to install and configure Firebase SDK in a React Native app with the help of react-native-firebase module, as well as set up and configure email authentication. In order to follow this tutorial and future posts, you’ll need to have an active Firebase project.

Create a new Firebase project from the console

To access the Firebase credentials for each mobile OS platform and configure them to use the Firebase SDK, create a new Firebase project. If you’ve created one already, you can skip this step.

Create a new project as shown below:

Complete the details of your Firebase project:

When you click the button “Create project”, you’ll be redirected to the dashboard screen. That’s it. You’ve successfully created a new Firebase project.

Now make sure that the email sign-in method is enabled. From the Firebase console, navigate to the Authentication section from the side menu.

Go to the second tab (Sign-in method) and make sure you enable the email sign-in provider.

Add the Firebase SDK to the app

If you’ve used react-native-firebase version 5 or below, you’ve likely noticed that it was a monorepo that used to manage all Firebase dependencies from one module.

Version 6 of this library wants you to only install those dependencies based on Firebase features that you want to use. For example, in the current app, to support the email authentication feature, you’ll to install the auth and core app packages.

From the terminal window, execute the following command:

Add Firebase credentials to your iOS app

Firebase provides a file called GoogleService-Info.plist that contains all the API keys as well as other authentication credentials for iOS devices.

To get these credentials, go to back to the Firebase console in a browser window. From the dashboard screen of your Firebase project, open “Project settings” from the side menu.

Go to the “Your apps” section and click on the iOS icon to select the platform.

Enter the application details and click on “Register app”.

Then download the GoogleService-Info.plist file as shown below:

Open Xcode, then open the /ios/ChatApp.xcodeproj file. Right-click on the project name and select the “Add Files” option, and then choose the file to add to this project.

Then open ios/ChatApp/AppDelegate.m and add the following header:

In the same file, within the didFinishLaunchingWithOptions method, add the following configure method:

Lastly, go back to the terminal window to install pods:

Make sure you build the iOS app:

That’s it. The configurations for the Firebase SDK and credentials in a React Native app are complete.

Create a home screen

In the previous post, we successfully configured an Auth stack that displays those screens when the end user is not authorized or logged into the app. Put another way, there are a set of screens that are only going to be accessible to the user when they are logged in. Let’s call the group of screens—that are visible after login—the home stack.

One of the screens is going to be a home screen where all the chat rooms will be listed. In this section, let’s start by creating a basic home screen, such that we have a functional navigational flow between the home stack and the auth stack.

Create a new screen component called HomeScreen.js inside the src/screens/ directory with the following code snippet:

Create home stack navigator

Create a new stack navigator file called HomeStack.js inside src/navigation.js . Here, we’ll keep those routes, which are only available after logging in. You can think of these as protected routes.

Open this file and add the following code snippet. Nothing new is going on in terms of creating a stack navigator: