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.
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
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.
Open iOS Project and Go to Target
[Step - 1]
Right Click on it and press duplicate, It will prompt with three option Duplicate and Transition to iPad, Duplicate Only and Cancel.
[Step - 2]
Press on Duplicate Only
[Step - 3]
Now rename Target name to Shopping-Development
[Step - 4]
Same way create another Target and rename it to Shopping-Staging
[Step - 5]
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]
Select your Project Schema (Shopping) and click on Settings Icon at bottom, and it will prompt with options, (Duplicate, Import, Export, etc),
[Step - 7]
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]
So, Finally we have three schema, Shopping, Shopping-Development, Shopping-Staging
[Step - 9]
So, Now we have three Schema and three Targets
[Step - 10]
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]
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]
Which will prompt like this, select your Target according to your schema. So here, We are selecting Shopping.
[Step - 13]
Now, Go To Run Section - and choose Shopping.app as executable.
[Step - 14]
Now, To set react-native config env for Production environment, click on Pre-actions and add New Run-Script Action.
[Step - 15]
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]
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]
Create Development, Staging, Production folder inside GoogleServices folder according to your environment name and add GoogleService-Info.plist file into it.
[Step - 18]
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]
Same way while adding GoogleService-Info.plist for Staging, you only select (checkmark) only Shopping-Staging Target only.
[Step - 20]
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]
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]
For Android go to android/app/build.gradle and add three environment, Development, Staging, Production as shown in Screenshot.
[Step - 23]
In android/app/build.gradle inside android ... defaultConfig add flavorDimensions "default" as shown in Screenshot
[Step - 24]
Now, add productFlavors as mention in screenshot, you can specify different applicationId according to your Target/Environment.
[Step - 25]
Now, it's time to add multiple google-services.json according to Development, Staging and Production environment as shown in Screenshot.
[Step - 26]
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 Blog!
Get tech aricles directly in your inbox! Share your email with us and receive tech articles as instant as we publish!