I have two different environments with named .env.development, .env.production, and common .env also.

.env.development looks like this,

TEST_LABEL=Development

.env.production looks like this,

TEST_LABEL=Production

.env looks like this,

TEST_LABEL=ENV

And here is my babel.config.js,

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ["module:react-native-dotenv",
        {
          "moduleName": "@env"
        },]
    ]
  };
};

this is the scripts in package.json

"scripts": {
    "start": "react-native start",
    "development": "NODE_ENV=development expo start",
    "production": "NODE_ENV=production expo start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
},

And this is how I used it in my Homescreen.js

import {TEST_LABEL} from "@env"
...
<Text>{TEST_LABEL}</Text>

And this displays always Development even I run the production env

I run the app like npm run development for development environment, npm run production for production environment.

I am using react-native-dotenv

Here is the Project structure snapshot,