Nx can't get the correct .env parameter for react native.

[frankA10019]

Current Behavior

I add the .env, .env.staging, .env.production in my react native project root, and add different API_URL. My api manager is a library for manage api connect. I want to use different api url to call different environment api.

.dev
API_URL=https://myapi.com/dev

.env.staging
API_URL=https://myapi.com/staging

.env.production
API_URL=https://myapi.com/production

I import Config from 'react-native-config' and want to use Config.API_URL.
When I use "yarn run env-cmd -f apps/employee/.env.staging nx run-ios employee", it still get "https://myapi.com/dev". It should be the "https://myapi.com/staging".

ENVFILE = apps/employee/.env.staging nx run-ios employee doesn't work either.

I use customize command below and run "nx run-ios:staging employee". It still get the .env's API_URL. Changed the file name from ".env.staging" to ".staging.env" doesn't work either.

"run-ios:staging": {
"executor": "@nrwl/workspace:run-commands",
"options": {
"command": "nx run-ios employee",
"envFile": "apps/employee/.env.staging"
}
}

Expected Behavior

get the correct staging api url.

Github Repo

No response

Steps to Reproduce

1. add env file in react native project root.(/apps/employee/.env.staging)
2. run the project in the iOS simulator.

Nx Report

Node : 16.18.0
   OS   : darwin arm64
   yarn : 1.22.17

   nx : 14.3.6
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.3.6
   @nrwl/detox : 14.3.6
   @nrwl/devkit : 14.3.6
   @nrwl/eslint-plugin-nx : 14.3.6
   @nrwl/express : Not Found
   @nrwl/jest : 14.3.6
   @nrwl/js : 14.3.6
   @nrwl/linter : 14.3.6
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 14.1.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.3.6
   @nrwl/react-native : 14.3.6
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.3.6
   @nrwl/web : 14.3.6
   @nrwl/workspace : 14.3.6
   typescript : 4.7.4

Failure Logs

No response

Additional Information

If I delete the .env then Config.API_URL become undefined. It seems that nx only can get the .env file. It doesn't get the right env file by the order mentioned in the document.

Selete the app in the simulator and re-build doesn't work either. But if I changed the API_URL in the .env, App can get the changed API_URL. It seem that only .env file can been read.

my react native version is 0.68.2.
Here is the article refer to.
https://dev.to/calintamas/how-to-manage-staging-and-production-environments-in-a-react-native-app-4naa

[Crocsx]

This is related to this :
#7729

nx only load {target}.env and not {configuration}.env so what you are trying to do is sadly not supported by Nx. It will always only load cascading according to https://nx.dev/recipes/environment-variables/define-environment-variables

This feature as a lot of request but it's pending for quite a while.

[xiongemi]

for env variables in native, it differently from above doc. there is no out of box support. you need to install your own library for this. for example:

• react native config https://github.com/luggit/react-native-config
• react-native-ultimate-config https://www.npmjs.com/package/react-native-ultimate-config

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.