In a React Native project, managing multiple environments like development, QA, and production often demands small yet important tweaks to the app configuration — such as changing the app display name. Doing this manually every time is not only tedious but error-prone.

So, why not automate it?

Let’s walk through how to automate the process of updating the app name in both Android and iOS platforms by writing a simple Node.js script.

🧠 Why Customize the App Name?

When working across multiple environments, it's a best practice to differentiate app builds visually by naming them accordingly:

• MyApp (Dev)
• MyApp (QA)
• MyApp

This helps testers, developers, and even users (in staged rollouts) avoid confusion.

⚙️ What This Script Does

This Node.js script:

• Takes an environment (dev, qa, prod) as an argument.
• Updates the Android strings.xml file.
• Updates the iOS Info.plist file.
• Changes the app's display name accordingly for each platform.

📜 The Script

const fs = require("fs");
const path = require("path");
const environment = process.argv[2];

/*---- To replace app Name from string.xml file (Android) ---*/
const stringXmlSource = path.resolve(__dirname, "../../../android/app/src/main/res/values/strings.xml");

try {
  let xmlContent = fs.readFileSync(stringXmlSource, "utf8");

  const appNameMap = {
    qa: "qa",
    dev: "dev",
    prod: "prod",
  };

  const appName = appNameMap[environment];

  const updatedXml = xmlContent.replace(
    /<string name="app_name">.*<\/string>/,
    `<string name="app_name">${appName}</string>`
  );

  fs.writeFileSync(stringXmlSource, updatedXml);
  console.log(`✅ App name updated in strings.xml for environment "${environment}": ${appName}`);
} catch (error) {
  console.error(`❌ Failed to update strings.xml:`, error.message);
}

/*---- To replace app Name from Info.plist file (iOS) ---*/
const infoPlistPath = path.resolve(__dirname, "../../../ios/BallyRewards/Info.plist");

try {
  let plistContent = fs.readFileSync(infoPlistPath, "utf8");

  const appNameMap = {
    qa: "qa",
    dev: "dev",
    prod: "prod",
  };
  const appName = appNameMap[environment];

  plistContent = plistContent.replace(
    /<key>CFBundleDisplayName<\/key>\s*<string>.*<\/string>/,
    `<key>CFBundleDisplayName</key>\n\t<string>${appName}</string>`
  );

  fs.writeFileSync(infoPlistPath, plistContent);
  console.log(`✅ App name updated in Info.plist for environment "${environment}": ${appName}`);
} catch (error) {
  console.error(`❌ Failed to update info.plist:`, error.message);
}

🚀 How to Use

Run the script with the desired environment as a command-line argument:

npm run env:dev

Or for QA:

npm run env:qa

And for production:

npm run env:prod

📝 Note: This script assumes you’ve already set up environment-specific configuration using .env files.

If you haven't done that yet, you can check out my earlier article:
👉 How to Set Up Environment Variables in React Native

🧩 Android Tip – Not Seeing the Updated App Name?

If you’ve run the script and don’t see the app name updated on Android, make sure your AndroidManifest.xml file uses the string resource properly.

verify that your <application> tag looks like this:

<application
    android:name=".MainApplication"
    android:allowBackup="false"
    android:label="@string/app_name" <----
    ...
>

This ensures Android picks the value from strings.xml, which our script updates automatically.

✅ Outcome

Now you can confidently switch between app environments with correctly labeled builds, making it easier for everyone to stay on the same page.

Let automation handle the boring parts — and spend more time building features that matter. 🧑‍💻✨