react-native-inapp-inspector 2.3.10 → 2.3.12

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,75 @@
+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 = 200,
+  color = '#000000',
+  backgroundColor = '#FFFFFF',
+}) => {
+  const matrix = useMemo(() => generateQRMatrix(value || 'http://localhost:8081'), [value]);
+  const numCells = matrix.length || 21;
+  // Add a 3-module quiet zone (white border) required by QR scanners
+  const margin = 3;
+  const totalCells = numCells + margin * 2;
+  const cellSize = size / totalCells;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size + 20,
+          height: size + 20,
+          backgroundColor,
+        },
+      ]}>
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Rect width={size} height={size} fill={backgroundColor} />
+        <G>
+          {matrix.map((row, r) =>
+            row.map((cell, c) => {
+              if (!cell) return null;
+              return (
+                <Rect
+                  key={`${r}-${c}`}
+                  x={(c + margin) * cellSize}
+                  y={(r + margin) * cellSize}
+                  width={cellSize + 0.3}
+                  height={cellSize + 0.3}
+                  fill={color}
+                />
+              );
+            }),
+          )}
+        </G>
+      </Svg>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: 3},
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+});
+
+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.12';

package/src/helpers/qrGenerator.ts

@@ -0,0 +1,49 @@
+/**
+ * ISO/IEC 18004 Standard QR Code Matrix Generator
+ * Uses industry-standard qrcode-generator with full Reed-Solomon Error Correction
+ * and BCH format encoding for 100% instant phone camera / Google Lens recognition.
+ */
+import qrcode from 'qrcode-generator';
+
+export type QRECC = 'L' | 'M' | 'Q' | 'H';
+
+export function generateQRMatrix(text: string, ecc: QRECC = 'M'): boolean[][] {
+  try {
+    // Type 0 = auto detect smallest valid QR version
+    const qr = qrcode(0, ecc);
+    qr.addData(text);
+    qr.make();
+
+    const count = qr.getModuleCount();
+    const matrix: boolean[][] = [];
+
+    for (let row = 0; row < count; row++) {
+      const rowData: boolean[] = [];
+      for (let col = 0; col < count; col++) {
+        rowData.push(qr.isDark(row, col));
+      }
+      matrix.push(rowData);
+    }
+
+    return matrix;
+  } catch (err) {
+    // Fallback: higher version if auto-detect fails
+    try {
+      const qr = qrcode(10, ecc);
+      qr.addData(text);
+      qr.make();
+      const count = qr.getModuleCount();
+      const matrix: boolean[][] = [];
+      for (let row = 0; row < count; row++) {
+        const rowData: boolean[] = [];
+        for (let col = 0; col < count; col++) {
+          rowData.push(qr.isDark(row, col));
+        }
+        matrix.push(rowData);
+      }
+      return matrix;
+    } catch {
+      return [];
+    }
+  }
+}

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]