Manage multiple firebase projects in React Native

Discover how to manage multiple firebase projects in a single react native project with development, staging and production environment.

Manage Multiple Firebase Projects In React Native — KPITENG

Hello Developers, We are using react-native-config to manage multiple environments in Project like Development, Staging and Production. If we have requirements to manage different firebase for Development, Staging and Production then? Today we will see how to manage multiple project environments with multiple firebase GoogleServices-Info.plist and google-service.json files.

Highlights of article -

• Create React Native Application
• Add Development, Staging, Production Target
• Add Development, Staging, Production Schema
• Link each Schema with each Target
• Add Build, Set Pre-Actions and Select Run Target Executable
• Place Development, Staging and Production GoogleService-Info.plist file
• Link each GoogleService-Info.plist file with each Target
• Update .podfile to share dependency with Development, Staging and Production Target
• SetUp various environment in Android
• SetUp Product Flavor
• Place Development, Staging and Production google-services.json file in Android Application

Securing React Native Application | KPITENG

So, first let’s create React Native Application, and setup application icons & all. You can create new application using -

npx react-native init Shopping

Now, follow the steps, we will setup for iOS & Android.

Step — 1

Open iOS Project and Go to Target

Step — 1 Manage Multiple Firebase — React Native

Step — 2

Right Click on it and press duplicate, It will prompt with three option Duplicate and Transition to iPad, Duplicate Only and Cancel.

Step — 2 Manage Multiple Firebase — React Native

Step — 3

Press on Duplicate Only

Step 3 — Manage Multiple Firebase — React Native

Step — 4

Now rename Target name to Shopping-Development

Step 4 — Manage Multiple Firebase — React Native

Step — 5

Same way create another Target and rename it to Shopping-Staging

Step 5 — Manage Multiple Firebase — React Native

Step — 6

Now, it’s time to create Multiple Project Schema, Shopping, Shopping-Staging, Shopping-Development, Click on Project Schema and Press on Manage Schemas

Step 6 — Manage Multiple Firebase — React Native

Step — 7

Select your Project Schema (Shopping) and click on Settings Icon at bottom, and it will prompt with options, (Duplicate, Import, Export, etc),

Step 7 — Manage Multiple Firebase — React Native

Step — 8

Pressed on Duplicate, Now, it will create a new schema for you, Now Rename schema with Shopping-Development, same way duplicate and create schema with Shopping-Staging.

Step 8 — Manage Multiple Firebase — React Native

Step — 9

So, Finally we have three schema, Shopping, Shopping-Development, Shopping-Staging

Step 9 — Manage Multiple Firebase — React Native

Step — 10

So, Now we have three Schema and three Targets

Step 10 — Manage Multiple Firebase — React Native

Step — 11

Now, it’s time to assign a target to each schema. We have three targets and three schemas, so we will assign one target to each schema. So, first select Shopping Schema, press on Edit Schema option.

Step 11 — Manage Multiple Firebase — React Native

Step — 12

Go to the Build Section from left, and make sure you have only one Targets Shopping. Also make sure for that target you have selected all Checkmark mentions on the screenshot. Also you should select only one target according to your requirement. If you can’t find it then click on the plus icon at bottom.

Step 12 — Manage Multiple Firebase — React Native

Step — 13

Which will prompt like this, select your Target according to your schema. So here, We are selecting Shopping.

Step 13 — Manage Multiple Firebase — React Native

Step — 14

Now, Go To Run Section — and choose Shopping.app as executable.

Step 14 — Manage Multiple Firebase — React Native

Step — 15

Now, To set react-native config env for Production environment, click on Pre-actions and add New Run-Script Action.

Step 15 — Manage Multiple Firebase — React Native

Top 10 React Hooks Library | React | React JS | Tech Article | Tech Talk

Step — 16

Copy the script code as shown in Screenshot, for Shopping Schema, we are refering env.production, same way for Shopping-Staging we refer env.staging and for Shopping-Development we refer env.development. So, Do this for Staging Schema, and Development Schema. Using this process we have assigned Target to our schema,

Step 16 — Manage Multiple Firebase — React Native

Step — 17

Now, it’s time to assign GoogleService-Info.plist to our Target. We have three targets and we have three different firebase accounts each for Development, Staging, production. So you required three GoogleService-Info.plist, So, It’s time to add multiple GoogleSevices-Info.plist according to Environment. So, Create GoogleServices folder inside Shopping (Project) folder,

Step 17 — Manage Multiple Firebase — React Native

Step — 18

Create Development, Staging, Production folder inside GoogleServices folder according to your environment name and add GoogleService-Info.plist file into it.

Step 18 — Manage Multiple Firebase — React Native

Step — 19

While adding GoogleService-Info.plist for Production make sure you have select (checkmark) that target, in our case we select (checkmark) only Shopping Target. It means that .plist file specific to Shopping Target.

Step 19 — Manage Multiple Firebase — React Native

Step — 20

Same way while adding GoogleService-Info.plist for Staging, you only select (checkmark) only Shopping-Staging Target only.

Step 20 — Manage Multiple Firebase — React Native

Top 10 React Tricks Every Developer Should Use | KPITENG

Step — 21

If you have used custom Run Script and all, then you have to make sure all the scripts which are in Shopping (Main Target), might not be there for Shopping-Development, Shopping-Staging Target. Here, I have few scripts which are in Shopping Target, you can see [CP] Copy Pods Resources. Reason behind the [CP] scripts not copy because of while you do npx pod-install, at that time it will install / execute only Shopping Target’s [CP] Scripts.

Step 21 — Manage Multiple Firebase — React Native

Step — 22

So, the problem is with .podfile, if you see the pod file we have initially installed all dependencies for Shopping target, which we need to share with Shopping-Development, Shopping-Staging Target as well. So let’s modify our .podfile according.

Step 22- Manage Multiple Firebase — React Native

Step — 23

For Android go to android/app/build.gradle and add three environment, Development, Staging, Production as shown in Screenshot.

Step 23 — Manage Multiple Firebase — React Native

Step — 24

In android/app/build.gradle inside android … defaultConfig add flavorDimensions “default” as shown in Screenshot

Step 24 — Manage Multiple Firebase — React Native

Step — 25

Now, add productFlavors as mention in screenshot, you can specify different applicationId according to your Target/Environment.

Step 25 — Manage Multiple Firebase — React Native

Step — 26

Now, it’s time to add multipel google-services.json according to Development, Staging and Prodution environment as shown in Screenshot.

Step 26 — Manage Multiple Firebase — React Native

How to improve the performance of a React Native App? | KPITENG

That’s it, now you can run your React Native Application with different Schema and it will take environment (URL/Constants), GoogleService-Info.plist and google-services.json according to your target.

Thanks for reading full article!

Read More Technical Articles

KPITENG || hello@kpiteng.com ||DIGITAL TRANSFORMATION

Connect Us — Linkedin | Facebook | Instagram