Cannot set preferred environment to use environmental variables based on it

[vbilki]

I am trying to set environment while running the script to use variables from .env file with the suffix of environment, but it doesn't work at all. I got API_URL as undefined in axiosInstance when running with any environment. If I would have just .env file and import from there, it works fine. What is the problem with setting the environment, because i don't understand why it doesn't work?

package.json script:

"android:staging": "MY_APP_ENV=staging react-native run-android"

library version:
"devDependencies": { ..., "@types/react-native-dotenv": "^0.2.0", "react-native-dotenv": "^3.4.11", ... },

babel.config.js:
module.exports = function (api) { api.cache(false); return { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module:react-native-dotenv', { envName: 'MY_APP_ENV', }, ], ['react-native-reanimated/plugin'], ], env: { production: { plugins: ['transform-remove-console'], }, }, }; };

.env files:
.env.staging .env.develop .env.prod.

.env.staging:
API_URL=https:some-api-url/my-app

other .env files have the same environmental variable.

env.d.ts:
declare module '@env' { export const API_URL3: string; }

axiosInstance.ts:
import axios from 'axios'; import { API_URL } from '@env';

const headers = { Accept: 'application/json, text/plain, */*', 'Content-Type': 'application/json', 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Origin': '*', };

export const axiosInstance = axios.create({ baseURL: API_URL, headers, });