Environment Variables in Expo and TypeScript

Published on Aug 4, 2021

2 min read

EXPO

Updated: Apr 12, 2023

Managing different keys for different environments, such as development or production, is common among JavaScript developers. Therefore, variables defined in this file may change during development and production, but the code remains unchanged. Hence, the mechanism of the .env file exists.

Using Expo, there are different ways you can set up and use environment variables. My preferred method is to use the dotenv file. Environment variables defined in this file are loaded using a package called dotenv.

Install dotenv

🔗

To set up environment variables in an Expo app, the initial step is to install the dotenv and expo-constants packages.

1npx expo install dotenv expo-constants

Rename app.json

🔗

Next, rename the app.json file to app.config.js or, if using TypeScript: app.config.ts, at the root of your project. Then, add the import statement to use the dotenv configuration. Since it's a JSON file, you will have to export all Expo configuration variables and add an extra object containing Environment variables.

1import 'dotenv/config';
2
3export default {
4 expo: {
5 // ...
6 extra: {
7 // Add your extra configs here
8 apiKey: process.env.API_KEY
9 }
10 }
11};

Constants with expo-constants

🔗

All the keys inside the extra object are readable app-wide using expo-constants. An environment variable is accessible through Expo.Constants.manifest.apiKey.

In the case of TypeScript, use optional parameter syntax to avoid squiggly: "Object is possibly 'undefined' or 'null'".

1const API_KEY = Constants?.manifest?.extra?.apiKey;

More

🔗

To learn more about how to use Environment variables in an Expo project, refer to Expo's official documentation.


More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working maintaining docs at 𝝠 Expo. Read more about me on the About page.


Copyright ©  2019-2024 Aman Mittal · All Rights Reserved.