Setting Up a Firebase Project for React Native

Firebase offers numerous services for mobile development, including a database, file storage, authentication, crash reporting, notifications, analytics, hosting, dynamic links, remote config, A/B testing, machine learning, and more.

By Pavneet Singh

Oct 17, 2020 • 12 Minute Read

Subscribe to the newsletter

Introduction

Firebase is one of the most prominent cloud computing platforms to develop mobile and web apps. Firebase offers numerous MBaaS services for mobile development, including a database (NoSQL and document), file storage, authentication, crash reporting, notifications (FCM), analytics, hosting, dynamic links, remote config, A/B testing, machine learning, and so on.

Uploading images is a common feature in app development to process, store, and share images. Firebase provides a storage API service to store multimedia content. The best feature of the Firebase storage API is its robustness. It will automatically pause or resume the uploading task according to the network strength.

Firebase services can also be integrated with React Native projects, but this requires platform-specific (Android and iOS) setup and configurations. To cover everything, the whole process has been broken down into three guides:

Setting Up a Firebase Project for React Native (this guide)
[Integrate Firebase Storage and Image Picker in React Native] (/content/ps/en/resources/blog/guides/integrate-firebase-storage-and-image-picker-in-react-native.html)
Upload Images to Firebase Storage in React Native

This guide explains the implementation details to create a project in Firebase console and configure a React Native project with Firebase. The complete optimized codebase is available on the RNFirebaseStorage repository.

Prerequisites

React Native follows the development structure and tools of React, so this guide assumes that you have basic knowledge of the following technologies and tools.

Technologies

Basics of JavaScript
HTML, Objects, and EcmaScript 6 (ES6 classes and arrow functions, etc.)

Installed Tools

Node.js
Command-line interface (CLI)
XCode and CocoaPods (explained in next section)

Follow the Getting Started with React Native on Android guide to learn the basics of React Native development.

Create and Run a React Native Project

The first step is to create a React Native project and set up the runtime environment:

Create a React Native project:

      npx react-native init RNFirebaseStorage

Follow the steps to create an android virtual device (AVD)
Run the projects:

          cd RNFirebaseStorage
npx react-native run-android --verbose
# or to run iOS app
npx react-native run-iOS --verbose
    

The above command process may ask to install CocoaPods, which is a dependency manager for iOS projects and is required to run iOS apps.

In the above command, --verbose is optional but useful to view any potential issues, like below.

Note: Make sure to follow this guide's Known Gradle Issues section to learn about InvokerHelper or build tool issues of gradle in React Native.

Adding Firebase Dependencies

Firebase SDK modules allow the apps to directly communicate with the Firebase server app. The react-native-firebase NPM module provides the basic functionality to integrate Firebase services with the React Native apps using JavaScript and native modules. Execute the below commands in the root folder of the React Native project to install the react-native-firebase module:

          npm install @react-native-firebase/app
# or using yarn
# yarn add @react-native-firebase/app
    

Creating a Firebase Project

Create/Add a Firebase Project: The first time, Firebase will show a Create a project option to set up a project. If there is already an existing project in the current account, select the Add Project option to create a new project:
Add Name: A project name can be anything but should be at least four characters long and should contain numbers, letters, spaces, and -!'" special characters only. Provide a name and click continue:

Project names can be duplicates, but always use a unique name to avoid possible configuration issues.

Create Project: As of now, there is no need for any other Firebase service, so disable Google Analytics and select the Create project button:

It might take a couple of minutes to create a project. Press continue to go to the project screen after the successful project creation.

Add Native Projects in Firebase Project

Firebase supports mobile and web apps, so the platform-specific apps need to be added under the Firebase project and the native (Android and iOS) project files need to be configured:

Setting Up an Android Firebase Project

Select the Android app option in the Firebase project console and follow the steps to create and configure an Android project:

Add Package: A package name is required to create an Android project. It's a unique identifier of an Android app. The package name is used to identify an app on the Play Store and device, so it must be a unique value. The package name is defined as a string value of applicationId key in the RNFirebaseStorage/android/app/build.gradle file:

      applicationId "com.rnfirebasestorage"

Add the package name in the Android package name field and provide a nickname to register the Android app.

Add Configuration File: Download the google-services.json file, then copy and paste the file in RNFirebaseStorage/android/app folder.

Configure Google Services: Firebase configurations requires google-services plugins to build the project, so add the google-services dependency in the RNFirebaseStorage/android/build.gradle file:

          buildscript {
ext {//...}
repositories {//...}
dependencies {
//...
classpath 'com.google.gms:google-services:4.3.3' // add this
}
}
    

Add the google-services plugin in the RNFirebaseStorage/android/app/build.gradle file at the top:

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

There is no need to add any other Firebase SDK dependency for Android. If you've opted for Google Analytics, it should also be added as an NPM module dependency, not as a gradle dependency. 4. Verify App: Run the Android project to confirm the successful integration with Firebase:

      npx react-native run-android --verbose

Note: In case of any issue, make sure that the google-services.json is correct, though there can be a slight delay to receive the update status. Alternately, run

      cd android && ./gradlew clean && cd ..

to clean the project and rerun the project.

Setting Up iOS Firebase Project

Add Bundle ID: A bundle ID (like package-name) is a unique identifier that is required to create an iOS project in the Firebase console. The best way to get the bundle ID is via using XCode, since often it's not available directly. The configurations files often use the value of globally defined variables. Open the RNFirebaseStorage.xcodeproj (RNFirebaseStorage.workspace) file with Xcode and select the root folder of the project to view the value of Bundle identifier in General tab:

Add Configuration File: Download the GoogleService-Info.plist file from the Firebase iOS project screen:

Add the file in the React Native's iOS project using Xcode:

Right-click on the project and select the Add Files to RNFirebaseStorage option.
Locate the GoogleService-Info.plist file, then select Create groups and all the target projects:

Configure Firebase: The entry point of an iOS app execution is the AppDelegate.m file where the Firebase SDK initialization call needs to be added inside the didFinishLaunchingWithOptions function:

          @import Firebase; // add the import
//...

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// initialize Firebase SDK
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
// ...
return YES;
}
    

Note: As of Sep 2020, React native is using objective-c for iOS projects. Analytics dependency is required for an iOS project to verify the successful integration.

Now update the pod dependencies:

          npm install @react-native-firebase/analytics
# in the root folder
cd ios && pod install --repo-update && cd ..
    

Firebase analytics dependency is a must to verify successful Firebase integration with iOS.

Verify App: Run the iOS project to confirm the successful integration of Firebase with the iOS project:

      npx react-native run-ios --verbose

The Firebase console may take time to confirm the successful integration of Firebase SDK with the iOS app.

Conclusion

A React Native project can use Firebase services using the NPM react-native-firebase/app module, but the native (Android & iOS) apps need to be added to the Firebase project. The native projects need to be configured to set up Firebase dependencies and the Firebase SDK initialization (iOS only). Read the next guide to learn about adding Firebase storage service and implement the image picker feature in React Native code. Happy coding!

Pavneet S.

Pavneet is a software engineer with 5+ years of experience in mobile, web, and application development. Have developed solutions for AOSP, IoT, OS Rom, Services, Tools, dev servers using native and hybrid technologies. He is proficient in architecture & API design, TDD, debugging, and analysis.

More about this author