How to read EAS build Secrets and Environment Variables in a expo project. Getting undefined?

Question

This is my code in a Sample-Expo-Project. I am not able to add environment variable using process.env and also in EAS Secrets. I have added secrets in EAS but cannot read while building. In both cases I am getting undefined. Please spot where I am doing wrong, I am trying from multiple days.

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  console.log(process.env); // Getting {"NODE_ENV": "development"}
  console.log(process.env.HELLO); // Getting undefined

  return (
    <View style={styles.container}>
      <Text>From Env {process.env?.HELLO}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Babel Config

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["transform-inline-environment-variables"],
  };
};

Env File

HELLO=HelloEveryone

Package.json

{
  "name": "sample-expo-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.15",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
  },
  "private": true
}

Loanloanda

Expo has good documantation on this: docs.expo.dev/build-reference/variables/… – Fid

Not able to access secrets by process.env.SECRET_NAME – Loanloanda

Answer 1

I was also struggling with this and here is the solution that works best for me:

I set my environment variables in a .env file and on the expo.dev website under the configuration of my project. https://expo.dev/accounts/[your_username]/projects/[your_project]/secrets

In my coding I'm using react-native-dotenv. https://www.npmjs.com/package/react-native-dotenv

It is very easy to set up and they have a good documentation.

babel.config.js

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

env.d.tsx

declare module "@env" {
  export const HELLO: string;
}

App.tsx

import { HELLO } from "@env";

export default function App() {

  return (
    <View>
      <Text>From Env {HELLO}</Text>
    </View>
  );
}

If you're not using typescript you can skip the env.d.tsx part.

I'm now able to access my secrets in development and in my EAS builds without problems. I just uploaded a new version to Internal Testing on Android and it works fine.

Hope I could help someone.

Cheers, Thomas

Born

Hey Thomas, Thanks for your answer. I have a similar problem.I want to store my keystore password in eas secret and use it to build aab and push it using EAS. Do you know how can I do that? Thanks a lot. – Spoonful

Hi, sorry I never dealt with those things and let Expo CLI handle all the keystore stuff. So I can't help you there. I've only published one app and the above steps worked for me back then. – Olander

Answer 2

Elaborating on Thomas' answer, which is correct. I had the same issue, and it turns out that EAS secrets is not evaluated if you are running your app with --dev-client, even if the app i built with eas build.

I did not have a .env file. The secrets was stored in EAS but was getting undefined on environment variables when i ran my app with npx expo start --dev-client. When I built the app for production it was working as expected.

TL;DR: you need a .env-file (added to your .gitignore) if you want to run your app with --dev-client.

Hurds