react-native-inapp-inspector 2.3.10 → 2.3.12

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -57,6 +57,7 @@ const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
 const DeviceInfoTab_1 = __importDefault(require("./DeviceInfoTab"));
 const StorageTab_1 = __importDefault(require("./StorageTab"));
+const DebuggingTab_1 = __importDefault(require("./DebuggingTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
 const Toast_1 = __importDefault(require("../Toast"));
@@ -156,6 +157,7 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab_1.default />}
                       {activeTab === 'device' && <DeviceInfoTab_1.default />}
                       {activeTab === 'storage' && <StorageTab_1.default />}
+                      {activeTab === 'debugging' && <DebuggingTab_1.default />}
                     </react_native_1.Animated.View>
 
                     

package/dist/commonjs/components/Inspector/SettingsPanel.js

@@ -135,6 +135,13 @@ const SettingsPanel = () => {
             icon: 'storage',
             desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
         },
+        {
+            key: 'debugging',
+            label: 'Multi-Device Debugging',
+            category: 'diagnostic',
+            icon: 'debugging',
+            desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
+        },
     ];
     const [stagedTabVisibility, setStagedTabVisibility] = (0, react_1.useState)(() => ({
         apis: true,
@@ -146,6 +153,7 @@ const SettingsPanel = () => {
         crash: Boolean(tabVisibility?.crash),
         device: Boolean(tabVisibility?.device),
         storage: Boolean(tabVisibility?.storage),
+        debugging: Boolean(tabVisibility?.debugging ?? true),
     }));
     (0, react_1.useEffect)(() => {
         setStagedTabVisibility({
@@ -158,6 +166,7 @@ const SettingsPanel = () => {
             crash: Boolean(tabVisibility?.crash),
             device: Boolean(tabVisibility?.device),
             storage: Boolean(tabVisibility?.storage),
+            debugging: Boolean(tabVisibility?.debugging ?? true),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = (0, react_1.useMemo)(() => {
@@ -545,6 +554,9 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'debugging' && (<NetworkIcons_1.QrCodeIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                         </react_native_1.View>
 
                         

package/dist/commonjs/components/Inspector/TabBar.js

@@ -73,8 +73,16 @@ const TabBar = react_1.default.memo(() => {
                 count: 0,
                 icon: 'storage',
             },
+            {
+                key: 'debugging',
+                label: 'Debugging',
+                count: 0,
+                icon: 'debugging',
+            },
         ]
             .filter(tab => {
+            if (tab.key === 'debugging')
+                return true;
             if (!tabVisibility?.[tab.key])
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)
@@ -117,6 +125,7 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'debugging' && (<NetworkIcons_1.QrCodeIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -134,3 +134,4 @@ export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.El
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -899,3 +899,10 @@ const LockIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) =>
     <react_native_svg_1.Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
 exports.LockIcon = LockIcon;
+const QrCodeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Path d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z" fill={color}/>
+  </react_native_svg_1.default>);
+exports.QrCodeIcon = QrCodeIcon;

package/dist/commonjs/components/QRCodeView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface QRCodeViewProps {
+    value: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+}
+export declare const QRCodeView: React.FC<QRCodeViewProps>;
+export default QRCodeView;

package/dist/commonjs/components/QRCodeView.js

@@ -0,0 +1,82 @@
+"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.QRCodeView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const qrGenerator_1 = require("../helpers/qrGenerator");
+const AppColors_1 = require("../styles/AppColors");
+const QRCodeView = ({ value, size = 200, color = '#000000', backgroundColor = '#FFFFFF', }) => {
+    const matrix = (0, react_1.useMemo)(() => (0, qrGenerator_1.generateQRMatrix)(value || 'http://localhost:8081'), [value]);
+    const numCells = matrix.length || 21;
+    const margin = 3;
+    const totalCells = numCells + margin * 2;
+    const cellSize = size / totalCells;
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                width: size + 20,
+                height: size + 20,
+                backgroundColor,
+            },
+        ]}>
+      <react_native_svg_1.default width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <react_native_svg_1.Rect width={size} height={size} fill={backgroundColor}/>
+        <react_native_svg_1.G>
+          {matrix.map((row, r) => row.map((cell, c) => {
+            if (!cell)
+                return null;
+            return (<react_native_svg_1.Rect key={`${r}-${c}`} x={(c + margin) * cellSize} y={(r + margin) * cellSize} width={cellSize + 0.3} height={cellSize + 0.3} fill={color}/>);
+        }))}
+        </react_native_svg_1.G>
+      </react_native_svg_1.default>
+    </react_native_1.View>);
+};
+exports.QRCodeView = QRCodeView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 10,
+        borderRadius: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+});
+exports.default = exports.QRCodeView;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.10";
+export declare const LIB_VERSION = "2.3.12";

package/dist/commonjs/constants/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '2.3.10';
+exports.LIB_VERSION = '2.3.12';

package/dist/commonjs/helpers/qrGenerator.d.ts

@@ -0,0 +1,2 @@
+export type QRECC = 'L' | 'M' | 'Q' | 'H';
+export declare function generateQRMatrix(text: string, ecc?: QRECC): boolean[][];

package/dist/commonjs/helpers/qrGenerator.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateQRMatrix = generateQRMatrix;
+const qrcode_generator_1 = __importDefault(require("qrcode-generator"));
+function generateQRMatrix(text, ecc = 'M') {
+    try {
+        const qr = (0, qrcode_generator_1.default)(0, ecc);
+        qr.addData(text);
+        qr.make();
+        const count = qr.getModuleCount();
+        const matrix = [];
+        for (let row = 0; row < count; row++) {
+            const rowData = [];
+            for (let col = 0; col < count; col++) {
+                rowData.push(qr.isDark(row, col));
+            }
+            matrix.push(rowData);
+        }
+        return matrix;
+    }
+    catch (err) {
+        try {
+            const qr = (0, qrcode_generator_1.default)(10, ecc);
+            qr.addData(text);
+            qr.make();
+            const count = qr.getModuleCount();
+            const matrix = [];
+            for (let row = 0; row < count; row++) {
+                const rowData = [];
+                for (let col = 0; col < count; col++) {
+                    rowData.push(qr.isDark(row, col));
+                }
+                matrix.push(rowData);
+            }
+            return matrix;
+        }
+        catch {
+            return [];
+        }
+    }
+}

package/dist/commonjs/index.js

@@ -209,6 +209,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         crash: false,
         device: false,
         storage: false,
+        debugging: true,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(100);
     const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = (0, react_1.useState)(75);
@@ -262,6 +263,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             crash: false,
             device: false,
             storage: false,
+            debugging: true,
         });
         setDefaultTab('apis');
         setIsAutoRamLimitEnabled(true);

package/dist/commonjs/types/enums.d.ts

@@ -8,6 +8,7 @@ export declare const ActiveTab: {
     readonly Crash: "crash";
     readonly Device: "device";
     readonly Storage: "storage";
+    readonly Debugging: "debugging";
 };
 export type ActiveTab = (typeof ActiveTab)[keyof typeof ActiveTab];
 export declare const Method: {
@@ -59,6 +60,7 @@ export declare const SettingsPage: {
     readonly Crash: "crash";
     readonly Device: "device";
     readonly Storage: "storage";
+    readonly Debugging: "debugging";
 };
 export type SettingsPage = (typeof SettingsPage)[keyof typeof SettingsPage] | null;
 export declare const SettingsSubTab: {

package/dist/commonjs/types/enums.js

@@ -11,6 +11,7 @@ exports.ActiveTab = {
     Crash: 'crash',
     Device: 'device',
     Storage: 'storage',
+    Debugging: 'debugging',
 };
 exports.Method = {
     All: 'ALL',
@@ -56,6 +57,7 @@ exports.SettingsPage = {
     Crash: 'crash',
     Device: 'device',
     Storage: 'storage',
+    Debugging: 'debugging',
 };
 exports.SettingsSubTab = {
     Module: 'module',

package/dist/esm/components/Inspector/DebuggingTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DebuggingTab: React.FC;
+export default DebuggingTab;