react-native-admin-tools

In-app admin/dev tools for React Native: a draggable floating launcher that opens a menu of tools. Ships with two built-in tools — console logs and network inspector — and a plugin API for registering your own.

• Draggable launcher bubble, shown only when you decide (enabled prop)
• Console-logs tool: patches console.* into a ring buffer with an in-app viewer
• Network-inspector tool: wraps react-native-network-logger with a minimizable bottom-sheet panel
• Custom tools: any object with { id, label, render }
• No expo dependency; works in any React Native app on the New Architecture

Installation

yarn add react-native-admin-tools

Peer dependencies (must be installed in your app):

yarn add react-native-gesture-handler react-native-reanimated react-native-network-logger

Reanimated v4 requires the New Architecture and its babel setup (react-native-worklets/plugin). With Expo this is automatic via babel-preset-expo; bare RN apps follow the reanimated install docs. The app must be wrapped in GestureHandlerRootView.

Usage

import {
  AdminToolsHost,
  createConsoleLogsTool,
  createNetworkInspectorTool,
} from "react-native-admin-tools";

// Module scope: capture starts immediately, so logs/requests from app
// startup are recorded even before the UI mounts.
const tools = [
  createConsoleLogsTool(),
  createNetworkInspectorTool({ maxRequests: 500, ignoredHosts: ["127.0.0.1", "localhost"] }),
];

export const App = () => (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <YourApp />
    {/* Render last so it floats above everything */}
    <AdminToolsHost tools={tools} enabled={isInternalBuild} />
  </GestureHandlerRootView>
);

AdminToolsHost props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | tools | AdminTool[] | — | Tools shown in the launcher menu, in array order. | | enabled | boolean | true | Gate. Pass your own logic (build channel, admin flag, …). | | launcherIcon | ReactNode | 🛠 glyph | Custom launcher button content. |

Built-in tools

createConsoleLogsTool({
  id: "console-logs",        // default
  label: "Logs",             // default
  maxEntries: 500,           // ring-buffer capacity
  forwardToConsole: __DEV__, // default: forward in dev, swallow in release
});

createNetworkInspectorTool({
  id: "network-inspector",    // default
  label: "Network Inspector", // default
  // ...plus anything accepted by startNetworkLogging:
  maxRequests: 500,
  ignoredHosts: ["127.0.0.1"],
});

Both factories start capturing when called — create them at module scope to capture from app startup. For finer control over console capture, startConsoleCapture(options) / stopConsoleCapture() are exported separately.

Writing a custom tool

A tool is a plain object. render is mounted while the tool is open and receives close:

import type { AdminTool } from "react-native-admin-tools";

export const forceAccountTool: AdminTool = {
  id: "force-account",
  label: "Force Account",
  render: ({ close }) => <ForceAccountModal onClose={close} />,
};

const tools = [createConsoleLogsTool(), createNetworkInspectorTool(), forceAccountTool];

To match the built-in tools' look, build your UI inside the exported OverlayPanel (a bottom-60% sheet with title, header actions, and a close button; the top 40% passes touches through to the app):

import { OverlayPanel } from "react-native-admin-tools";

render: ({ close }) => (
  <OverlayPanel title="Feature Flags" onClose={close} actions={[{ label: "Reset", onPress: resetFlags }]}>
    <FlagList />
  </OverlayPanel>
),

Scripts

• yarn typecheck — strict TS check
• yarn test — jest (pure-logic modules)
• yarn build — react-native-builder-bob (ESM + type declarations into lib/)

License

MIT