DEV Community

Cover image for How to set environment variables with EAS/Expo and React Native
Alexandre C.
Alexandre C.

Posted on

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

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

Enter fullscreen mode Exit fullscreen mode

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
eas

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

app.config.js

extra plaintext

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

extra secrets

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

access constants

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

Top comments (8)

Collapse
 
albanx0 profile image
Alban X • Edited

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

Collapse
 
marcel97 profile image
Marcel Cohen

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.

Collapse
 
fernandatoledo profile image
Fernanda Toledo

@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 :/

Collapse
 
marcel97 profile image
Marcel Cohen • 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.

Collapse
 
seunope profile image
Mesonrale Ope • 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;
 };
Enter fullscreen mode Exit fullscreen mode
Collapse
 
altencirsilvajr profile image
Altencir Junior

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.

Collapse
 
russocorp profile image
Rafael Rossi

Tks :)

Collapse
 
kovalenkoandri profile image
kovalenkoandri

great Works!