Using environment file (.env) to configure most critical variables like database credentials, api keys, is the most common practice in software development. In this post, we are going to see how to create and use .env file in react native.
First, we need to install and use a babel plugin called react-native-dotenv. Install this plugin under your project root directory using the command below;
npm install react-native-dotenv
This babel plugin lets you inject your environment variables into your react-native application.
.env file
Create .env file under your project root directory and example looks like below;
APP_NAME=MyRNApp
COMPANY_EMAIL=yyy@xxxx.com
API_KEY=myapikeyisplacehere
Create if you don't have babel.config.js file under your project root directory, and add the following code
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module:react-native-dotenv", {
"envName": "APP_ENV",
"moduleName": "@env",
"path": ".env",
"safe": false,
"allowUndefined": true,
"verbose": false
}]
]
};
How to access and use environment variables in your components
import React from 'react'
import {View, Text} from 'react-native'
import {APP_NAME, API_KEY, COMPANY_EMAIL} from '@env'
const App = () => {
return (
<View>
<Text>My App name is {APP_NAME}</Text>
<Text>My API Key is {API_KEY}</Text>
<Text>Company email is {COMPANY_EMAIL}</Text>
</View>
);
}
export default App;
Output on your emulator or phone device screen
My App name is MyRNApp
My API Key is myapikeyisplacehere
Company email is yyy@xxxx.com
As you can see the above output, we have been able to load environment variables,APP_NAME, API_KEY and COMPANY_EMAIL into our react native application.
NOTE:
If you are using Typescript, create a file env.d.ts or env.d.tsx in your project root directory and then define module '@env' in it forexample;
declare module '@env' {
export const API_URL: string;
export const APP_MAJOR_VERSION: string;
export const APP_MINOR_VERSION: string;
export const APP_PATCH_VERSION: string;
}
And that's the basic example of how you can use a .env file in a react native application. Thank you for reading through this article.
Top comments (13)
Thank you.. This was helpful.
You are a hero man, this literally save my project. I want one day to be able to make posts this useful
Thank you. This was helpful.
@wilmela , Glad to hear that!
Danko . this was helpful.
Thanks u. U are my hero in my heart
worked perfectly
Great one Dallington 🙂
Any reason why you didn't install
react-native-dotenv
asdevDependencies
...? I'd recommend to do so.Thank you
What to do if the '@env' is not found despite following each steps?
@marcoottina, do you get this error when using typescript?
Worked fine! But error in typescript import: Cannot find module '@env' or its corresponding type
@abdulmegadraws, to resolve error in typescript import: Cannot find module '@env' or its corresponding type, create env.d.ts file in your project root directory and define module '@env' for example;
declare module '@env' {
export const API_URL: string;
export const MAJOR_VERSION: string;
export const MINOR_VERSION: string;
export const PATCH_VERSION: string;
}