React Native with Expo: how to use a .env.local config file?

Question

I have a react-native app running with expo (expo 27.1.1 and react-native 0.55.4).

I'd like to use a .env.local file, the only thing I found is using babel-plugin-inline-dotenv, but it loads the content of .env file instead of .env.local file (and I want it to load the content of .env.local if the file exists otherwise .env).

Is there an other similar plugin allowing that?

Nope: https://github.com/luggit/react-native-config/issues/249 — Simon, Sep 27 '18 at 23:43
maybe https://docs.expo.io/versions/latest/expokit/expokit ? sorry I don't work with expo — Robbie Milejczak, Sep 28 '18 at 00:22
no the link is for expo kit, which is basically like ejecting for an expo application. If you follow that process then you can run `react-native link` in an expo project — Robbie Milejczak, Sep 28 '18 at 13:11
Yes but I don't want to use eject, especially because if I want to use .env.local, it's for the the development process... — Simon, Sep 28 '18 at 15:04
Not to be mean but I don't know why you're telling me what you want or don't want to do, I'm going out of my way to help you by giving you options to use a `.env` in an expo project. You might also be able to use babel for this: https://www.npmjs.com/package/babel-plugin-inline-dotenv hope you figure something out mate — Robbie Milejczak, Sep 28 '18 at 15:23
Not to be mean, but you answer me although you don't know expo and you don't read correctly, I'm already able to use a .env in my expo project, I want to override it by a .env.local if existing — Simon, Sep 28 '18 at 16:06
I don't use expo because I work with native code projects, and I offered to help because no one else did. Sorry you're not able to find a solution — Robbie Milejczak, Sep 28 '18 at 17:19
Have a look at this: https://github.com/brysgo/babel-plugin-inline-dotenv/issues/38#issuecomment-510135137 — User Rebo, Sep 29 '20 at 18:44

score 5 · Answer 1 · edited Jun 10 '22 at 13:25

Hi instead you can use Expo "extra" configuration property. in app.json under expo add let's say myApiKey like this:

{
  "expo": {
    "name": "login-app",
    "slug": "login-app",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "extra": {
      "myApiKey" : "1234"
    }
  }
}

And you can use it anywhere in your app without importing any file. just use it like this:

Expo.Constants.manifest.extra.myApiKey

Bad thing of doing it that way is that this files must be committed and so do env var changes. — Lucio, Apr 04 '19 at 15:35
Does it have to be committed? One could use app.js.sample, and commit that. — leogoesger, Oct 25 '19 at 04:20

score 2 · Accepted Answer · edited Oct 07 '21 at 18:54

I finally found a solution:

Add a file env.js with this:

import Constants from "expo-constants";

function getEnvVars() {
  if (__DEV__) {
    return returnEnvVars();
  } else {
      return new Promise(resolve => {
          resolve(Constants.manifest.extra);
      });
  }
}

async function returnEnvVars() {
  return await import("envLocal.js");
}

export default getEnvVars;

Then you can put your env variables in the file envLocal.js like this:

export default {
  test: "localhost"
};

and your prod variables in your app.json file, like this:

{
  "expo": {
    "extra": {
      "test": "prod"
   }
}

Finally you can call it like this:

import getEnvVars from "../environment";
getEnvVars().then(vars => console.log(vars));

React Native with Expo: how to use a .env.local config file?

2 Answers2