Skip to main content

Env setup and usage

Setup:

  1. env.js file at the root of your project.
    • This file is responsible for:
      • Loading environment variables from the .env file.
      • Defining a schema using Zod to ensure the validity and type safety of the expected environment variables.
      • Validating the loaded variables against the schema.
      • Exposing the validated and parsed environment variables as Env for use in your application.
  2. app.config.ts file at the root of your project.
    • Purpose: This file extends the Expo configuration (ExpoConfig) by incorporating the validated environment variables from env.js.
    • Functionality:
      • Imports the Env object from env.js, which contains the validated environment variables.
      • This effectively injects the environment variables (Env) into the extra property of the Expo configuration.
      • Exports the modified Expo configuration for use during the app build process.
  3. folder config with a file named env.js inside it.
    • config/env.js leverages expo-constants to fetch the config from app.config.ts.

Using Env

Now, instead of using process.env in your files, you can directly use the exported Env from config/env.js.

Example:

  • Instead of using process.env.EXPO_PUBLIC_GRAPHQL_URL, you can use Env.EXPO_PUBLIC_GRAPHQL_URL.