install-firebasse-in-react-native-mr-devgeek-muhammad-aamir-malik

How to install Firebase in React Native a Step-by-Step Guide: Boost Your App’s Performance with Firebase Services

Step 1: Install Firebase SDK

To install Firebase in React Native app, you need to install the Firebase SDK. Run the following command to install Firebase SDK:

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

// For Yarn:
yarn add @react-native-firebase/app

Step 2: Create a Firebase project

To use Firebase services, you need to create a Firebase project. Follow the below steps to create a new Firebase project:

  1. Go to the Firebase Console (https://console.firebase.google.com/).
  2. Click on “Add project” and enter the name of your project.
  3. Follow the prompts to set up your Firebase project.

Once you have created your Firebase project, you need to add the Android app to it.

Step 3:

Add an Android app to the Firebase project

To add an Android app to your Firebase project, follow the below steps:

  1. Go to the Firebase Console and select your project.
  2. Click on the “Add app” button.
  3. Select Android as the platform and enter your Android app’s package name.
  4. Follow the prompts to register your app.
install-firebase-in-react-native
package com.deeplinkpractice
install-firebase-in-react-native

Android: (Optional) Debug Signin Certificate is optional for now if you need you can generate it like this:

The debug signing certificate is optional to use Firebase with your app, but is required for Dynamic Links, Invites, and Phone Authentication.

To generate a certificate:

cd android
./gradlew signingReport

All you have to do is go to the project android directory cd android and run ./gradlew signingReport. This generates two variant keys. You have to copy both the ‘SHA1’ and ‘SHA-256’ keys that belong to the ‘debugAndroidTest’ variant key option. Then, you can add those keys to the ‘SHA certificate fingerprints’ on your app in the Firebase console.

install-firebase-in-react-native

Android: Add the google-services.json file to your project

To add the google-services.json file to your project, follow the below steps:

Download the google-services.json file from the Firebase Console.

install-firebase-in-react-native

select project settings and scroll down to where you see the Download the google-services.json click to download it:

install-firebase-in-react-native

No place this google-services.json file to:

install-firebase-in-react-native

Place the google-services.json file in the android/app directory of your React Native project.

Android: 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.

First, 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.15'
    // Add me --- /\
  }
}

Lastly, 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

iOS Steps:

Add an iOS app to the Firebase project

To get started on Firebase, create a new iOS application on the console and input your project information. It’s important to make sure that the “iOS bundle ID” matches your project’s bundle ID which can be located in the “General” tab when you open the project in Xcode.

install-firebase-in-react-native
click on Add app
install-firebase-in-react-native
add Bundle identifier

Once that’s done, download the GoogleService-Info.plist file. After that just click on Next button 2 to 3 times and finally click on continue to console button.

Then, open the /ios/{projectName}.xcodeproj file (or /ios/{projectName}.xcworkspace if you’re using Pods)

using Xcode. Right-click on the project name and select “Add files” to include it in the project. You can follow the demonstration below for more guidance:

install-firebase-in-react-native

Choose the GoogleService-Info.plist file that you have saved on your device and make sure to tick the option “Copy items if needed” to prevent any potential issues.

To integrate Firebase with your iOS app, you need to configure the Firebase iOS SDK during the bootstrap phase of your application.

To achieve this, locate the /ios/{projectName}/AppDelegate.mm file (or AppDelegate.m for older react-native versions) and follow these steps:

Import the Firebase SDK at the top of the file, right after ‘#import “AppDelegate.h”‘:

#import <Firebase.h>

Within the existing didFinishLaunchingWithOptions method, insert the following code snippet at the top of the method:

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Add me --- /
[FIRApp configure];
// Add me --- /
// ...
}
install-firebase-in-react-native
Check Line No. 2 and Line 10
# iOS apps
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

iOS Troubleshooting

install-firebase-in-react-native

After running the ‘pod install –repo-update’ command, you might encounter errors that read:

[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod FirebaseCoreInternal depends upon GoogleUtilities, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set use_modular_headers! globally in your Podfile, or specify :modular_headers => true for particular dependencies.

This error message indicates that the Swift pods, such as FirebaseCoreInternal, cannot be integrated as static libraries due to their dependencies. To resolve this error, you need to opt into targets generating module maps by setting use_modular_headers! globally in your Podfile or by specifying :modular_headers => true for particular dependencies. By doing so, you will be able to import these modules from Swift when building as static libraries.

pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
install-firebase-in-react-native
#Again run: 
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

if your app is run successfully on simulator or physical device that’s mean your firebase is connected successfully

That’s it guys. Now if you want to use specific Firebase services, you need to install the corresponding Firebase modules. For example, if you want to use Firebase Authentication, dynamic links, or any other service you have to install them. you can check my other react native firebase related articles.

FAQ

What is React Native Firebase?

The React Native Firebase library provides pre-built Firebase modules to integrate Firebase services like Authentication, Realtime Database, Cloud Firestore, and Cloud Storage into React Native apps.

How can I integrate React Native Firebase into my Android app?

In order to integrate React Native Firebase into your Android app, you must follow the steps in the blog post, including installing the Firebase SDK, creating a Firebase project, adding an Android app to the project, installing Firebase modules, and linking Firebase modules, initializing Firebase in your app, and using Firebase services in your app.

Do I need to create a Firebase project to use React Native Firebase on Android?

Using React Native Firebase on Android requires creating a Firebase project. This involves signing up for Firebase, creating a new project, adding an Android app, and downloading the google-services.json file and adding it to the project.

Which Firebase services can I use with React Native Firebase on Android?

React Native Firebase supports a wide range of Firebase services, including Authentication, Realtime Database, Cloud Firestore, Cloud Messaging, Cloud Storage, Functions, and more.

Can I use React Native Firebase with iOS apps?

Yes, React Native Firebase can be used with both Android and iOS apps. However, iOS integration steps may differ from Android integration steps.

This Post Has 5 Comments

  1. M Asif

    It’s helpful

      1. M Asif

        Barakallah

  2. Muhammad Bilal

    m facing issue in creating dynamic links when i clicked on share product to generate the link console will say you don’t have initialize firebase app

    1. Mr DevGeek

      Please watch firebase integration carefully

Leave a Reply