How to permanently hide the Expo Dev Tools button in development builds

by

Summary

The floating Dev Tools button that appears in Expo development builds is injected by the Expo Go client. It can be hidden from the Dev Menu, but the setting does not persist across reloads. The permanent solution is to disable the development client UI via the app’s configuration (e.g., app.json/app.config.js) or by building a custom dev client that omits the button entirely.

Root Cause

  • Expo injects the button through the Expo Dev Launcher runtime.
  • The “Hide Tools button” option only toggles a UI flag in‑memory; the flag is not saved to persistent storage.
  • When the bundle reloads or the app restarts, the runtime re‑initialises with the default UI, causing the button to reappear.

Why This Happens in Real Systems

  • Hot‑reload friendly design – Expo assumes developers want quick access to the dev menu on every launch.
  • The button is part of the default development client shipped with Expo Go, which cannot be modified without a custom build.
  • Persisting UI preferences would require additional native code and a storage layer, which Expo intentionally avoids to keep the dev client lightweight.

Real-World Impact

  • User distraction – The floating button can obscure UI elements during demos or internal testing.
  • Accidental dev menu opens – Users may trigger the dev menu unintentionally, causing confusion.
  • Inconsistent UI – Teams that hide the button in one session may forget to do so later, leading to flaky UI screenshots or recordings.

Example or Code (if necessary and relevant)

{
  "expo": {
    "plugins": [
      [
        "expo-dev-client",
        {
          "disableDevTools": true
        }
      ]
    ]
  }
}

The snippet above shows how to disable the Dev Tools button when building a custom dev client with the expo-dev-client plugin. The disableDevTools flag is evaluated at native launch time and prevents the button from being rendered.

How Senior Engineers Fix It

  • Create a custom dev client using expo-dev-client and set disableDevTools: true in the plugin config.
  • Rebuild the native binary (eas build --profile development) so the flag is baked into the native code.
  • For quick suppression during ordinary development, add a script that runs expo start --no-dev-tools (if supported) or use environment variables to hide the UI in CI pipelines.
  • Document the configuration in the repo’s README so new engineers know the button is intentionally disabled.

Why Juniors Miss It

  • They assume the UI toggle in the Dev Menu is persistent, mirroring typical web/localStorage patterns.
  • They often work only with Expo Go and are unaware that permanent changes require a custom dev client build.
  • Lack of experience with native configuration files (e.g., app.json, app.config.js) leads them to look for a JavaScript‑only solution that doesn’t exist.

Leave a Comment