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!
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)
this guide so far does not work, it does not connect .env with eas.json file
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.
@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 :/
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
andPROD_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.
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 guide2) I added the
apiKey:""
in the extra of my app.json3) I created
app.config.js
with the following configurationsCould 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.
Tks :)
great Works!