How to use .env file in a React Native Application

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=[e-mail]
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 [e-mail]

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.

Comments

[Wilmela]

Thank you. This was helpful.

[Dallington Asingwire]

@wilmela , Glad to hear that!

[k3nnet]

Danko . this was helpful.

[Taofeek Ibrahim Opeyemi]

Thank you.. This was helpful.

[mkhuzo zulu]

worked perfectly

[MarcoOttina]

What to do if the '@env' is not found despite following each steps?

[Dallington Asingwire]

@marcoottina, do you get this error when using typescript?

[abdul-megadraws]

Worked fine! But error in typescript import: Cannot find module '@env' or its corresponding type

[Dallington Asingwire]

@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;
}

[Pierre-Henry Soria ✨]

Great one Dallington 🙂
Any reason why you didn't install react-native-dotenv as devDependencies...? I'd recommend to do so.

[Nguyễn Quốc Vương]

Thanks u. U are my hero in my heart

[Thomas Lincoln]

You are a hero man, this literally save my project. I want one day to be able to make posts this useful