How to get .env variables in React Native with TypeScript and RN CLI?

Question

I'm working on a react native project with typescript and react native CLI (not expoCLI). These are the versions I have:

...
    "@types/jest": "^28.1.4",
    "@types/react": "~17.0.21",
    "@types/react-native": "0.68.0",
    "@types/react-test-renderer": "^18.0.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-config": "^1.4.12",
    "typescript": "^4.5.2"
    "react-native-dotenv": "3.4.7",
    "@types/react-native-dotenv": "0.2.0",

I have my .env file with some environment variables that I want to use inside my files. I follow the steps from the official documentation of https://www.npmjs.com/package/react-native-dotenv and adding the steps for typescript.

1. Create a .babelrc file with the plugins
2. add the "envName", "moduleName", "path"
3. My .env file has the following format API_EXAMPLE=123
4. I create te type folder and the env.d.ts folder with the declare module '@env'
5. I added the typeRoots on my tsconfig.json file (this step is causing me errors with my unit test (types/jest package) if I delete this line everythings works again, but my env variables still doesn't work, so I'm going to find how to fix this error later)

I tried a lot of stackoverflow's answers. For example:

• Changing the '@env' for 'react-native-dotenv'
• Make a yarn start --reset-cache
• Move my .env file to the root and inside the types (this steps with restarting my IDE and doing the yarn start --reset-cache)
• I tried with .babelrc and babel.config.js presets and settings
• Of course I delete my node_modules folder and install everything again

But after all of these steps I'm still having the following error on my console:

unable to resolve module '@env' from 'src/../.../../../MyFile.js: @env could not be found within the project

Error: Unable to resolve module path from node_modules/react-native-dotenv

Module ../.../node_modules_@types/react-native-dotenv has no exported member API_EXAMPLE

am I missing any steps?

Something else to clarify, this is the structure of my project:

projectFolder
--.github
--docs
--myApp (this folder contain the iOS and Android folder and files for execute my components)
--src
  |--- client
      |--- config
            |--- myApiConfigs.ts // this file contain the env variable I want to get from .env file (.env file is at .gitignore)
  |--- components // all of my react native components
-- .env //.env file are on my root folder, also tried at types folder 
      

Answer 1

doing some digging found this blog that does the following:

.env file:

API_KEY=your_api_key_here

env.d.ts file:

declare module '@env' {
  export const API_KEY: string;
}

your component file:

import { API_KEY } from '@env';

but for this method each variable has to be added to the env types file.

Hope this helps.