react-native-inapp-inspector 2.3.9 → 2.3.11

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/index.ts

@@ -26,6 +26,9 @@ export const METHOD_COLORS: Record<Method, string> = {
   PUT: '#D97706',     // Amber Gold
   PATCH: '#7C3AED',   // Rich Violet
   DELETE: '#DC2626',  // Crimson Red
+  QUERY: '#0284C7',   // Sky Cyan (HTTP QUERY RFC 9535)
+  OPTIONS: '#475569', // Cool Slate
+  HEAD: '#0891B2',    // Cyan
 };
 
 export const DOMAIN_COLORS: string[] = AppColors.domainColors;

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.9';
+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/styles/index.ts

@@ -575,18 +575,21 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     marginBottom: 4,
+    minHeight: 22,
   },
   cardHeaderLeft: {
     flexDirection: 'row',
     alignItems: 'center',
     flex: 1,
-    marginRight: 8,
-    gap: 6,
+    marginRight: 6,
+    gap: 5,
+    minWidth: 0,
   },
   cardHeaderRight: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 5,
+    flexShrink: 0,
   },
 
   smallCheckbox: {
@@ -673,6 +676,7 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     flexDirection: 'row',
     alignItems: 'flex-start',
     flex: 1,
+    minWidth: 0,
     gap: 6,
   },
   slugTag: {
@@ -685,6 +689,7 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     paddingVertical: 1.5,
     borderRadius: 4,
     marginTop: 1,
+    flexShrink: 0,
   },
   slugText: {
     fontFamily: AppFonts.interMedium,
@@ -697,18 +702,21 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
+    flexShrink: 0,
   },
 
   cardFooterRow: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginTop: 2,
+    marginTop: 4,
+    minHeight: 18,
   },
   cardDateRow: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 3.5,
+    flexShrink: 0,
   },
   cardDateText: {
     fontFamily: AppFonts.interRegular,
@@ -720,6 +728,7 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 5,
+    flexShrink: 0,
   },
 
   chip: {
@@ -814,9 +823,15 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingBottom: 10,
+    paddingBottom: 8,
+    gap: 8,
+  },
+  detailInfoRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    flexShrink: 0,
   },
-  detailInfoRight: {flexDirection: 'row', alignItems: 'center', gap: 6},
 
   metaContainer: {
     backgroundColor: colors.primaryLight,

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];
 
@@ -22,6 +23,9 @@ export const Method = {
   Put: 'PUT',
   Patch: 'PATCH',
   Delete: 'DELETE',
+  Query: 'QUERY',
+  Options: 'OPTIONS',
+  Head: 'HEAD',
 } as const;
 export type Method = (typeof Method)[keyof typeof Method];
 
@@ -67,6 +71,7 @@ export const SettingsPage = {
   Crash: 'crash',
   Device: 'device',
   Storage: 'storage',
+  Debugging: 'debugging',
 } as const;
 export type SettingsPage =
   | (typeof SettingsPage)[keyof typeof SettingsPage]