2. Add Firebase to Your Project

If you are not already a member, you need to sign up for Firebase Cloud Services. Once this is done, you can now navigate to the Firebase console and create a new project. Name it as you wish.

You can add projects from the Firebase console.

In order to integrate Firebase into our React Native app, we will use the awesome open-source react-native-firebase library from Invertase.

Add the library to your project by typing the following in your terminal.

yarn add @react-native-firebase/app

You need to perform additional configurations to make react-native-firebase work with Android and iOS.

2.1. Configure Firebase for Android

Open your newly-made project in the Firebase console. Press the + Add app button as shown below.

Adding a new app to your Firebase project.

Select the Android icon as shown below.

You need to fill in the info in order to register the app (figure below).

The first field is mandatory while the other two are optional. The Android package name (first field) can be obtained from android/app/build.gradle . Copy the string value of applicationId .

applicationId "com.RNFirebase"

Then, fill in the app nickname field. You can leave the third field blank. The panel should look like this.

Fill in the fields to register your app.

Press on Register app . This is it for step 1.

Step two is to download the google-services.json file.

Add google-services.json to your React Native project.

Press the download button then add the file to your project at the following location RNFirebase/android/app/ .

Step three for adding the Firebase SDK is not necessary when using react-native-firebase .

Now, inside your project, navigate to android/build.gradle and add the google-services dependency like this (bold text).

buildscript {

dependencies {

// ..

classpath("com.google.gms:google-services:4.2.0")

}

}

To apply the plugin, go to android/app/build.gradle and add the following line of code at the very bottom of the file.

apply plugin: 'com.google.gms.google-services'

2.2. Rebuild your Android project

Close the existing terminal (metro bundler running your app) and run the app again.

npx react-native run-android

If you are having build issues, you can first rebuild the project by launching your Android studio emulator, opening your projectName/android/build.gradle file, and running it.

Once the build is successful, go back to your terminal and run the npx command again. The app should launch with no errors. Your React Native Android app is now connected to your Firebase project.

Optional: You can go back to the Firebase console and run step four. You should see a success message indicating the installation is complete.

The final step to add Firebase to our project is successful.

2.3. Firebase setup for iOS

We will now configure Firebase to work with iOS.

Go to your project dashboard in the Firebase console and this time, when pressing the Add app button, select iOS as shown in the figure below.

Add a new iOS app to your Firebase project.

Similar to the Android case, you will be prompted to fill in the following form.

Step 1. Register a new iOS app.

You can add an app nickname (field two) and leave field three empty. Field one, though, requires the iOS bundle ID. To get your iOS bundle ID, follow these steps.

Open Xcode.

Press open a new project.

Open the following file: RNFirebase/ios/RNFirebase.xcworkspace .

. Go to the General tab as shown in the below figure.

Xcode General tab view of the RNFirebase project.

The Bundle Identifier is the second field in the Identity section.

org.reactjs.native.example.RNFirebase

Copy and paste it into field one in the Firebase console. Now, press the Register app button.

Download the GoogleService file and add it to your project.

For step two, press the download button to get the GoogleService-Info.plist file locally.

You need to move GoogleService-Info.plist inside your project. To do so, open RNFirebase/ios/RNFirebase.xcworkspace using Xcode. Right-click the project name and select Add Files to “RNFirebase” (see below).

A window will pop up. Select the GoogleService-Info.plist file. Make sure that Copy items if needed and Create groups are checked (as seen in the figure above).

Press the Add button.

Next, open the following RNFirebase/ios/RNFirebase/AppDelegate.m file in your editor of choice (preferably from Xcode since you are already there) and add the following import at the top.

@import Firebase;

Within the didFinishLaunchingWithOptions function, add the following code (bold text).

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

if ([FIRApp defaultApp] == nil) {

[FIRApp configure];

}

Save and close.

2.4. Rebuild the iOS project

Go back to your terminal and kill any metro bundler running. You need to rebuild the project and run it again. From the root of your project, do the following.

cd ios

pod install --repo-update

This should kick-start the installation of the dependencies.

CocoaPod installs the Firebase dependencies.

Time to rebuild the app. Go back to your project root and relaunch the simulator.

cd ..

npx react-native run-ios