docs

Environment Inspector

+
UniversalWorks with Expo & React Native CLI

This tool works with both Expo and React Native CLI projects. Just install and go.

Inspect environment values available to the running JavaScript process and validate them against required names, types, and expected values.

Expo's build-time substitution does not make every EXPO_PUBLIC_ variable enumerable at runtime. A value missing from this tool is not proof that it is missing from your app's bundle. See the limitations below.

your environment, in 80 seconds

Inspect example environment values

1 / 6

This demo supplies example environment values and validation rules. In your app, pass values explicitly; Expo public variables need static references for bundler substitution.

9:41
Loading live demo…
Mock build, real component — the same code that renders in your app. Step through the tour, or just start tapping.

Installation

npm install @buoy-gg/env

After installation, the Environment Inspector will be auto-detected and appear in your FloatingDevTools menu.

Custom Configuration

For more control, use createEnvTool with the envVar builder to define required variables and validation rules:

tsx
import { createEnvTool, envVar } from "@buoy-gg/env";

const envTool = createEnvTool({
  requiredEnvVars: [
    envVar("EXPO_PUBLIC_API_URL").exists(),
    envVar("EXPO_PUBLIC_DEBUG_MODE").withType("boolean").build(),
    envVar("EXPO_PUBLIC_ENVIRONMENT").withValue("development").build(),
    envVar("EXPO_PUBLIC_MAX_RETRIES")
      .withType("number")
      .withDescription("Maximum API retry attempts")
      .build(),
  ],
});
import { createEnvTool, envVar } from "@buoy-gg/env";

const envTool = createEnvTool({
  requiredEnvVars: [
    envVar("EXPO_PUBLIC_API_URL").exists(),
    envVar("EXPO_PUBLIC_DEBUG_MODE").withType("boolean").build(),
    envVar("EXPO_PUBLIC_ENVIRONMENT").withValue("development").build(),
    envVar("EXPO_PUBLIC_MAX_RETRIES")
      .withType("number")
      .withDescription("Maximum API retry attempts")
      .build(),
  ],
});

Mount the configured preset through apps; calling the factory alone does not change the discovered tool:

tsx
import { FloatingDevTools } from "@buoy-gg/core";

<FloatingDevTools apps={[envTool]} />
import { FloatingDevTools } from "@buoy-gg/core";

<FloatingDevTools apps={[envTool]} />

This fragment assumes you have already configured your Buoy account and mounted the menu as described in Quick Start.

The envVar Builder

Use the builder to declare a requirement:

tsx
envVar("API_KEY")
  .withType("string")           // Set expected type
  .withValue("sk_test_123")     // Or set expected value
  .withDescription("API Key")   // Add documentation
  .build()                      // Finalize config

// Shorthand for just checking existence
envVar("API_KEY").exists()
envVar("API_KEY")
  .withType("string")           // Set expected type
  .withValue("sk_test_123")     // Or set expected value
  .withDescription("API Key")   // Add documentation
  .build()                      // Finalize config

// Shorthand for just checking existence
envVar("API_KEY").exists()

Supported Types

typescript
type EnvVarType = "string" | "number" | "boolean" | "array" | "object" | "url";
type EnvVarType = "string" | "number" | "boolean" | "array" | "object" | "url";

createEnvTool Options

typescript
type EnvToolOptions = {
  name?: string;                    // default: "ENV"
  description?: string;
  colorPreset?: "orange" | "cyan" | "purple" | "pink" | "yellow" | "green"; // default: "green"
  id?: string;                      // default: "env"
  requiredEnvVars?: RequiredEnvVar[];
  enableSharedModalDimensions?: boolean;
};
type EnvToolOptions = {
  name?: string;                    // default: "ENV"
  description?: string;
  colorPreset?: "orange" | "cyan" | "purple" | "pink" | "yellow" | "green"; // default: "green"
  id?: string;                      // default: "env"
  requiredEnvVars?: RequiredEnvVar[];
  enableSharedModalDimensions?: boolean;
};

Features

  • Automatic Discovery - Collects runtime-visible EXPO_PUBLIC_ variables
  • Required Variable Validation - Define which vars must exist with expected values/types
  • Type Detection - Auto-detects: string, number, boolean, array, object, url, json
  • Search & Filtering - Real-time search + filters for "All", "Missing", "Issues"
  • Health Status - Health percentage (0-100%) with HEALTHY/WARNING/ERROR/CRITICAL states
  • Statistics - Total count, required count, missing count, wrong value/type counts
  • Copy to Clipboard - Copy any value with one tap

Variable Status Types

StatusDescription
required_presentRequired var is set and correct
required_missingRequired var is not set
required_wrong_valueSet but doesn't match expected value
required_wrong_typeSet but wrong type
optional_presentOptional var that is set

Validation Visual Indicators

  • Green - Variable exists and matches expected value/type
  • Yellow - Variable exists but value/type differs from expected
  • Red - Required variable is missing

Try It Out

Use the interactive builder below to create your environment validation config. Add variables, configure checks (type, value, description), and export the code directly.

Env Config Builder
Required variables (click to toggle)
API_URLurl
AUTH_TOKENexists
DEBUGboolean
ENVIRONMENTproduction or development
MAX_RETRIES
+ require
SECRET_KEYsk_*
1 error — missing
  • ✕AUTH_TOKENis not set
3 warnings — validation failed
  • ⚠ENVIRONMENTexpected "production or development", got "staging"
  • ⚠SECRET_KEYexpected "sk_*", got "pk_test_wrong"
  • ⚠DEBUGexpected boolean, got string
Generated Config
tsx
import { envVar, createEnvTool } from "@buoy-gg/env";

const envTool = createEnvTool({
  requiredEnvVars: [
  envVar("API_URL").withType("url").build(),
  envVar("AUTH_TOKEN").exists(),
  envVar("DEBUG").withType("boolean").build(),
  envVar("SECRET_KEY").withValue("sk_*").build(),
  envVar("ENVIRONMENT").withValue("production or development").build(),
  ],
});
import { envVar, createEnvTool } from "@buoy-gg/env";

const envTool = createEnvTool({
  requiredEnvVars: [
  envVar("API_URL").withType("url").build(),
  envVar("AUTH_TOKEN").exists(),
  envVar("DEBUG").withType("boolean").build(),
  envVar("SECRET_KEY").withValue("sk_*").build(),
  envVar("ENVIRONMENT").withValue("production or development").build(),
  ],
});

What It Can't Do

Discovery reads the runtime process.env object and filters for EXPO_PUBLIC_ names. Declaring a required name adds a validation target; it does not inject a value into the runtime.

Expo substitutes statically referenced environment values during bundling. Runtime enumeration cannot reliably recover those substitutions. Check a known value in your actual build before using this inspector as a completeness check.

The tool does not read your .env file or change your build configuration. Apply environment changes through your app's normal build or update process.

FAQ

How do I check which env vars my Expo app actually loaded?

Install @buoy-gg/env and open the Env tool — it shows runtime-visible values. Expo-inlined values may be absent; check the limitations above.

Can it tell me why an env var is wrong, not just missing?

Yes — declare expected types and values, and failures show the current value, expected value, and context.

Web support

Supply public runtime values explicitly with setRemoteEnv. The inspector cannot enumerate variables that a bundler replaced at build time. Import it from the package's /web entry (7.0.41 or later). See Web installation for registration, dependencies, and browser boundaries.

Native iOS (Swift)

Environment Inspector is also part of Buoy for Swift for SwiftUI and UIKit apps. Setup and what the Swift version covers are in the Swift tools guide.