react-native-inapp-inspector 2.3.10 → 2.3.11

package/src/components/Inspector/MainScreen.tsx

@@ -29,6 +29,7 @@ import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
 import DeviceInfoTab from './DeviceInfoTab';
 import StorageTab from './StorageTab';
+import DebuggingTab from './DebuggingTab';
 import SettingsPanel from './SettingsPanel';
 import NpmUpdateToast from './NpmUpdateToast';
 import Toast from '../Toast';
@@ -170,6 +171,7 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab />}
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
+                      {activeTab === 'debugging' && <DebuggingTab />}
                     </Animated.View>
 
                     {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}

package/src/components/Inspector/SettingsPanel.tsx

@@ -56,6 +56,7 @@ import {
   BrainIcon,
   SmartphoneIcon,
   DatabaseIcon,
+  QrCodeIcon,
 } from '../NetworkIcons';
 import {LIB_VERSION} from '../../constants';
 import {copyToClipboard} from '../../helpers';
@@ -194,6 +195,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',
+    },
   ] as const;
 
   // Staged selection state for checkboxes before clicking "Save Changes"
@@ -209,6 +217,7 @@ const SettingsPanel = () => {
     crash: Boolean(tabVisibility?.crash),
     device: Boolean(tabVisibility?.device),
     storage: Boolean(tabVisibility?.storage),
+    debugging: Boolean(tabVisibility?.debugging ?? true),
   }));
 
   // Synchronize staged state with tabVisibility when tabVisibility updates
@@ -223,6 +232,7 @@ const SettingsPanel = () => {
       crash: Boolean(tabVisibility?.crash),
       device: Boolean(tabVisibility?.device),
       storage: Boolean(tabVisibility?.storage),
+      debugging: Boolean(tabVisibility?.debugging ?? true),
     });
   }, [tabVisibility]);
 
@@ -823,6 +833,16 @@ const SettingsPanel = () => {
                               size={16}
                             />
                           )}
+                          {moduleItem.icon === 'debugging' && (
+                            <QrCodeIcon
+                              color={
+                                isChecked
+                                  ? AppColors.purple
+                                  : AppColors.grayTextWeak
+                              }
+                              size={16}
+                            />
+                          )}
                         </View>
 
                         {/* Titles & Status Pill */}

package/src/components/Inspector/TabBar.tsx

@@ -14,6 +14,7 @@ import {
   CrashIcon,
   SmartphoneIcon,
   DatabaseIcon,
+  QrCodeIcon,
 } from '../NetworkIcons';
 
 import {isReduxConnected} from '../../customHooks/reduxLogger';
@@ -100,9 +101,16 @@ const TabBar = React.memo(() => {
               count: 0,
               icon: 'storage',
             },
+            {
+              key: 'debugging',
+              label: 'Debugging',
+              count: 0,
+              icon: 'debugging',
+            },
           ] as const
         )
           .filter(tab => {
+            if (tab.key === 'debugging') return true;
             if (!tabVisibility?.[tab.key]) return false;
             if (tab.key === 'redux' && !isReduxAvail) return false;
             if (tab.key === 'analytics' && !isAnalyticsAvail) return false;
@@ -169,6 +177,9 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'storage' && (
                     <DatabaseIcon color={iconColor} size={14} />
                   )}
+                  {tab.icon === 'debugging' && (
+                    <QrCodeIcon color={iconColor} size={14} />
+                  )}
                   <Text
                     numberOfLines={1}
                     ellipsizeMode="tail"

package/src/components/NetworkIcons.tsx

@@ -2246,3 +2246,42 @@ export const LockIcon = ({
   </Svg>
 );
 
+export const QrCodeIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <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/src/components/QRCodeView.tsx

@@ -0,0 +1,71 @@
+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';
+
+interface QRCodeViewProps {
+  value: string;
+  size?: number;
+  color?: string;
+  backgroundColor?: string;
+}
+
+export const QRCodeView: React.FC<QRCodeViewProps> = ({
+  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/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.10';
+export const LIB_VERSION = '2.3.11';

package/src/helpers/qrGenerator.ts

@@ -0,0 +1,184 @@
+/**
+ * Compact Pure TypeScript QR Code Matrix Generator
+ * Generates standard QR Code 2D boolean matrices for rendering with react-native-svg
+ */
+
+// Error correction levels: L (7%), M (15%), Q (25%), H (30%)
+export type QRECC = 'L' | 'M' | 'Q' | 'H';
+
+// QR Code generation helper (using compact byte-mode QR encoder)
+export function generateQRMatrix(text: string, ecc: QRECC = 'M'): boolean[][] {
+  try {
+    return createQRMatrix(text, ecc);
+  } catch {
+    // Fallback: create a structured matrix pattern if text is excessively long
+    return createFallbackMatrix(text);
+  }
+}
+
+// ─── Simple & Robust QR Code Matrix Generator Implementation ──────────────────
+
+function createQRMatrix(data: string, ecc: QRECC): boolean[][] {
+  const length = data.length;
+  // Choose minimum version based on 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: (boolean | null)[][] = Array(size)
+    .fill(null)
+    .map(() => Array(size).fill(null));
+
+  // 1. Position finder patterns (top-left, top-right, bottom-left)
+  addFinderPattern(matrix, 0, 0);
+  addFinderPattern(matrix, size - 7, 0);
+  addFinderPattern(matrix, 0, size - 7);
+
+  // 2. Timing patterns (horizontal and vertical alternating lines)
+  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;
+  }
+
+  // 3. Alignment patterns for version >= 2
+  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);
+        }
+      }
+    }
+  }
+
+  // 4. Encode data bytes into bit stream
+  const bits: boolean[] = [];
+  // Mode indicator: 0100 (8-bit byte mode)
+  bits.push(false, true, false, false);
+  // Character count indicator (8 bits for version 1-9)
+  for (let i = 7; i >= 0; i--) {
+    bits.push(((length >> i) & 1) === 1);
+  }
+  // Data bits
+  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);
+    }
+  }
+  // Terminator
+  for (let i = 0; i < 4 && bits.length % 8 !== 0; i++) {
+    bits.push(false);
+  }
+  while (bits.length % 8 !== 0) {
+    bits.push(false);
+  }
+
+  // Add padding bytes (0xEC, 0x11)
+  const padBytes = [0xec, 0x11];
+  let padIdx = 0;
+  const totalDataBits = size * size * 0.6; // approx capacity
+  while (bits.length < totalDataBits) {
+    const b = padBytes[padIdx % 2];
+    padIdx++;
+    for (let bit = 7; bit >= 0; bit--) {
+      bits.push(((b >> bit) & 1) === 1);
+    }
+  }
+
+  // 5. Place data bits in matrix (right to left, zig-zag)
+  let bitIdx = 0;
+  let upwards = true;
+  for (let col = size - 1; col > 0; col -= 2) {
+    if (col === 6) col--; // Skip vertical timing column
+    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;
+          // Apply mask pattern 0 ((row + col) % 2 === 0)
+          const mask = (row + c) % 2 === 0;
+          matrix[row][c] = bit !== mask;
+        }
+      }
+    }
+    upwards = !upwards;
+  }
+
+  // Replace remaining nulls with false
+  return matrix.map(row => row.map(cell => cell ?? false));
+}
+
+function addFinderPattern(matrix: (boolean | null)[][], row: number, col: number) {
+  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; // separator
+        }
+      }
+    }
+  }
+}
+
+function addAlignmentPattern(matrix: (boolean | null)[][], row: number, col: number) {
+  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: number): number[] {
+  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: string): boolean[][] {
+  const size = 25;
+  const matrix: boolean[][] = Array(size)
+    .fill(false)
+    .map(() => Array(size).fill(false));
+  addFinderPattern(matrix as any, 0, 0);
+  addFinderPattern(matrix as any, size - 7, 0);
+  addFinderPattern(matrix as any, 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/src/index.tsx

@@ -365,6 +365,7 @@ const NetworkInspector = ({
     crash: false,
     device: false,
     storage: false,
+    debugging: true,
   });
 
   const [maxNetworkLogs, setMaxNetworkLogs] = useState<number>(100);
@@ -427,6 +428,7 @@ const NetworkInspector = ({
       crash: false,
       device: false,
       storage: false,
+      debugging: true,
     });
     setDefaultTab('apis');
     setIsAutoRamLimitEnabled(true);

package/src/types/enums.ts

@@ -12,6 +12,7 @@ export const ActiveTab = {
   Crash: 'crash',
   Device: 'device',
   Storage: 'storage',
+  Debugging: 'debugging',
 } as const;
 export type ActiveTab = (typeof ActiveTab)[keyof typeof ActiveTab];
 
@@ -70,6 +71,7 @@ export const SettingsPage = {
   Crash: 'crash',
   Device: 'device',
   Storage: 'storage',
+  Debugging: 'debugging',
 } as const;
 export type SettingsPage =
   | (typeof SettingsPage)[keyof typeof SettingsPage]