DEV Community

Cover image for How to add Environment variables in a React Native project with TS
Vikrant Bhat
Vikrant Bhat

Posted on • Originally published at vikrantbhat.hashnode.dev

How to add Environment variables in a React Native project with TS

There are a lot of ways in which we can use environment variables in React Native, you can look at many of them listed in this stack-overflow question

The purpose of this blogpost is to point out and explain the simplest and quickest way to make use of environment variables in your RN project with typescript type checking, you can still follow this blog if you are just using javascript.

We will be making use of the handy npm library react-native-dotenv

STEP 1: Install following packages:



npm install react-native-dotenv


Enter fullscreen mode Exit fullscreen mode

or



yarn add react-native-dotenv


Enter fullscreen mode Exit fullscreen mode

For typescript install additionally:



npm install -D @types/react-native-dotenv


Enter fullscreen mode Exit fullscreen mode

or



yarn add -D @types/react-native-dotenv


Enter fullscreen mode Exit fullscreen mode

STEP 2: update your babel.config.js

This blogpost uses an expo managed project, hence the babel.config.js will look like



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


Enter fullscreen mode Exit fullscreen mode

here, moduleName is the alias we can give to react-native-dotenv library so we can import like:



import { ENV_VAR } from "@env" 


Enter fullscreen mode Exit fullscreen mode

instead of:



import { ENV_VAR } from "react-native-dotenv" 


Enter fullscreen mode Exit fullscreen mode

this just makes importing a bit easier :)

STEP 3: Create a .env file in the root directory and add your environment variable



ENV_VAR=some-secret-value


Enter fullscreen mode Exit fullscreen mode

STEP 4: Use the environment variable by importing it



import { ENV_VAR } from "@env" 


Enter fullscreen mode Exit fullscreen mode

STEP 5: Add typescript support

Screenshot 2021-08-09 at 12.01.36 AM
If you are using Typescript in your project, so you must have observed that typescript is yelling at you in STEP 4.
To fix this, we will create an env.d.ts file in the root directory with the following content:



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


Enter fullscreen mode Exit fullscreen mode

Wait a second! we are almost done, phew 😅

After this, you also need to update your tsconfig.json file with:



{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
        "strict": true
    },
    "typeRoots": ["./types"] // <------ you need to add this
}



Enter fullscreen mode Exit fullscreen mode

And now we are done!


Thank-you for reading this blog! The goal for me writing these specific use-case blogs is to create a directory which I can look back on in future for reference and also help the developer community while at it.
Please consider following me here or on Twitter to get updates for my latest publications :)

Top comments (5)

Collapse
 
araymond11 profile image
araymond11

Thanks a lot !!

Collapse
 
arthurbm profile image
Arthur Brito Medeiros

Thank you, nice and clear!

Collapse
 
ankan_2025 profile image
Ankan Bhattacharya

Thanks for the help... bro....

Collapse
 
dkulakov profile image
Dmitry

Can we use nested variables?

PASSWORD=s1mpl3
DB_PASS=$PASSWORD

Collapse
 
goatandsheep profile image
Kemal Ahmed

Hi @dkulakov unfortunately no the library does not support nested variables