react-native-inapp-inspector 2.3.11 → 2.3.12

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

@@ -129,6 +129,7 @@ const DebuggingTab = () => {
         probePorts();
     }, [probePorts]);
     const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+    const directServerUrl = `http://${hostIp}:${selectedPort}`;
     const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
     const devSettingsHost = `${hostIp}:${selectedPort}`;
     const currentQrValue = (0, react_1.useMemo)(() => {
@@ -136,8 +137,8 @@ const DebuggingTab = () => {
             return apkDownloadUrl;
         if (activeQrTab === 'host')
             return devSettingsHost;
-        return metroBundleUrl;
-    }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+        return directServerUrl;
+    }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
     const activePortInfo = portsStatus[selectedPort];
     return (<react_native_1.ScrollView style={styles.container} contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
       

package/dist/commonjs/components/QRCodeView.js

@@ -39,24 +39,27 @@ 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 = 180, color = AppColors_1.AppColors.primaryBlack, backgroundColor = AppColors_1.AppColors.white, }) => {
-    const matrix = (0, react_1.useMemo)(() => (0, qrGenerator_1.generateQRMatrix)(value), [value]);
-    const numCells = matrix.length;
-    const cellSize = size / numCells;
+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 + 16,
-                height: size + 16,
+                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 * cellSize} y={r * cellSize} width={cellSize + 0.2} height={cellSize + 0.2} fill={color}/>);
+            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>
@@ -65,15 +68,15 @@ const QRCodeView = ({ value, size = 180, color = AppColors_1.AppColors.primaryBl
 exports.QRCodeView = QRCodeView;
 const styles = react_native_1.StyleSheet.create({
     container: {
-        padding: 8,
+        padding: 10,
         borderRadius: 14,
         alignItems: 'center',
         justifyContent: 'center',
         shadowColor: AppColors_1.AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-        elevation: 3,
+        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.11";
+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.11';
+exports.LIB_VERSION = '2.3.12';

package/dist/commonjs/helpers/qrGenerator.js

@@ -1,170 +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 {
-        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 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);
         }
-    }
-    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;
+        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;
         }
-        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;
-                }
-            }
+        catch {
+            return [];
         }
     }
 }
-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/components/Inspector/DebuggingTab.js

@@ -90,6 +90,7 @@ export const DebuggingTab = () => {
         probePorts();
     }, [probePorts]);
     const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+    const directServerUrl = `http://${hostIp}:${selectedPort}`;
     const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
     const devSettingsHost = `${hostIp}:${selectedPort}`;
     const currentQrValue = useMemo(() => {
@@ -97,8 +98,8 @@ export const DebuggingTab = () => {
             return apkDownloadUrl;
         if (activeQrTab === 'host')
             return devSettingsHost;
-        return metroBundleUrl;
-    }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+        return directServerUrl;
+    }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
     const activePortInfo = portsStatus[selectedPort];
     return (<ScrollView style={styles.container} contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
       

package/dist/esm/components/QRCodeView.js

@@ -3,24 +3,27 @@ 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;
+export const QRCodeView = ({ value, size = 200, color = '#000000', backgroundColor = '#FFFFFF', }) => {
+    const matrix = useMemo(() => generateQRMatrix(value || 'http://localhost:8081'), [value]);
+    const numCells = matrix.length || 21;
+    const margin = 3;
+    const totalCells = numCells + margin * 2;
+    const cellSize = size / totalCells;
     return (<View style={[
             styles.container,
             {
-                width: size + 16,
-                height: size + 16,
+                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 * cellSize} y={r * cellSize} width={cellSize + 0.2} height={cellSize + 0.2} fill={color}/>);
+            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>
@@ -28,15 +31,15 @@ export const QRCodeView = ({ value, size = 180, color = AppColors.primaryBlack,
 };
 const styles = StyleSheet.create({
     container: {
-        padding: 8,
+        padding: 10,
         borderRadius: 14,
         alignItems: 'center',
         justifyContent: 'center',
         shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-        elevation: 3,
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        elevation: 4,
     },
 });
 export default QRCodeView;

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

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

package/dist/esm/constants/version.js

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

package/dist/esm/helpers/qrGenerator.js

@@ -1,167 +1,38 @@
+import qrcode from 'qrcode-generator';
 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 qr = qrcode(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);
         }
-    }
-    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;
+        return matrix;
+    }
+    catch (err) {
+        try {
+            const qr = qrcode(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;
         }
-        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;
-                }
-            }
+        catch {
+            return [];
         }
     }
 }
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "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",
@@ -174,6 +174,8 @@
     "typescript": "5.8.3"
   },
   "dependencies": {
-    "@react-native-clipboard/clipboard": "1.16.3"
+    "@react-native-clipboard/clipboard": "1.16.3",
+    "@types/qrcode-generator": "^0.0.16",
+    "qrcode-generator": "^2.0.4"
   }
 }

package/src/components/Inspector/DebuggingTab.tsx

@@ -137,14 +137,15 @@ export const DebuggingTab: React.FC = () => {
 
   // Construct target URLs for QR codes
   const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+  const directServerUrl = `http://${hostIp}:${selectedPort}`;
   const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
   const devSettingsHost = `${hostIp}:${selectedPort}`;
 
   const currentQrValue = useMemo(() => {
     if (activeQrTab === 'apk') return apkDownloadUrl;
     if (activeQrTab === 'host') return devSettingsHost;
-    return metroBundleUrl;
-  }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+    return directServerUrl;
+  }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
 
   const activePortInfo = portsStatus[selectedPort];
 

package/src/components/QRCodeView.tsx

@@ -13,25 +13,29 @@ interface QRCodeViewProps {
 
 export const QRCodeView: React.FC<QRCodeViewProps> = ({
   value,
-  size = 180,
-  color = AppColors.primaryBlack,
-  backgroundColor = AppColors.white,
+  size = 200,
+  color = '#000000',
+  backgroundColor = '#FFFFFF',
 }) => {
-  const matrix = useMemo(() => generateQRMatrix(value), [value]);
-  const numCells = matrix.length;
-  const cellSize = size / numCells;
+  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 + 16,
-          height: size + 16,
+          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) => {
@@ -39,10 +43,10 @@ export const QRCodeView: React.FC<QRCodeViewProps> = ({
               return (
                 <Rect
                   key={`${r}-${c}`}
-                  x={c * cellSize}
-                  y={r * cellSize}
-                  width={cellSize + 0.2}
-                  height={cellSize + 0.2}
+                  x={(c + margin) * cellSize}
+                  y={(r + margin) * cellSize}
+                  width={cellSize + 0.3}
+                  height={cellSize + 0.3}
                   fill={color}
                 />
               );
@@ -56,15 +60,15 @@ export const QRCodeView: React.FC<QRCodeViewProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    padding: 8,
+    padding: 10,
     borderRadius: 14,
     alignItems: 'center',
     justifyContent: 'center',
     shadowColor: AppColors.black,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 3,
+    shadowOffset: {width: 0, height: 3},
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
   },
 });
 

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.11';
+export const LIB_VERSION = '2.3.12';

package/src/helpers/qrGenerator.ts

@@ -1,184 +1,49 @@
 /**
- * Compact Pure TypeScript QR Code Matrix Generator
- * Generates standard QR Code 2D boolean matrices for rendering with react-native-svg
+ * 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';
 
-// 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);
-        }
+    // 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);
     }
-  }
 
-  // 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
+    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 [];
     }
   }
 }
-
-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;
-}