Pavneet Singh

Setting Up a Firebase Project for React Native

Pavneet Singh

Oct 17, 2020
12 Min read
18,793 Views

Oct 17, 2020
12 Min read
18,793 Views

Web Development

Client-side Frameworks

React

Front End Web Development

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

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:

1npx react-native init RNFirebaseStorage

bash

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

Run the projects:

1cd RNFirebaseStorage
2npx react-native run-android --verbose
3# or to run iOS app
4npx react-native run-iOS --verbose

bash

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:

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

bash

Creating a Firebase Project

To create Firebase projects for Android and iOS, create an account on Firebase Console, then select the Go to console option for the next steps:

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: Add FB project

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: Enable Analytics

Select the default account for analytics: Configure Analytics account

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:

Create 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:

1applicationId "com.rnfirebasestorage"

groovy

Add Android package name

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.

Download package.json android

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:

1buildscript {
2ext {//...}
3repositories {//...}
4dependencies {
5//...
6classpath 'com.google.gms:google-services:4.3.3' // add this
7}
8}

groovy

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

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

groovy

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:

1npx react-native run-android --verbose

bash

Run to verify success

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

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

bash

to clean the project and rerun the project.

Setting Up iOS Firebase Project

Select the iOS app option in the Firebase project console and follow the steps to configure the iOS project in the React Native project: Add IOS

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:

bundle identifier

Copy the identifier and paste it to the iOS bundle field: iOS registration app

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

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. Right click

Locate the GoogleService-Info.plist file, then select Create groups and all the target projects: Add plist

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:

1@import Firebase; // add the import
2//...
3
4@implementation AppDelegate
5
6- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
7{
8// initialize Firebase SDK
9if ([FIRApp defaultApp] == nil) {
10[FIRApp configure];
11}
12// ...
13return YES;
14}

objective-c

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:

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

bash

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:

1npx react-native run-ios --verbose

bash

iOS success

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!

LEARN MORE