@rn-dev-inspector/core

Core inspector components for React Native Dev Inspector.

Note: This is an internal package. For most use cases, install react-native-dev-inspector instead.

Installation

npm install @rn-dev-inspector/core

What's Included

This package provides the core inspector functionality:

• Inspector - Main wrapper component that enables element inspection
• InspectorDevMenu - Floating button to toggle inspector
• InspectorButton - Inline button component for custom UIs
• useInspector - Hook to access inspector state and controls
• toggleInspectorGlobal - Global function to toggle inspector from anywhere

Usage

import {
  Inspector,
  InspectorDevMenu,
  useInspector
} from '@rn-dev-inspector/core';

export default function App() {
  return (
    <Inspector editor="code">
      <YourApp />
      <InspectorDevMenu position="bottom-right" />
    </Inspector>
  );
}

API

<Inspector> Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | disabled | boolean | false | Disable inspector entirely | | editor | string | auto | Editor command (code, cursor, webstorm, etc.) | | devServerUrl | string | auto | Metro dev server URL | | addToDevMenu | boolean | true | Add toggle to RN dev menu | | onInspectorEnabled | () => void | - | Callback when enabled | | onInspectorDisabled | () => void | - | Callback when disabled | | onElementSelected | (info) => void | - | Callback when element selected | | onElementTapped | (info) => void | - | Callback before opening editor |

<InspectorDevMenu> Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'bottom-right' | Button position | | compact | boolean | false | Use smaller button size | | showOnlyWhenInactive | boolean | false | Hide when inspector active | | containerStyle | ViewStyle | - | Custom container styles |

useInspector() Hook

const {
  isInspecting,     // boolean
  enableInspector,  // () => void
  disableInspector, // () => void
  toggleInspector,  // () => void
} = useInspector();

How It Works

The inspector uses React Native's internal getInspectorDataForViewAtPoint API to:

1. Capture touch events on the screen
2. Find the element at the touch point
3. Traverse the React fiber tree to build component hierarchy
4. Extract source locations from:
   • _debugSource (React's built-in debug info)
   • __callerSource prop (injected by optional babel plugin for precise tracking)
5. Display an inspector panel with hierarchy, styles, and box model

Enhanced Source Tracking

When used with the babel plugin from @rn-dev-inspector/metro-plugin, the inspector receives precise source location information via the __callerSource prop injected into each JSX element. This provides more accurate "Open in Editor" functionality compared to relying solely on React's _debugSource.

Requirements

• React Native 0.68+
• React 17+
• Development mode (__DEV__ must be true)

License

MIT