React Native Firebase Setup for both Android and iOS(Step by Step)

Photo by Clayton Robbins on Unsplash

1. Create a react native project

npx react-native-cli rn-firebase

2. Create a Firebase project on firebase

• Head over to firebase.google.com to create a new project.
• Add a new application for either android or iOS (or both)

3. Installing React Native Firebase App library

Install the React Native Firebase “app” module to the root of your React Native project with NPM or Yarn(I will be using NPM throughout, hence find the Yarn equivalent to installing these libraries):

npm install --save @react-native-firebase/app

Note: The @react-native-firebase/app module must be installed before using any other Firebase service.

Firebase Android Setup

To allow the Android app to securely connect to your Firebase project, a configuration file must be downloaded and added to your project. To achieve this, head over to firebase and add an android app to the firebase project you have already created.

NB: You can generate a SHA1 key here as well. This step is optional but it is required for Dynamic Links, Invites, and Phone Authentication.

cd android

./gradlew signInReport

Copy the SHA1 key under app:signInReport with Variant debugAndroidTest .

Head over to your firebase project console. Under Project Overview -> Project settings your apps section for android, paste the SHA1 key you have copied into the SHA certificate fingerprints input field.

/android/app/google-services.json

Configure Firebase with Android credentials

To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory.

1. Add the google-services plugin as a dependency inside of your /android/build.gradle file

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
    // Add me --- /\
  }
}

2. Execute the plugin by adding the following to your /android/app/build.gradle file

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // add this line

That will be all for the android setup.

iOS Setup

1. Create app and download GoogleService-Info.plist file

To allow the iOS app to securely connect to your Firebase project, a configuration file must be downloaded and added to your project. To do this, go to your firebase project and add an iOS application if you have not done so already.

NB: Make sure that the bundle ID in Xcode is the same as the one provided when creating the iOS app. To do so,

- open the xcworkspace file in Xcode.

- Click on your project name.

- Under the general tab, confirm your bundle ID.

confirming your bundler ID

2. Download the GoogleService-Info.plist file.

download GoogleService Info file from firebase

3. Using Xcode, open the projects /ios/{projectName}.xcodeproj file (or /ios/{projectName}.xcworkspace if using Pods).

4. Right click on the project name and “Add files” to the project, as demonstrated below

add google plist file via Xcode

5. Select the downloaded GoogleService-Info.plist file from your computer, and ensure the "Copy items if needed" checkbox is enabled.

Configure Firebase with iOS credentials

To allow Firebase on iOS to use the credentials, the Firebase iOS SDK must be configured during the bootstrap phase of your application.

To do this, open your /ios/{projectName}/AppDelegate.m file, and add the following:

At the top of the file, import the Firebase SDK:

#import <Firebase.h>

Within your existing didFinishLaunchingWithOptions method, add the following to the top of the method:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add me --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // Add me --- /\
  // ...
}

When done, rebuild the application to connect your application to firebase.

Wrap up

That’s all the steps required to connect your react native app to firebase.