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
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 - 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 - 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 - 16
Copy the script code as shown in Screenshot, for Shopping Schema, we are referring 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 - 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 - 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 - 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 - 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.
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!