react-native-ui-inspector

React Native bridge for QA Mobile UI Inspector - enables UI element inspection in development builds.

Features

• 🔍 Inspect any UI element in your React Native app
• 📱 Works with iOS and Android
• 🎨 View all style properties (layout, typography, colors, etc.)
• 🔌 Connects to desktop inspector app via WebSocket
• 🚀 Automatic device discovery via mDNS
• 🔒 Automatically disabled in production builds
• ⚡ Zero performance impact in production

Installation

npm install react-native-ui-inspector
# or
yarn add react-native-ui-inspector

Additional Dependencies

npm install react-native-zeroconf
# or
yarn add react-native-zeroconf

For iOS, install pods:

cd ios && pod install && cd ..

Usage

Method 1: Wrap Your App (Recommended)

Add just 2 lines to your App.js:

import React from 'react';
import { View, Text } from 'react-native';
import UIInspectorBridge from 'react-native-ui-inspector'; // Line 1

export default function App() {
  return (
    <UIInspectorBridge> {/* Line 2 - Opening tag */}
      <View style={{ flex: 1 }}>
        <Text>Your App Content</Text>
      </View>
    </UIInspectorBridge> {/* Line 2 - Closing tag */}
  );
}

Method 2: Higher-Order Component

import React from 'react';
import { View, Text } from 'react-native';
import { withUIInspector } from 'react-native-ui-inspector'; // Line 1

function App() {
  return (
    <View style={{ flex: 1 }}>
      <Text>Your App Content</Text>
    </View>
  );
}

export default withUIInspector(App); // Line 2

Configuration Options

<UIInspectorBridge
  appName="MyAwesomeApp"          // Custom app name
  deviceName="My Test Device"      // Custom device name
  port={9876}                      // Custom port (default: 9876)
>
  {/* Your app */}
</UIInspectorBridge>

How It Works

1. Development Only: The bridge only activates when __DEV__ is true
2. Device Discovery: Broadcasts device info via mDNS for automatic discovery
3. WebSocket Server: Opens a local WebSocket server for communication
4. Element Interception: Wraps elements to capture touch events
5. Style Extraction: Extracts and formats all style properties
6. Data Transmission: Sends element data to connected desktop inspector

Production Safety

The inspector bridge is completely inactive in production builds:

• No WebSocket server started
• No mDNS broadcasting
• No touch event interception
• Zero performance overhead
• Your app renders exactly as normal

This happens automatically based on React Native's __DEV__ flag.

Requirements

• React Native >= 0.60
• iOS 10.0+ or Android 5.0+
• Development mode enabled

Desktop App

This package works with the QA Mobile UI Inspector Desktop App. Download the desktop app to connect to your device and inspect UI elements:

• Download for Windows (.exe)
• Download for Mac (.dmg)
• Download for Linux (.AppImage)

Troubleshooting

Device not showing in desktop app

• Ensure your phone and computer are on the same WiFi network
• Check firewall settings (allow port 9876)
• Make sure the app is running in development mode

Connection failed

• Verify both devices are on the same network
• Check if port 9876 is available (not used by another app)
• Restart the React Native bundler

No element data showing

• Confirm the bridge is initialized (check console logs)
• Ensure you wrapped your app correctly
• Check that DEV is true (development mode)

License

MIT

Support

For issues, please visit: https://github.com/qa-tools/mobile-ui-inspector/issues