How can I setup multiple enviroments on my RN App?

I’m trying to set up multiple environment configurations for my React Native app, but I’m having trouble with the iOS setup.

Here’s what I’ve done so far:

I can run the app and switch between environments using the following scripts with react-native-config:

"setDev": "ENVFILE=.env",
"setQA": "ENVFILE=.env.qa",
"ios-dev": "yarn setDev react-native run-ios --mode=Debug --scheme "myAppDev" --simulator='iPhone 13'",
"ios-qa": "yarn setQA react-native run-ios --mode=Debug --scheme "myAppQa" --simulator='iPhone 13'",
"android-dev": "yarn setDev  react-native run-android",
"android-qa": "yarn setQA  react-native run-android",

However, I’m encountering issues with the Firebase configuration.

In my project structure, I have the GoogleService files on:

  • ios folder

    • myApp folder

      • Firebase folder

        • DEV/GoogleService-Info.plist

        • QA/GoogleService-Info.plist

I have created two schemes in Xcode:

  1. myAppQa:

    • In Edit Scheme, I added an environment variable QA with a value of 1.

    • In Pre-Actions, I added this script:

      echo ".env.qa" > /tmp/envfile touch "${PROJECT_DIR}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildDotenvConfig.rb"

  2. myAppDev:

    • Similarly, I set the DEV environment variable with a value of 1 and pointed it to .env.dev. And the enviroment DEV with a value of 1

Then, in AppDelegate.mm, I added this code to load the correct GoogleService-Info.plist file based on the build configuration:


// TODO: Add PROD ENV

NSString *filePath;
#if DEV
filePath = [[NSBundle mainBundle] pathForResource:@"Firebase/DEV/GoogleService-Info" ofType:@"plist"];
#elif QA
filePath = [[NSBundle mainBundle] pathForResource:@"Firebase/QA/GoogleService-Info" ofType:@"plist"];
#else 
filePath = [[NSBundle mainBundle] pathForResource:@"Firebase/PROD/GoogleService-Info" ofType:@"plist"];
#endif

FIROptions *options = [[FIROptions alloc] initWithContentsOfFile:filePath];
if ([FIRApp defaultApp] == nil) {
  [FIRApp configureWithOptions:options];
}

When I run yarn ios-qa, the app builds successfully, and with react-native-config, I can access the correct environment variables. However, the Firebase GoogleService-Info.plist that gets loaded is the PROD one (from the else block in AppDelegate). It seems like the environment variables defined in the Scheme aren’t being recognized.

The version of rn is:

"react-native": "0.71.7",

What am I missing here? Im a bit new and im no very familiar with ios and xcode so any advice would be appreciated!