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 :)

Discussion (0)