dreaction-react-native 1.7.3 → 1.8.0

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/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,6 +1,6 @@
 {
   "name": "dreaction-react-native",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "private": false,
   "description": "DReaction client for React Native applications with draggable debug ball and powerful debugging tools",
   "main": "lib/index.js",
@@ -31,8 +31,9 @@
   },
   "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/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>;
+  };
+}