React Native Environment Variables Debugger

UniversalWorks with Expo & React Native CLI

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

The Environment Inspector tool lets you view and validate environment variables in your React Native app. It automatically discovers EXPO_PUBLIC_ prefixed variables and provides validation, type detection, and health monitoring.

Don't take our word for it — this is the real tool, running right here on a mock build. The guided tour below walks one debugging story: vars stream in as discovered, a declared contract lights up what never shipped, you read exactly what's wrong, compare two builds' health, and land the fix. Or skip the tour and just start tapping:

Real component, real build

1 / 6

Not a video — this is the shipped tool on a mock build. Every EXPO_PUBLIC_ var the binary actually resolved streams in: auto-discovered, auto-typed, zero config.

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(),
  ],
});

The envVar Builder

The fluent builder API makes it easy to define environment variable requirements:

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

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

createEnvTool({
  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 - Auto-collects all EXPO_PUBLIC_ prefixed 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

Status	Description
required_present	Required var is set and correct
required_missing	Required var is not set
required_wrong_value	Set but doesn't match expected value
required_wrong_type	Set but wrong type
optional_present	Optional 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

Your environment (paste .env or edit)

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(),
  ],
});

Environment Inspector