.env variable not getting updated, probably cached

[AnshulRaghav]

• Asked question in discussions
• Tried the troubleshooting Wiki
• Followed the migration Wiki
• Installed library as devDependency not production dependency

Describe the bug
Suddenly the values in .env files are not getting updated. It was working fine earlier. I'm using gulp to change between multiple environments.

package.json

{
  "scripts": {
    "start": "gulp set --env=stag && react-native start --reset-cache",
    "format": "prettier --write '**/*.{js,jsx,json}'",
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
    "ci": "rm -fr node_modules && yarn install --frozen-lockfile",
    "jetify": "npx jetify",
    "patch": "patch-package",
    "postinstall": "npm-run-all -s patch jetify"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "4",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/eslint-config": "3.2.0",
    "@react-native-community/netinfo": "^11.3.0",
    "@react-native-picker/picker": "^2.6.1",
    "@react-native/gradle-plugin": "^0.74.84",
    "@react-navigation/material-top-tabs": "6.6.2",
    "@react-navigation/native": "6.1.6",
    "@react-navigation/stack": "6.3.16",
    "@typescript-eslint/eslint-plugin": "5.54.1",
    "@typescript-eslint/parser": "5.54.1",
    "axios": "0.27.2",
    "deprecated-react-native-prop-types": "4.0.0",
    "expo": "^51.0.14",
    "expo-av": "^14.0.5",
    "expo-font": "^12.0.7",
    "expo-secure-store": "^13.0.1",
    "expo-splash-screen": "^0.27.5",
    "expo-status-bar": "^1.12.1",
    "expo-web-browser": "^13.0.3",
    "gulp": "4.0.2",
    "gulp-clean": "0.4.0",
    "gulp-rename": "2.0.0",
    "npm-run-all": "4.1.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.2",
    "react-native-gesture-handler": "^2.17.1",
    "react-native-logs": "5.0.1",
    "react-native-safe-area-context": "^4.10.5",
    "react-native-screens": "^3.32.0",
    "react-redux": "8.0.5",
    "redux": "4.2.1",
  },
  "devDependencies": {
    "@babel/core": "7.21.8",
    "@babel/plugin-transform-private-methods": "^7.24.7",
    "@babel/preset-env": "7.21.5",
    "@babel/runtime": "7.21.5",
    "@react-native-community/eslint-config": "3.2.0",
    "@react-native/metro-config": "0.74.84",
    "@react-native/typescript-config": "0.74.84",
    "@tsconfig/react-native": "3.0.0",
    "@types/react": "18.2.6",
    "@types/react-native": "0.71.6",
    "@types/react-native-sqlite-storage": "^6.0.5",
    "@types/react-test-renderer": "18.0.0",
    "babel-plugin-module-resolver": "5.0.0",
    "babel-preset-expo": "9.3.2",
    "eslint": "8.40.0",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-react-native": "4.0.0",
    "husky": "8.0.3",
    "jetifier": "2.0.0",
    "lint-staged": "13.2.2",
    "metro-react-native-babel-preset": "0.76.3",
    "patch-package": "6.5.1",
    "pre-commit": "1.2.2",
    "prettier": "2.8.8",
    "react-native-dotenv": "3.4.8",
    "react-test-renderer": "18.2.0",
    "reactotron-react-native": "5.0.3",
    "reactotron-redux": "3.1.3",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

babel.config.js

module.exports = function (api) {
  api.cache(true);

  const aliases = {
    '@screens': './src/screens',
    '@utils': './src/utils',
    '@network': './network',
    '@theme': './src/Theme.js',
    '@config': './src/config',
    '@constants': './src/constants',
    '@components': './src/Components',
  };

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module-resolver', { alias: aliases, extensions: ['.ts', '.js', '.tsx'] }],
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-transform-private-methods', { loose: true }],
      ['react-native-reanimated/plugin'],
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          allowUndefined: true,
        },
      ],
    ],
  };
};

Simulator:
iphone 15, ios 17.4

I've tried various methods:

1. api.cache(true);
2. resetting the cache
3. deleting node_modules
4. rebuilding app
5. uninstalling and installing back again

Even deleted .env file but it doesn't seem to have any impact and was working fine.

[github-actions]

Hey, thank you for opening this issue! 🙂 To boost priority on this issue and support open source please tip the team at https://issuehunt.io/r/goatandsheep/react-native-dotenv/issues/508

[ShivangMishra]

Same issue here

[arnabJ]

While starting the server, via yarn, add "--reset-cache" to clear the cache. This helped me in getting the correct env.

My use case: I have two different .env files - One for development and one for production. I have two scripts to start the RN server each with different env file but it was taking always taking with the one I started.

Reseting the cache while starting the server helped me.

The full command:
yarn start --reset-cache
or,
yarn start:prod --reset-cache

package.json scripts:
{ ... "start": "APP_ENV=dev react-native start", "start:prod": "APP_ENV=prod react-native start", ... }

Env files:
.env.dev
.env.prod

[milan-vala]

still facing the same issue, and reseting cache does not help either.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Clarkkkk]

Still an issue

[ketul308]

Hi everyone 👋

I ran into the same issue and was able to resolve it with the following setup.

✅ Solution

1. babel.config.js configuration

plugins: [
'react-native-reanimated/plugin',
['module:react-native-dotenv', {
"moduleName": "@env",
"allowUndefined": false
}]
]

2. Created multiple .env files based on environments:

.env.dev
.env.stg
.env.prod

3. Added scripts in package.json to handle environment-specific builds:

"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"android:dev": "cp .env.dev .env && npx react-native run-android --mode devDebug",
"android:stg": "cp .env.stg .env && npx react-native run-android --mode stgDebug",
"android:prod": "cp .env.prod .env && npx react-native run-android --mode prodDebug",
"android:apk:dev": "cp .env.dev .env && npx react-native run-android --mode devRelease",
"android:apk:stg": "cp .env.stg .env && npx react-native run-android --mode stgRelease",
"android:apk:prod": "cp .env.prod .env && npx react-native run-android --mode prodRelease",
"pod": "cd ios && pod install && cd ..",
"ios:dev": "cp .env.dev .env && npx react-native run-ios --mode Debug --scheme champ_template_dev",
"ios:stg": "cp .env.stg .env && npx react-native run-ios --mode Debug --scheme champ_template_stg",
"ios:prod": "cp .env.prod .env && npx react-native run-ios --mode Debug --scheme champ_template"
}

Important: Each time you build, make sure to reset the Metro bundler cache:
npx react-native start --reset-cache

Note: Do not pass MY_ENV or APP_ENV directly in the script. The selected .env.* file is copied to .env and used during build.

Hope this helps others facing the same issue!

• @ketul308

[sayan-avantai]

Hi, I have solved the issue like @ketul308

package.json

"scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",
   "lint": "eslint .",
   "start": "react-native start",
   "test": "jest",
   "postinstall": "patch-package",
   "start:clean": "npx react-native start --reset-cache",
   "android:dev": "cp .env.dev .env && cross-env BABEL_ENV=development npx react-native run-android --mode devDebug",
   "android:staging": "cp .env.staging .env && cross-env BABEL_ENV=staging npx react-native run-android --mode stagingDebug",
   "android:prod": "cp .env.production .env && cross-env BABEL_ENV=production npx react-native run-android --mode prodRelease",

   "android:apk:dev": "cp .env.dev .env && cross-env BABEL_ENV=development bash -c 'cd android && ./gradlew assembleDevRelease'",
   "android:apk:staging": "cp .env.staging .env && cross-env BABEL_ENV=staging bash -c 'cd android && ./gradlew assembleStagingRelease'",
   "android:apk:prod": "cp .env.production .env && cross-env BABEL_ENV=production bash -c 'cd android && ./gradlew assembleProdRelease'",
   "bundle:prod": "cp .env.production .env && cross-env BABEL_ENV=production bash -c 'cd android && ./gradlew bundleProdRelease'"
 },

bable.config.js

  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        // path: envFile[process.env.BABEL_ENV] || '.env.development',
        // safe: false,
        allowUndefined: true,
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

create files like .env.dev , .env.production, .env.staging

Also install cross-env in dev dependency for better support for both platforms