Radar Documentation

Installation

Add the Radar devtools package to your React Native project. Radar works with both bare React Native and Expo projects.

Requires React 18+, React Native 0.72+, and New Architecture enabled. Works with both bare React Native and Expo.

Step 1: Install the package

Step 2: Initialize in your app

Add the following to your app's entry point (e.g., App.tsx or index.ts):

if (__DEV__) {
  const { init } = require('radar-devtools');
  init();
}

Quick Start

Once you've installed and initialized the devtools package, connecting to Radar is automatic.

1. 1.

   Open the Radar desktop app

   Download and launch Radar on your development machine.

2. 2.

   Run your React Native app

   Start your app on a simulator, emulator, or physical device.

3. 3.

   Start debugging

   Your app will automatically connect to Radar. You'll see console logs, network requests, and more in real time.

Configuration

Radar works out of the box with zero configuration for most setups. For advanced use cases, you can customize the connection and enable additional features.

State Management

To inspect Redux, Zustand, or other stores, pass them to init() via the stores option:

import { counterStore } from './stores/counterStore';

if (__DEV__) {
  const { init } = require('radar-devtools');
  init({
    stores: { counter: counterStore },
  });
}

For Zustand, pass the store hook directly:

import { useTodoStore } from './stores/todoStore';

if (__DEV__) {
  const { init } = require('radar-devtools');
  init({
    stores: { todos: useTodoStore },
  });
}

Storage

AsyncStorage is detected automatically. For MMKV, pass your instances to init():

import { createMMKV } from 'react-native-mmkv';

const defaultStorage = createMMKV();
const settingsStorage = createMMKV({ id: 'settings' });

if (__DEV__) {
  const { init } = require('radar-devtools');
  init({
    mmkvInstances: {
      default: defaultStorage,
      settings: settingsStorage,
    },
  });
}

Startup Metrics and TTI

Radar automatically measures JS bundle eval time. To track Time To Interactive (TTI), call markInteractive() when your app's main UI is ready:

if (__DEV__) {
  const { init } = require('radar-devtools');
  init();
}

const onReady = () => {
  if (__DEV__) {
    const { markInteractive } = require('radar-devtools');
    markInteractive();
  }
};

const App = () => (
  <NavigationContainer onReady={onReady}>
    {/* ... */}
  </NavigationContainer>
);

Custom Host and Port

By default, Radar connects to localhost:8347 on iOS and 10.0.2.2:8347 on Android emulators. You can override these:

if (__DEV__) {
  const { init } = require('radar-devtools');
  init({
    host: '192.168.1.100',
    port: 8347,
  });
}

Platform Support

iOS Simulator

All features work automatically. No additional configuration needed.

Android Emulator

All features work automatically. Radar uses 10.0.2.2 to reach your host machine.

Physical Device

Physical devices require your device and development machine to be on the same Wi-Fi network. You must specify your machine's IP address via the host option.

Features

Radar provides eight debugging panels, all accessible from a unified interface.

AI Integration (MCP)

Radar includes a built-in Model Context Protocol (MCP) server that exposes all devtools data as tools for AI coding assistants. When Radar is running, your AI can read console logs, inspect network requests, browse component trees, analyze profiler data, and more.

Setup

The MCP server starts automatically when you open Radar and listens on port 8348. Pick your AI tool below and run the CLI command or add the config manually:

{
  "mcpServers": {
    "radar": {
      "url": "http://localhost:8348/mcp"
    }
  }
}

What Can You Ask?

Once connected, you can ask your AI assistant natural language questions like: