dreaction-react-native 1.7.2 → 1.8.0

package/README.md

@@ -0,0 +1,490 @@
+# DReaction React Native
+
+DReaction client library for React Native applications with powerful debugging tools and built-in UI components.
+
+## ✨ Features
+
+- 🟠 **Draggable Debug Ball** - Visual debug interface that can be moved anywhere on screen
+- 📜 **Logs & Network Monitoring** - Track console logs and network requests in real-time
+- 🔍 **Data Watcher** - Monitor React state changes in real-time
+- ⚡ **Custom Commands** - Execute custom debugging commands remotely
+- 📈 **Performance Monitor** - Track app performance metrics
+- 💾 **AsyncStorage Tracking** - Monitor all AsyncStorage operations
+- 🎯 **Error Tracking** - Capture unhandled errors and promise rejections
+- 📱 **Platform Agnostic** - Works on both iOS and Android
+
+## Installation
+
+```bash
+npm install dreaction-react-native @react-native-async-storage/async-storage
+# or
+yarn add dreaction-react-native @react-native-async-storage/async-storage
+# or
+pnpm add dreaction-react-native @react-native-async-storage/async-storage
+```
+
+### Prerequisites
+
+DReaction requires the DReaction desktop application to be running. Download it from:
+
+[https://github.com/moonrailgun/dreaction/releases](https://github.com/moonrailgun/dreaction/releases)
+
+## Quick Start
+
+### 1. Setup DReaction
+
+```typescript
+import { dreaction } from 'dreaction-react-native';
+
+dreaction
+  .configure({
+    host: 'YOUR_COMPUTER_IP', // e.g., '192.168.1.100'
+    port: 9600,
+    name: 'My React Native App',
+  })
+  .useReactNative() // Enable all plugins
+  .connect();
+```
+
+### 2. Add the Draggable Debug Ball
+
+The draggable ball provides quick access to connection settings and debug features:
+
+```tsx
+import { DraggableBall } from 'dreaction-react-native';
+
+export default function App() {
+  return (
+    <>
+      <YourApp />
+      {__DEV__ && <DraggableBall />}
+    </>
+  );
+}
+```
+
+The draggable ball can be moved anywhere on screen and provides:
+- Quick connection status indicator
+- Access to configuration dialog
+- One-tap connect/disconnect
+
+## Components
+
+### DraggableBall
+
+A floating button that can be dragged anywhere on the screen. Perfect for production testing and QA.
+
+```tsx
+import { DraggableBall } from 'dreaction-react-native';
+
+<DraggableBall />
+```
+
+**Features:**
+- Draggable to any position on screen
+- Visual connection status indicator
+- Opens configuration dialog on tap
+- Automatically saves position
+
+### ConfigDialog
+
+A configuration dialog for connection settings. Usually opened via DraggableBall.
+
+```tsx
+import { ConfigDialog } from 'dreaction-react-native';
+
+<ConfigDialog
+  visible={visible}
+  onClose={() => setVisible(false)}
+/>
+```
+
+## Plugins
+
+DReaction React Native comes with comprehensive built-in plugins:
+
+### 1. **Networking Plugin**
+Intercepts and monitors all network requests including fetch and XMLHttpRequest.
+
+```typescript
+dreaction.useReactNative({
+  networking: {
+    ignoreUrls: /analytics|tracking/,
+    ignoreContentTypes: /image|video/,
+  }
+});
+```
+
+### 2. **AsyncStorage Plugin**
+Tracks all AsyncStorage operations (getItem, setItem, removeItem, clear).
+
+```typescript
+dreaction.useReactNative({
+  asyncStorage: {
+    ignore: ['some-key-to-ignore']
+  }
+});
+```
+
+### 3. **Console Logs Plugin**
+Captures all console methods (log, warn, error, debug, info).
+
+### 4. **Global Errors Plugin**
+Catches unhandled errors and promise rejections with stack traces.
+
+```typescript
+dreaction.useReactNative({
+  errors: {
+    veto: (frame) => {
+      // Return true to ignore this error
+      return frame.file?.includes('node_modules');
+    }
+  }
+});
+```
+
+### 5. **DevTools Plugin**
+Enables React DevTools integration and debugging features.
+
+### 6. **Open In Editor Plugin**
+Allows opening files directly in your code editor from error stacks.
+
+## Plugin Configuration
+
+### Enable All Plugins (Recommended)
+
+```typescript
+dreaction.useReactNative(); // Uses default settings for all plugins
+```
+
+### Customize Plugin Settings
+
+```typescript
+dreaction.useReactNative({
+  // Enable/disable error tracking
+  errors: true, // or provide options
+  
+  // Enable/disable console logging
+  log: true,
+  
+  // Configure AsyncStorage monitoring
+  asyncStorage: {
+    ignore: ['IGNORED_KEY']
+  },
+  
+  // Configure network monitoring
+  networking: {
+    ignoreUrls: /analytics/,
+    ignoreContentTypes: /image/,
+  },
+  
+  // DevTools integration
+  devTools: true,
+  
+  // Open in editor support
+  openInEditor: true,
+});
+```
+
+### Disable Specific Plugins
+
+```typescript
+dreaction.useReactNative({
+  errors: false,        // Disable error tracking
+  log: false,           // Disable console logging
+  asyncStorage: false,  // Disable AsyncStorage monitoring
+  networking: false,    // Disable network monitoring
+});
+```
+
+## Data Watchers
+
+Monitor React Native state in real-time:
+
+```typescript
+import { dreaction } from 'dreaction-react-native';
+
+// Register a data watcher
+export const { useDebugDataWatch: useDebugUserInfo } = 
+  dreaction.registerDataWatcher('userInfo', 'json');
+
+// Use in your component
+function UserProfile() {
+  const [user, setUser] = useState({ name: 'John', age: 30 });
+  
+  // This will send updates to DReaction desktop app
+  useDebugUserInfo(user);
+  
+  return <Text>{user.name}</Text>;
+}
+```
+
+### Data Watch Types
+
+- `'text'` - Display as plain text
+- `'json'` - Display as formatted JSON (best for objects)
+- `'list'` - Display as a list
+
+### Example: Watching Multiple Values
+
+```typescript
+// Register multiple watchers
+const { useDebugDataWatch: useDebugCounter } = 
+  dreaction.registerDataWatcher('counter', 'text');
+
+const { useDebugDataWatch: useDebugState } = 
+  dreaction.registerDataWatcher('appState', 'json');
+
+function MyComponent() {
+  const [count, setCount] = useState(0);
+  const [state, setState] = useState({ loading: false, data: [] });
+  
+  useDebugCounter(count);
+  useDebugState(state);
+  
+  // Your component logic...
+}
+```
+
+## Custom Commands
+
+Register commands that can be triggered remotely from the DReaction desktop app:
+
+```typescript
+// Simple command
+dreaction.registerCustomCommand({
+  title: 'Clear Cache',
+  command: 'clearCache',
+  description: 'Clear all cached data',
+  handler: async () => {
+    await AsyncStorage.clear();
+    return 'Cache cleared successfully!';
+  }
+});
+
+// Command with arguments
+dreaction.registerCustomCommand({
+  title: 'Set Environment',
+  command: 'setEnv',
+  description: 'Switch environment',
+  args: [
+    {
+      name: 'environment',
+      type: 'string',
+    }
+  ],
+  handler: async (args) => {
+    console.log('Switching to:', args.environment);
+    // Switch environment logic...
+    return `Environment set to: ${args.environment}`;
+  }
+});
+
+// Command with multiple arguments
+dreaction.registerCustomCommand({
+  title: 'Mock User Login',
+  command: 'mockLogin',
+  description: 'Login as a test user',
+  args: [
+    { name: 'userId', type: 'string' },
+    { name: 'role', type: 'string' },
+  ],
+  handler: async (args) => {
+    // Mock login logic...
+    return `Logged in as ${args.userId} with role ${args.role}`;
+  }
+});
+```
+
+## Performance Monitoring
+
+DReaction automatically tracks performance metrics when connected:
+
+- JavaScript thread FPS
+- UI thread FPS
+- Memory usage
+- Bridge calls
+
+Access these metrics in real-time through the DReaction desktop app.
+
+## Connection Setup
+
+### Finding Your Computer's IP Address
+
+**macOS/Linux:**
+```bash
+ifconfig | grep "inet "
+```
+
+**Windows:**
+```bash
+ipconfig
+```
+
+Look for your local network IP (usually starts with `192.168.` or `10.`).
+
+### Example Setup
+
+```typescript
+// utils/dreaction.ts
+import { dreaction } from 'dreaction-react-native';
+
+dreaction
+  .configure({
+    host: '192.168.1.100', // Your computer's IP
+    port: 9600,            // Default DReaction port
+    info: {
+      appName: 'My App',
+      version: '1.0.0',
+    },
+  })
+  .useReactNative();
+
+export { dreaction };
+```
+
+```tsx
+// App.tsx
+import { DraggableBall } from 'dreaction-react-native';
+import './utils/dreaction'; // Initialize DReaction
+
+export default function App() {
+  return (
+    <>
+      <YourAppContent />
+      {__DEV__ && <DraggableBall />}
+    </>
+  );
+}
+```
+
+## API Reference
+
+### `dreaction.useReactNative(options?)`
+
+Enable React Native plugins with optional configuration.
+
+**Parameters:**
+- `options.errors` - Error tracking options or boolean
+- `options.log` - Enable console logging (boolean)
+- `options.asyncStorage` - AsyncStorage monitoring options or boolean
+- `options.networking` - Network monitoring options or boolean
+- `options.devTools` - Enable DevTools integration (boolean)
+- `options.openInEditor` - Enable open in editor feature (boolean)
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.configure(options)`
+
+Configure DReaction client settings.
+
+**Parameters:**
+- `options.host` - Server host (e.g., '192.168.1.100')
+- `options.port` - Server port (default: 9600)
+- `options.name` - Application name
+- `options.info` - Additional info object
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.connect()`
+
+Connect to DReaction server and activate all plugins.
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.close()`
+
+Disconnect from server and deactivate plugins.
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.registerDataWatcher(name, type, options?)`
+
+Register a data watcher for monitoring React Native state.
+
+**Parameters:**
+- `name` - Watcher identifier
+- `type` - Display type ('text' | 'json' | 'list')
+- `options.enabled` - Enable/disable watcher (default: true in development)
+
+**Returns:** Object with `useDebugDataWatch` hook
+
+### `dreaction.registerCustomCommand(config)`
+
+Register a custom command.
+
+**Parameters:**
+- `config.title` - Command title
+- `config.command` - Command identifier
+- `config.description` - Command description
+- `config.args` - Array of argument definitions
+- `config.handler` - Async handler function
+
+**Returns:** Unregister function
+
+## Best Practices
+
+1. **Only Enable in Development**
+   ```tsx
+   {__DEV__ && <DraggableBall />}
+   ```
+
+2. **Use Descriptive Watcher Names**
+   ```typescript
+   dreaction.registerDataWatcher('user-profile', 'json');
+   dreaction.registerDataWatcher('cart-items-count', 'text');
+   ```
+
+3. **Filter Sensitive Data**
+   ```typescript
+   dreaction.useReactNative({
+     asyncStorage: {
+       ignore: ['auth-token', 'user-password']
+     }
+   });
+   ```
+
+4. **Optimize Network Monitoring**
+   ```typescript
+   dreaction.useReactNative({
+     networking: {
+       ignoreUrls: /\.jpg|\.png|\.gif/,
+       ignoreContentTypes: /^image\//,
+     }
+   });
+   ```
+
+## Troubleshooting
+
+### Cannot Connect to Server
+
+1. Ensure DReaction desktop app is running
+2. Verify your computer's IP address is correct
+3. Check that your device and computer are on the same network
+4. For Android, ensure port 9600 is not blocked
+
+### Draggable Ball Not Showing
+
+1. Make sure it's only rendered in development: `{__DEV__ && <DraggableBall />}`
+2. Check that it's not hidden behind other components (it has `zIndex: 999999`)
+3. Verify DReaction is properly configured before rendering the ball
+
+### Network Requests Not Showing
+
+1. Ensure networking plugin is enabled
+2. Check if URLs are being filtered by `ignoreUrls` pattern
+3. Verify the connection is established before making requests
+
+## Example
+
+Check out the complete example in the `example/expo-app/` directory of the DReaction repository.
+
+## License
+
+MIT
+
+## Links
+
+- [GitHub Repository](https://github.com/moonrailgun/dreaction)
+- [DReaction Desktop App Releases](https://github.com/moonrailgun/dreaction/releases)
+- [Report Issues](https://github.com/moonrailgun/dreaction/issues)

package/lib/components/OverlayImage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const OverlayImage: React.FC;
+//# sourceMappingURL=OverlayImage.d.ts.map

package/lib/components/OverlayImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayImage.d.ts","sourceRoot":"","sources":["../../src/components/OverlayImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAkD/B,CAAC"}

package/lib/components/OverlayImage.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const overlay_1 = require("../plugins/overlay");
+exports.OverlayImage = react_1.default.memo(() => {
+    const [uri, setUri] = (0, react_1.useState)(null);
+    const [opacity, setOpacity] = (0, react_1.useState)(0.5);
+    (0, react_1.useEffect)(() => {
+        const handler = (payload) => {
+            setUri(payload.uri);
+            if (payload.opacity !== undefined) {
+                setOpacity(payload.opacity);
+            }
+        };
+        overlay_1.emitter.on('overlay', handler);
+        return () => {
+            overlay_1.emitter.off('overlay', handler);
+        };
+    }, []);
+    if (!uri) {
+        return null;
+    }
+    const { width, height } = react_native_1.Dimensions.get('window');
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: width,
+            height: height,
+        }, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: uri }, resizeMode: "contain", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: width,
+                height: height,
+                opacity: opacity,
+            } }) }));
+});
+exports.OverlayImage.displayName = 'OverlayImage';

package/lib/dreaction.d.ts

@@ -5,12 +5,15 @@ import { OpenInEditorOptions } from './plugins/openInEditor';
 import { TrackGlobalErrorsOptions } from './plugins/trackGlobalErrors';
 import { NetworkingOptions } from './plugins/networking';
 import { DataWatchPayload } from 'dreaction-protocol';
+import overlay from './plugins/overlay';
 export type { ClientOptions };
+export { overlay };
 export declare const reactNativeCorePlugins: any[];
 export interface UseReactNativeOptions {
     errors?: TrackGlobalErrorsOptions | boolean;
     log?: boolean;
     editor?: OpenInEditorOptions | boolean;
+    overlay?: boolean;
     asyncStorage?: AsyncStorageOptions | boolean;
     networking?: NetworkingOptions | boolean;
     devTools?: boolean;

package/lib/dreaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,wBAAwB,EAExB,SAAS,EACT,aAAa,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,YAAY,EAAE,aAAa,EAAE,CAAC;AAM9B,eAAO,MAAM,sBAAsB,OAOO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,wBAAwB,CACvD,aAAa,EACb,OAAO,sBAAsB,CAC9B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,SAAS,EAEf,yBAAyB;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;IACzC,sBAAsB,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AAkFD,eAAO,MAAM,SAAS,sBAA+C,CAAC;AAyFtE,wBAAgB,QAAQ,eAMvB"}
+{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,wBAAwB,EAExB,SAAS,EACT,aAAa,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAExC,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,OAAO,EAAE,OAAO,EAAE,CAAC;AAMnB,eAAO,MAAM,sBAAsB,OAOO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,wBAAwB,CACvD,aAAa,EACb,OAAO,sBAAsB,CAC9B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,SAAS,EAEf,yBAAyB;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;IACzC,sBAAsB,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AAkFD,eAAO,MAAM,SAAS,sBAA+C,CAAC;AA6FtE,wBAAgB,QAAQ,eAMvB"}

package/lib/dreaction.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dreaction = exports.reactNativeCorePlugins = void 0;
+exports.dreaction = exports.reactNativeCorePlugins = exports.overlay = void 0;
 exports.watchFPS = watchFPS;
 const react_native_1 = require("react-native");
 const dreaction_client_core_1 = require("dreaction-client-core");
@@ -19,6 +19,8 @@ const getReactNativePlatformConstants_1 = __importDefault(require("./helpers/get
 const react_1 = require("react");
 const getHost_1 = require("./helpers/getHost");
 const common_1 = require("./helpers/common");
+const overlay_1 = __importDefault(require("./plugins/overlay"));
+exports.overlay = overlay_1.default;
 const DREACTION_ASYNC_CLIENT_ID = '@DREACTION/clientId';
 let tempClientId = null;
 exports.reactNativeCorePlugins = [
@@ -100,6 +102,9 @@ exports.dreaction.useReactNative = (options = {}) => {
     if (options.editor !== false) {
         exports.dreaction.use((0, openInEditor_1.default)(getPluginOptions(options.editor)));
     }
+    if (options.overlay !== false) {
+        exports.dreaction.use((0, overlay_1.default)());
+    }
     if (options.asyncStorage !== false) {
         exports.dreaction.use((0, asyncStorage_1.default)(getPluginOptions(options.asyncStorage)));
     }

package/lib/index.d.ts

@@ -1,7 +1,9 @@
 export type { Command } from 'dreaction-protocol';
 import { DraggableBall } from './components/DraggableBall';
 import { Profiler } from './components/Profiler';
+import { OverlayImage } from './components/OverlayImage';
 export { DraggableBall as DReactionDraggableBall };
+export { OverlayImage as DReactionOverlayImage };
 export { Profiler as DReactionProfiler };
 export * from './dreaction';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAAE,CAAC;AACnD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,CAAC;AAEzC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAAE,CAAC;AACnD,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;AACjD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,CAAC;AAEzC,cAAc,aAAa,CAAC"}

package/lib/index.js

@@ -14,9 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DReactionProfiler = exports.DReactionDraggableBall = void 0;
+exports.DReactionProfiler = exports.DReactionOverlayImage = exports.DReactionDraggableBall = void 0;
 const DraggableBall_1 = require("./components/DraggableBall");
 Object.defineProperty(exports, "DReactionDraggableBall", { enumerable: true, get: function () { return DraggableBall_1.DraggableBall; } });
 const Profiler_1 = require("./components/Profiler");
 Object.defineProperty(exports, "DReactionProfiler", { enumerable: true, get: function () { return Profiler_1.Profiler; } });
+const OverlayImage_1 = require("./components/OverlayImage");
+Object.defineProperty(exports, "DReactionOverlayImage", { enumerable: true, get: function () { return OverlayImage_1.OverlayImage; } });
 __exportStar(require("./dreaction"), exports);

package/lib/plugins/networking.js

@@ -77,7 +77,7 @@ const networking = (pluginConfig = {}) => (dreaction) => {
             url: url || cachedRequest.xhr._url,
             method: xhr._method || null,
             data,
-            headers: xhr._headers || null,
+            headers: xhr._headers || {},
             params,
         };
         // what type of content is this?

package/lib/plugins/overlay/index.d.ts

@@ -1,3 +1,8 @@
-export default function OverlayCreator(): () => Plugin<ReactotronCore>;
-export type OverlayFeatures = ReturnType<ReturnType<typeof OverlayCreator>>["features"];
+export declare const emitter: import("mitt").Emitter<Record<import("mitt").EventType, unknown>>;
+export default function OverlayCreator(): () => {
+    /**
+     * Fires when any Reactotron message arrives.
+     */
+    onCommand: (command: import("dreaction-protocol").Command) => void;
+};
 //# sourceMappingURL=index.d.ts.map

package/lib/plugins/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/overlay/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,cAAc,iCA2BrC;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/overlay/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,mEAAS,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc;IAGhC;;OAEG;;EAQR"}

package/lib/plugins/overlay/index.js

@@ -3,26 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitter = void 0;
 exports.default = OverlayCreator;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
 const mitt_1 = __importDefault(require("mitt"));
-const overlay_1 = __importDefault(require("./overlay"));
+exports.emitter = (0, mitt_1.default)();
 function OverlayCreator() {
     return function overlay() {
-        const emitter = (0, mitt_1.default)();
         return {
             /**
              * Fires when any Reactotron message arrives.
              */
             onCommand: (command) => {
-                if (command.type !== "overlay")
+                if (command.type !== 'overlay')
                     return;
                 // relay this payload on to the emitter
-                emitter.emit("overlay", command.payload);
-            },
-            features: {
-                overlay: (WrappedComponent) => (props = {}) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(WrappedComponent, { ...props }), (0, jsx_runtime_1.jsx)(overlay_1.default, { emitter: emitter })] })),
+                exports.emitter.emit('overlay', command.payload);
             },
         };
     };

package/lib/plugins/overlay/overlay.d.ts

@@ -1,161 +1,8 @@
-import { Component } from "react";
-import { ImageResizeMode, FlexAlignType, AnimatableNumericValue } from "react-native";
-interface Props {
-    emitter: any;
-}
-interface State {
-    opacity: AnimatableNumericValue;
-    uri: string;
-    justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-    alignItems: FlexAlignType;
-    width?: number;
-    height?: number;
-    growToWindow?: boolean;
-    resizeMode?: ImageResizeMode;
-    marginLeft?: number;
-    marginRight?: number;
-    marginTop?: number;
-    marginBottom?: number;
-    showDebug?: boolean;
-}
-/** An overlay for showing an image to help with layout.
- *
- * @class FullScreenOverlay
- * @extends {Component}
- */
-declare class FullScreenOverlay extends Component<Props, State> {
-    constructor(props: Props);
-    createContainerStyle(): {
-        opacity: AnimatableNumericValue;
-        width: number;
-        height: number;
-        justifyContent: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
-        alignItems: FlexAlignType;
-        backfaceVisibility?: "visible" | "hidden" | undefined;
-        backgroundColor?: import("react-native").ColorValue | undefined;
-        borderBlockColor?: import("react-native").ColorValue | undefined;
-        borderBlockEndColor?: import("react-native").ColorValue | undefined;
-        borderBlockStartColor?: import("react-native").ColorValue | undefined;
-        borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: AnimatableNumericValue | string | undefined;
-        borderBottomLeftRadius?: AnimatableNumericValue | string | undefined;
-        borderBottomRightRadius?: AnimatableNumericValue | string | undefined;
-        borderBottomStartRadius?: AnimatableNumericValue | string | undefined;
-        borderColor?: import("react-native").ColorValue | undefined;
-        borderCurve?: "circular" | "continuous" | undefined;
-        borderEndColor?: import("react-native").ColorValue | undefined;
-        borderEndEndRadius?: AnimatableNumericValue | string | undefined;
-        borderEndStartRadius?: AnimatableNumericValue | string | undefined;
-        borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: AnimatableNumericValue | string | undefined;
-        borderRightColor?: import("react-native").ColorValue | undefined;
-        borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: AnimatableNumericValue | string | undefined;
-        borderStartStartRadius?: AnimatableNumericValue | string | undefined;
-        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-        borderTopColor?: import("react-native").ColorValue | undefined;
-        borderTopEndRadius?: AnimatableNumericValue | string | undefined;
-        borderTopLeftRadius?: AnimatableNumericValue | string | undefined;
-        borderTopRightRadius?: AnimatableNumericValue | string | undefined;
-        borderTopStartRadius?: AnimatableNumericValue | string | undefined;
-        elevation?: number | undefined;
-        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
-        isolation?: "auto" | "isolate" | undefined;
-        cursor?: import("react-native").CursorValue | undefined;
-        boxShadow?: ReadonlyArray<import("react-native").BoxShadowValue> | string | undefined;
-        filter?: ReadonlyArray<import("react-native").FilterFunction> | string | undefined;
-        alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
-        alignSelf?: "auto" | FlexAlignType | undefined;
-        aspectRatio?: number | string | undefined;
-        borderBottomWidth?: number | undefined;
-        borderEndWidth?: number | undefined;
-        borderLeftWidth?: number | undefined;
-        borderRightWidth?: number | undefined;
-        borderStartWidth?: number | undefined;
-        borderTopWidth?: number | undefined;
-        borderWidth?: number | undefined;
-        bottom?: import("react-native").DimensionValue | undefined;
-        display?: "none" | "flex" | undefined;
-        end?: import("react-native").DimensionValue | undefined;
-        flex?: number | undefined;
-        flexBasis?: import("react-native").DimensionValue | undefined;
-        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-        rowGap?: number | string | undefined;
-        gap?: number | string | undefined;
-        columnGap?: number | string | undefined;
-        flexGrow?: number | undefined;
-        flexShrink?: number | undefined;
-        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
-        left?: import("react-native").DimensionValue | undefined;
-        margin?: import("react-native").DimensionValue | undefined;
-        marginBottom?: import("react-native").DimensionValue | undefined;
-        marginEnd?: import("react-native").DimensionValue | undefined;
-        marginHorizontal?: import("react-native").DimensionValue | undefined;
-        marginLeft?: import("react-native").DimensionValue | undefined;
-        marginRight?: import("react-native").DimensionValue | undefined;
-        marginStart?: import("react-native").DimensionValue | undefined;
-        marginTop?: import("react-native").DimensionValue | undefined;
-        marginVertical?: import("react-native").DimensionValue | undefined;
-        maxHeight?: import("react-native").DimensionValue | undefined;
-        maxWidth?: import("react-native").DimensionValue | undefined;
-        minHeight?: import("react-native").DimensionValue | undefined;
-        minWidth?: import("react-native").DimensionValue | undefined;
-        overflow?: "visible" | "hidden" | "scroll" | undefined;
-        padding?: import("react-native").DimensionValue | undefined;
-        paddingBottom?: import("react-native").DimensionValue | undefined;
-        paddingEnd?: import("react-native").DimensionValue | undefined;
-        paddingHorizontal?: import("react-native").DimensionValue | undefined;
-        paddingLeft?: import("react-native").DimensionValue | undefined;
-        paddingRight?: import("react-native").DimensionValue | undefined;
-        paddingStart?: import("react-native").DimensionValue | undefined;
-        paddingTop?: import("react-native").DimensionValue | undefined;
-        paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | "static" | undefined;
-        right?: import("react-native").DimensionValue | undefined;
-        start?: import("react-native").DimensionValue | undefined;
-        top?: import("react-native").DimensionValue | undefined;
-        zIndex?: number | undefined;
-        direction?: "inherit" | "ltr" | "rtl" | undefined;
-        inset?: import("react-native").DimensionValue | undefined;
-        insetBlock?: import("react-native").DimensionValue | undefined;
-        insetBlockEnd?: import("react-native").DimensionValue | undefined;
-        insetBlockStart?: import("react-native").DimensionValue | undefined;
-        insetInline?: import("react-native").DimensionValue | undefined;
-        insetInlineEnd?: import("react-native").DimensionValue | undefined;
-        insetInlineStart?: import("react-native").DimensionValue | undefined;
-        marginBlock?: import("react-native").DimensionValue | undefined;
-        marginBlockEnd?: import("react-native").DimensionValue | undefined;
-        marginBlockStart?: import("react-native").DimensionValue | undefined;
-        marginInline?: import("react-native").DimensionValue | undefined;
-        marginInlineEnd?: import("react-native").DimensionValue | undefined;
-        marginInlineStart?: import("react-native").DimensionValue | undefined;
-        paddingBlock?: import("react-native").DimensionValue | undefined;
-        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
-        paddingBlockStart?: import("react-native").DimensionValue | undefined;
-        paddingInline?: import("react-native").DimensionValue | undefined;
-        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
-        paddingInlineStart?: import("react-native").DimensionValue | undefined;
-        shadowColor?: import("react-native").ColorValue | undefined;
-        shadowOffset?: Readonly<{
-            width: number;
-            height: number;
-        }> | undefined;
-        shadowOpacity?: AnimatableNumericValue | undefined;
-        shadowRadius?: number | undefined;
-        transform?: Readonly<import("react-native").MaximumOneOf<import("react-native").PerspectiveTransform & import("react-native").RotateTransform & import("react-native").RotateXTransform & import("react-native").RotateYTransform & import("react-native").RotateZTransform & import("react-native").ScaleTransform & import("react-native").ScaleXTransform & import("react-native").ScaleYTransform & import("react-native").TranslateXTransform & import("react-native").TranslateYTransform & import("react-native").SkewXTransform & import("react-native").SkewYTransform & import("react-native").MatrixTransform>[]> | string | undefined;
-        transformOrigin?: Array<string | number> | string | undefined;
-        transformMatrix?: Array<number> | undefined;
-        rotation?: AnimatableNumericValue | undefined;
-        scaleX?: AnimatableNumericValue | undefined;
-        scaleY?: AnimatableNumericValue | undefined;
-        translateX?: AnimatableNumericValue | undefined;
-        translateY?: AnimatableNumericValue | undefined;
-    };
-    renderDebug(): import("react/jsx-runtime").JSX.Element | null;
+export declare const emitter: import("mitt").Emitter<Record<import("mitt").EventType, unknown>>;
+export default function OverlayCreator(): () => {
     /**
-     * Draw.
+     * Fires when any Reactotron message arrives.
      */
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default FullScreenOverlay;
+    onCommand: (command: import("dreaction-protocol").Command) => void;
+};
 //# sourceMappingURL=overlay.d.ts.map

package/lib/plugins/overlay/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/plugins/overlay/overlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAIL,eAAe,EACf,aAAa,EAIb,sBAAsB,EACvB,MAAM,cAAc,CAAA;AAwCrB,UAAU,KAAK;IACb,OAAO,EAAE,GAAG,CAAA;CACb;AAED,UAAU,KAAK;IACb,OAAO,EAAE,sBAAsB,CAAA;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,cAAc,EACV,YAAY,GACZ,UAAU,GACV,QAAQ,GACR,eAAe,GACf,cAAc,GACd,cAAc,CAAA;IAClB,UAAU,EAAE,aAAa,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;GAIG;AACH,cAAM,iBAAkB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACzC,KAAK,EAAE,KAAK;IAgBxB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAepB,WAAW;IAyBX;;OAEG;IACH,MAAM;CAiCP;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/plugins/overlay/overlay.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,mEAAS,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc;IAGhC;;OAEG;;EAQR"}

package/lib/plugins/overlay/overlay.js

@@ -1,99 +1,24 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const Styles = {
-    container: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 1000,
-        opacity: 0.25,
-    },
-    debugContainer: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "transparent",
-        zIndex: 2000,
-    },
-    debugTextContainer: {
-        backgroundColor: "lightgray",
-        margin: 50,
-        padding: 20,
-    },
-    debugText: {
-        color: "red",
-        fontSize: 16,
-        marginBottom: 10,
-    },
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-/** An overlay for showing an image to help with layout.
- *
- * @class FullScreenOverlay
- * @extends {Component}
- */
-class FullScreenOverlay extends react_1.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            opacity: Styles.container.opacity,
-            uri: null,
-            justifyContent: "center",
-            alignItems: "center",
-        };
-        // when the server sends stuff
-        props.emitter.on("overlay", (payload) => {
-            this.setState({ ...this.state, ...payload });
-        });
-    }
-    createContainerStyle() {
-        const { opacity, justifyContent, alignItems } = this.state;
-        const { width, height } = react_native_1.Dimensions.get("window");
-        const containerStyle = {
-            ...Styles.container,
-            opacity,
-            width,
-            height,
-            justifyContent,
-            alignItems,
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitter = void 0;
+exports.default = OverlayCreator;
+const mitt_1 = __importDefault(require("mitt"));
+exports.emitter = (0, mitt_1.default)();
+function OverlayCreator() {
+    return function overlay() {
+        return {
+            /**
+             * Fires when any Reactotron message arrives.
+             */
+            onCommand: (command) => {
+                if (command.type !== 'overlay')
+                    return;
+                // relay this payload on to the emitter
+                exports.emitter.emit('overlay', command.payload);
+            },
         };
-        return containerStyle;
-    }
-    renderDebug() {
-        const { showDebug } = this.state;
-        // If Reactotron is configured properly it should be disabled in production.
-        // We'll throw a __DEV__ check in here just in case it get's feisty.
-        if (!__DEV__ || !showDebug)
-            return null;
-        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: Styles.debugContainer, pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: Styles.debugTextContainer, children: Object.keys(this.state).map((key) => {
-                    if (key === "showDebug")
-                        return null;
-                    const keyName = key === "uri" ? "have image" : key;
-                    const value = key === "uri" ? !!this.state[key] : this.state[key];
-                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: Styles.debugText, children: `${keyName}: ${value}` }, key));
-                }) }) }));
-    }
-    /**
-     * Draw.
-     */
-    render() {
-        const { uri, width, height, growToWindow, resizeMode, marginLeft = 0, marginRight = 0, marginTop = 0, marginBottom = 0, } = this.state;
-        const imageStyle = { width, height, marginTop, marginRight, marginBottom, marginLeft };
-        if (growToWindow) {
-            const windowSize = react_native_1.Dimensions.get("window");
-            imageStyle.width = windowSize.width;
-            imageStyle.height = windowSize.height;
-        }
-        const image = uri ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri }, style: imageStyle, resizeMode: growToWindow ? resizeMode : null })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, {}));
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: this.createContainerStyle(), pointerEvents: "none", children: image }), this.renderDebug()] }));
-    }
+    };
 }
-exports.default = FullScreenOverlay;

package/lib/plugins/overlay.d.ts

@@ -0,0 +1,8 @@
+export declare const emitter: import("mitt").Emitter<Record<import("mitt").EventType, unknown>>;
+export default function OverlayCreator(): () => {
+    /**
+     * Fires when any Reactotron message arrives.
+     */
+    onCommand: (command: import("dreaction-protocol").Command) => void;
+};
+//# sourceMappingURL=overlay.d.ts.map

package/lib/plugins/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/plugins/overlay.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,mEAAS,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc;IAGhC;;OAEG;;EAWR"}

package/lib/plugins/overlay.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitter = void 0;
+exports.default = OverlayCreator;
+const mitt_1 = __importDefault(require("mitt"));
+exports.emitter = (0, mitt_1.default)();
+function OverlayCreator() {
+    return function overlay() {
+        return {
+            /**
+             * Fires when any Reactotron message arrives.
+             */
+            onCommand: (command) => {
+                if (command.type !== 'overlay') {
+                    return;
+                }
+                // relay this payload on to the emitter
+                exports.emitter.emit('overlay', command.payload);
+            },
+        };
+    };
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "dreaction-react-native",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "private": false,
-  "description": "",
+  "description": "DReaction client for React Native applications with draggable debug ball and powerful debugging tools",
   "main": "lib/index.js",
   "files": [
     "assets",
@@ -10,13 +10,30 @@
     "src"
   ],
   "keywords": [
-    "dreaction"
+    "dreaction",
+    "react-native",
+    "debug",
+    "debugger",
+    "monitoring",
+    "logging",
+    "network",
+    "performance"
   ],
   "author": "moonrailgun <moonrailgun@gmail.com>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moonrailgun/dreaction.git",
+    "directory": "packages/dreaction-react-native"
+  },
+  "bugs": {
+    "url": "https://github.com/moonrailgun/dreaction/issues"
+  },
+  "homepage": "https://github.com/moonrailgun/dreaction#readme",
   "dependencies": {
-    "dreaction-client-core": "1.2.0",
-    "dreaction-protocol": "1.0.8"
+    "mitt": "^3.0.1",
+    "dreaction-client-core": "1.2.1",
+    "dreaction-protocol": "1.0.9"
   },
   "devDependencies": {
     "@react-native-async-storage/async-storage": "^2.1.0",

package/src/components/OverlayImage.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { Image, Dimensions, View } from 'react-native';
+import { emitter } from '../plugins/overlay';
+
+export const OverlayImage: React.FC = React.memo(() => {
+  const [uri, setUri] = useState<string | null>(null);
+  const [opacity, setOpacity] = useState(0.5);
+
+  useEffect(() => {
+    const handler = (payload: any) => {
+      setUri(payload.uri);
+      if (payload.opacity !== undefined) {
+        setOpacity(payload.opacity);
+      }
+    };
+
+    emitter.on('overlay', handler);
+
+    return () => {
+      emitter.off('overlay', handler);
+    };
+  }, []);
+
+  if (!uri) {
+    return null;
+  }
+
+  const { width, height } = Dimensions.get('window');
+
+  return (
+    <View
+      pointerEvents="none"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: width,
+        height: height,
+      }}
+    >
+      <Image
+        source={{ uri: uri }}
+        resizeMode="contain"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: width,
+          height: height,
+          opacity: opacity,
+        }}
+      />
+    </View>
+  );
+});
+OverlayImage.displayName = 'OverlayImage';

package/src/dreaction.ts

@@ -23,9 +23,12 @@ import { DataWatchPayload } from 'dreaction-protocol';
 import { useEffect } from 'react';
 import { getHost } from './helpers/getHost';
 import { isDev } from './helpers/common';
+import overlay from './plugins/overlay';
 
 export type { ClientOptions };
 
+export { overlay };
+
 const DREACTION_ASYNC_CLIENT_ID = '@DREACTION/clientId';
 
 let tempClientId: string | null = null;
@@ -43,6 +46,7 @@ export interface UseReactNativeOptions {
   errors?: TrackGlobalErrorsOptions | boolean;
   log?: boolean;
   editor?: OpenInEditorOptions | boolean;
+  overlay?: boolean;
   asyncStorage?: AsyncStorageOptions | boolean;
   networking?: NetworkingOptions | boolean;
   devTools?: boolean;
@@ -177,6 +181,10 @@ dreaction.useReactNative = (options: UseReactNativeOptions = {}) => {
     dreaction.use(openInEditor(getPluginOptions(options.editor as any)));
   }
 
+  if (options.overlay !== false) {
+    dreaction.use(overlay());
+  }
+
   if (options.asyncStorage !== false) {
     dreaction.use(
       asyncStorage(getPluginOptions(options.asyncStorage) as any) as any

package/src/index.ts

@@ -1,8 +1,10 @@
 export type { Command } from 'dreaction-protocol';
 import { DraggableBall } from './components/DraggableBall';
 import { Profiler } from './components/Profiler';
+import { OverlayImage } from './components/OverlayImage';
 
 export { DraggableBall as DReactionDraggableBall };
+export { OverlayImage as DReactionOverlayImage };
 export { Profiler as DReactionProfiler };
 
 export * from './dreaction';

package/src/plugins/networking.ts

@@ -105,7 +105,7 @@ const networking =
         url: url || cachedRequest.xhr._url,
         method: xhr._method || null,
         data,
-        headers: xhr._headers || null,
+        headers: xhr._headers || {},
         params,
       };
 

package/src/plugins/overlay.ts

@@ -0,0 +1,22 @@
+import mitt from 'mitt';
+import type { DReactionCore, Plugin } from 'dreaction-client-core';
+
+export const emitter = mitt();
+
+export default function OverlayCreator() {
+  return function overlay() {
+    return {
+      /**
+       * Fires when any Reactotron message arrives.
+       */
+      onCommand: (command) => {
+        if (command.type !== 'overlay') {
+          return;
+        }
+
+        // relay this payload on to the emitter
+        emitter.emit('overlay', command.payload);
+      },
+    } satisfies Plugin<DReactionCore>;
+  };
+}