Alexandre C.

Posted on Jan 27, 2023

How to set environment variables with EAS/Expo and React Native

#environment #variables #eas #reactnative

Most of the time your project will need to handle environment variables such as API Url or API key. As it is unsafe to store your keys and sensitive data on Github/Gitlab or hardcoded in your project, the best solution when it comes to React Native project is to benefit from EAS and Expo configuration.

Prerequisites

Your React Native project should be configured to use EAS, follow this documentation if it's not the case.

Then if your project is already managed by Expo you should have the expo-constants package, if not you can install it following these instructions.

Last you have to install dotenv package in your project


 expo install dotenv

Configure your environment variables

First important thing, at the root of your project you must convert the app.json file to app.config.js file

Plaintext environment variables

In your eas.json file you can add plaintext/harcoded environment variables that you are comfortable with committing to your source code. For example API Url.

Warning
Don't put secrets here!

eas.json

Then in your app.config.js you must reference these variables like this

app.config.js

Secrets

To manage secrets in your environment variables you have to create a new secret with EAS CLI


 secret:create --scope project --name SECRET_NAME --value secretvalue --type string

To view any existing secrets for your project, run ```eas

secret:list


You can also importing your secrets from a *.env* file
```eas

 secret:push --scope project --env-file .env

Then to access your secrets you need to configure your app.config.js file

Access your environment variables in your project

To use environment variables in your project it is easy using expo-constants package.

For example in a screen

For more details and configuration you can always to the official Expo and EAS documentation

Top comments (8)

Alban X • Apr 29 '23 • Edited

this guide so far does not work, it does not connect .env with eas.json file

Marcel Cohen • Mar 6

How do you set different values of an env variable based on the EAS profile? Imagine API_URL for different profiles (beta, staging, prod). I see the secret is just a key pair which can be scoped to the app or to the expo account.

Fernanda Toledo • Aug 21

@marcel97 Have you found a way to do this? I've been looking for the answer for days now, read so many articles and docs... no answer so far :/

Marcel Cohen • Aug 21 • Edited

Hi @fernandatoledo

What I ended up doing is adding the environment as a a prefix to the variable names. Following the API_URL example there would be DEV_API_URL, STAGING_API_URL and PROD_API_URL eas secrets. Then during the build, based on the expo profile, I would read the eas secrets of a given environment prefix.
Here's a related stack overflow post.

Mesonrale Ope • Jan 3 • Edited

Thank you, your guide worked for me, but i had to do some modification.

1) I retained my app.json, i did not rename it as suggested in the guide
2) I added the apiKey:"" in the extra of my app.json
3) I created app.config.js with the following configurations

 import "dotenv/config";

 const apiKey = process.env.API_KEY;

 module.exports = ({ config }) => {
  config.extra.apiKey = apiKey;
  return config;
 };

Altencir Junior • Feb 21

Could you elaborate more on how you went about your process? I'm creating a project where I need to keep a token variable secret, and it cannot be read in the code when generating APK and in dev-client. How can I cast the secret to the EAS server and read it in my code? I tested it using the article above and it didn't work.