DevtoolsProvider

import { DevtoolsProvider } from '@axonpack/expo-devtools';

<DevtoolsProvider config={config}>
  <YourApp />
</DevtoolsProvider>;

Wrap your app in it once, at the root. It starts the devtools as it renders, which is before any child's mount, and hosts the panel. There is no init to call.

Props

The provider is generic over your theme names, so config.defaultTheme accepts a built-in id or a key of config.themes and nothing else.

The button is draggable, stays inside the screen, and keeps a 44dp touch area through hitSlop even at a smaller size. Rendering it is also what marks first render for the startup breakdown.

statusBar

The panel never paints a status bar background of its own: the header extends behind it, so that area is already the toolbar's colour. What this prop decides is the content.

Whatever the app had is restored when the panel closes. Without this, a light app's dark icons stay dark and become unreadable over a dark panel.

Top level

With enabled: false the provider renders its children and the crash sheet and nothing else: no patches, no button, no panel. The config is read on the first render and never again, because the patches are global and go in one time, so enabled cannot be flipped mid-session.

Network

The switches name the kind of traffic, not the mechanism that carried it. A request is a request whether it went out through fetch, through XMLHttpRequest, from a JSI client or from inside a page.

With sse off, the app's own stream is still recognised as one. Its endless body has to be, or it would be read as a response. So the row remains and only the events are dropped. A page's stream has no request underneath it that anything here can see, so that one disappears entirely.

Redaction happens before a request is stored, so nothing downstream sees the real value: not the list, the detail panel, copy, export, the DevTools tab or crash breadcrumbs. Replaying a request from the panel sends the placeholder too. redactHeaders covers HTTP rows only, while redact sees WebSocket rows too. Socket frames and stream events pass through neither. See Redaction.

network: {
  redactHeaders: ['authorization', 'cookie', 'set-cookie'],
  redact: (entry) => ({ ...entry, url: entry.url.replace(/token=[^&]+/, 'token=[redacted]') }),
}

Console

Performance

Storage

See Storage adapters for how to build one.

Navigation

The tab is there only when a router is installed. Expo Router is found on its own. So is a React Navigation container the provider sits inside. A container mounted inside the provider is handed over with useDevtoolsNavigation.

What redact returns is all anything downstream sees: the history, the tree, copy, export and crash reports.

navigation: {
  redact: (move) =>
    move.to?.params && 'token' in move.to.params
      ? { ...move, to: { ...move.to, params: { ...move.to.params, token: '[redacted]' } } }
      : move,
}

See Navigation and the Navigation tab.

Crash

Crash capture is the only part of this package that runs with the devtools off.

With the devtools off, an app relying on enableWhileDevtoolsDisabled alone installs nativeExceptions only, whatever the other two say: the JS tiers report errors the app survived, which is a developer's concern, and the sheet there is in front of a user. A fatal JS error still arrives, because React Native turns it into a native exception on the way to killing the process.

disableDefaultLogBox uninstalls LogBox rather than muting it, which takes the yellow warning toasts with it. LogBox is one component and the two cannot be separated. Warnings are still captured by the Console tab. It only does anything in development; LogBox is already an empty stub in a release build.

Related components