react-native-inapp-inspector 2.3.10 → 2.3.11

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

@@ -4,7 +4,7 @@ import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 const TabBar = React.memo(() => {
@@ -68,8 +68,16 @@ const TabBar = React.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)
@@ -112,6 +120,7 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'debugging' && (<QrCodeIcon color={iconColor} size={14}/>)}
                   <Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles.contentTabButtonText,
                     isActive &&

package/dist/esm/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/esm/components/NetworkIcons.js

@@ -734,3 +734,9 @@ export const LockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Sv
     <Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+export const QrCodeIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <Path d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z" fill={color}/>
+  </Svg>);

package/dist/esm/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/esm/components/QRCodeView.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Rect, G } from 'react-native-svg';
+import { generateQRMatrix } from '../helpers/qrGenerator';
+import { AppColors } from '../styles/AppColors';
+export const QRCodeView = ({ value, size = 180, color = AppColors.primaryBlack, backgroundColor = AppColors.white, }) => {
+    const matrix = useMemo(() => generateQRMatrix(value), [value]);
+    const numCells = matrix.length;
+    const cellSize = size / numCells;
+    return (<View style={[
+            styles.container,
+            {
+                width: size + 16,
+                height: size + 16,
+                backgroundColor,
+            },
+        ]}>
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <G>
+          {matrix.map((row, r) => row.map((cell, c) => {
+            if (!cell)
+                return null;
+            return (<Rect key={`${r}-${c}`} x={c * cellSize} y={r * cellSize} width={cellSize + 0.2} height={cellSize + 0.2} fill={color}/>);
+        }))}
+        </G>
+      </Svg>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        padding: 8,
+        borderRadius: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        elevation: 3,
+    },
+});
+export default QRCodeView;

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

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

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.10';
+export const LIB_VERSION = '2.3.11';

package/dist/esm/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/esm/helpers/qrGenerator.js

@@ -0,0 +1,167 @@
+export function generateQRMatrix(text, ecc = 'M') {
+    try {
+        return createQRMatrix(text, ecc);
+    }
+    catch {
+        return createFallbackMatrix(text);
+    }
+}
+function createQRMatrix(data, ecc) {
+    const length = data.length;
+    let version = 1;
+    if (length > 14)
+        version = 2;
+    if (length > 26)
+        version = 3;
+    if (length > 42)
+        version = 4;
+    if (length > 62)
+        version = 5;
+    if (length > 84)
+        version = 6;
+    if (length > 106)
+        version = 7;
+    if (length > 122)
+        version = 8;
+    if (length > 152)
+        version = 9;
+    if (length > 180)
+        version = 10;
+    const size = version * 4 + 17;
+    const matrix = Array(size)
+        .fill(null)
+        .map(() => Array(size).fill(null));
+    addFinderPattern(matrix, 0, 0);
+    addFinderPattern(matrix, size - 7, 0);
+    addFinderPattern(matrix, 0, size - 7);
+    for (let i = 8; i < size - 8; i++) {
+        const val = i % 2 === 0;
+        if (matrix[6][i] === null)
+            matrix[6][i] = val;
+        if (matrix[i][6] === null)
+            matrix[i][6] = val;
+    }
+    if (version >= 2) {
+        const pos = getAlignmentPositions(version);
+        for (const r of pos) {
+            for (const c of pos) {
+                if (matrix[r][c] === null) {
+                    addAlignmentPattern(matrix, r - 2, c - 2);
+                }
+            }
+        }
+    }
+    const bits = [];
+    bits.push(false, true, false, false);
+    for (let i = 7; i >= 0; i--) {
+        bits.push(((length >> i) & 1) === 1);
+    }
+    for (let i = 0; i < length; i++) {
+        const code = data.charCodeAt(i);
+        for (let b = 7; b >= 0; b--) {
+            bits.push(((code >> b) & 1) === 1);
+        }
+    }
+    for (let i = 0; i < 4 && bits.length % 8 !== 0; i++) {
+        bits.push(false);
+    }
+    while (bits.length % 8 !== 0) {
+        bits.push(false);
+    }
+    const padBytes = [0xec, 0x11];
+    let padIdx = 0;
+    const totalDataBits = size * size * 0.6;
+    while (bits.length < totalDataBits) {
+        const b = padBytes[padIdx % 2];
+        padIdx++;
+        for (let bit = 7; bit >= 0; bit--) {
+            bits.push(((b >> bit) & 1) === 1);
+        }
+    }
+    let bitIdx = 0;
+    let upwards = true;
+    for (let col = size - 1; col > 0; col -= 2) {
+        if (col === 6)
+            col--;
+        const rows = upwards
+            ? Array.from({ length: size }, (_, i) => size - 1 - i)
+            : Array.from({ length: size }, (_, i) => i);
+        for (const row of rows) {
+            for (const c of [col, col - 1]) {
+                if (matrix[row][c] === null) {
+                    const bit = bitIdx < bits.length ? bits[bitIdx++] : false;
+                    const mask = (row + c) % 2 === 0;
+                    matrix[row][c] = bit !== mask;
+                }
+            }
+        }
+        upwards = !upwards;
+    }
+    return matrix.map(row => row.map(cell => cell ?? false));
+}
+function addFinderPattern(matrix, row, col) {
+    for (let r = -1; r <= 7; r++) {
+        for (let c = -1; c <= 7; c++) {
+            const mr = row + r;
+            const mc = col + c;
+            if (mr >= 0 && mr < matrix.length && mc >= 0 && mc < matrix.length) {
+                if ((r >= 0 && r <= 6 && (c === 0 || c === 6)) ||
+                    (c >= 0 && c <= 6 && (r === 0 || r === 6)) ||
+                    (r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
+                    matrix[mr][mc] = true;
+                }
+                else if (r >= 0 && r <= 6 && c >= 0 && c <= 6) {
+                    matrix[mr][mc] = false;
+                }
+                else {
+                    matrix[mr][mc] = false;
+                }
+            }
+        }
+    }
+}
+function addAlignmentPattern(matrix, row, col) {
+    for (let r = 0; r < 5; r++) {
+        for (let c = 0; c < 5; c++) {
+            const isOuter = r === 0 || r === 4 || c === 0 || c === 4;
+            const isCenter = r === 2 && c === 2;
+            matrix[row + r][col + c] = isOuter || isCenter;
+        }
+    }
+}
+function getAlignmentPositions(version) {
+    if (version === 1)
+        return [];
+    if (version === 2)
+        return [6, 18];
+    if (version === 3)
+        return [6, 22];
+    if (version === 4)
+        return [6, 26];
+    if (version === 5)
+        return [6, 30];
+    if (version === 6)
+        return [6, 34];
+    if (version === 7)
+        return [6, 22, 38];
+    if (version === 8)
+        return [6, 24, 42];
+    if (version === 9)
+        return [6, 26, 46];
+    return [6, 28, 50];
+}
+function createFallbackMatrix(text) {
+    const size = 25;
+    const matrix = Array(size)
+        .fill(false)
+        .map(() => Array(size).fill(false));
+    addFinderPattern(matrix, 0, 0);
+    addFinderPattern(matrix, size - 7, 0);
+    addFinderPattern(matrix, 0, size - 7);
+    for (let i = 0; i < text.length; i++) {
+        const r = (i * 3) % (size - 10) + 8;
+        const c = (i * 7) % (size - 10) + 8;
+        matrix[r][c] = true;
+    }
+    return matrix;
+}

package/dist/esm/index.js

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

package/dist/esm/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/esm/types/enums.js

@@ -8,6 +8,7 @@ export const ActiveTab = {
     Crash: 'crash',
     Device: 'device',
     Storage: 'storage',
+    Debugging: 'debugging',
 };
 export const Method = {
     All: 'ALL',
@@ -53,6 +54,7 @@ export const SettingsPage = {
     Crash: 'crash',
     Device: 'device',
     Storage: 'storage',
+    Debugging: 'debugging',
 };
 export const SettingsSubTab = {
     Module: 'module',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.10",
+  "version": "2.3.11",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",