npm - @switchlabs/verify-ai-react-native - Versions diffs - 0.1.1 → 0.1.2 - Mend

@switchlabs/verify-ai-react-native 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/lib/client/index.js +2 -7
package/lib/components/VerifyAIScanner.js +149 -79
package/lib/hooks/useVerifyAI.js +17 -20
package/lib/index.js +2 -8
package/lib/storage/offlineQueue.js +19 -26
package/lib/types/index.js +1 -2
package/package.json +1 -1
package/src/components/VerifyAIScanner.tsx +203 -94

package/lib/client/index.js CHANGED Viewed

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyAIRequestError = exports.VerifyAIClient = void 0;
 const DEFAULT_BASE_URL = 'https://verify.switchlabs.dev/api/v1';
 const DEFAULT_TIMEOUT = 30000;
-class VerifyAIClient {
+export class VerifyAIClient {
     constructor(config) {
         if (!config.apiKey) {
             throw new Error('VerifyAI: apiKey is required');
@@ -108,8 +105,7 @@ class VerifyAIClient {
         return this.request(`/verifications/${id}`);
     }
 }
-exports.VerifyAIClient = VerifyAIClient;
-class VerifyAIRequestError extends Error {
+export class VerifyAIRequestError extends Error {
     constructor(message, status, body) {
         super(message);
         this.name = 'VerifyAIRequestError';
@@ -126,4 +122,3 @@ class VerifyAIRequestError extends Error {
         return this.body.upgrade_url;
     }
 }
-exports.VerifyAIRequestError = VerifyAIRequestError;

package/lib/components/VerifyAIScanner.js CHANGED Viewed

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyAIScanner = VerifyAIScanner;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const expo_camera_1 = require("expo-camera");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, } from 'react-native';
+import { CameraView, useCameraPermissions, } from 'expo-camera';
 /**
  * Camera scanner component for capturing verification photos.
  * Uses expo-camera for the camera view and provides a simple capture UI.
@@ -26,12 +23,12 @@ const expo_camera_1 = require("expo-camera");
  * />
  * ```
  */
-function VerifyAIScanner({ onCapture, onResult, onError, overlay, style, showCaptureButton = true, captureRef, }) {
-    const cameraRef = (0, react_1.useRef)(null);
-    const [status, setStatus] = (0, react_1.useState)('idle');
-    const [result, setResult] = (0, react_1.useState)(null);
-    const [permission, requestPermission] = (0, expo_camera_1.useCameraPermissions)();
-    const handleCapture = (0, react_1.useCallback)(async () => {
+export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style, showCaptureButton = true, captureRef, }) {
+    const cameraRef = useRef(null);
+    const [status, setStatus] = useState('idle');
+    const [result, setResult] = useState(null);
+    const [permission, requestPermission] = useCameraPermissions();
+    const handleCapture = useCallback(async () => {
         if (!cameraRef.current || status === 'capturing' || status === 'processing')
             return;
         setStatus('capturing');
@@ -71,25 +68,33 @@ function VerifyAIScanner({ onCapture, onResult, onError, overlay, style, showCap
         captureRef.current = handleCapture;
     }
     if (!permission) {
-        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style] });
+        return _jsx(View, { style: [styles.container, style] });
     }
     if (!permission.granted) {
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, styles.permissionContainer, style], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.permissionText, children: "Camera access is required for photo verification" }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.permissionButton, onPress: requestPermission, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.permissionButtonText, children: "Grant Camera Access" }) })] }));
+        return (_jsxs(View, { style: [styles.container, styles.permissionContainer, style], children: [_jsx(Text, { style: styles.permissionText, children: "Camera access is required for photo verification" }), _jsx(TouchableOpacity, { style: styles.permissionButton, onPress: requestPermission, children: _jsx(Text, { style: styles.permissionButtonText, children: "Grant Camera Access" }) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], children: (0, jsx_runtime_1.jsxs)(expo_camera_1.CameraView, { ref: cameraRef, style: styles.camera, facing: "back", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.overlay, children: [overlay?.title && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topBar, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.titleText, children: overlay.title }) })), overlay?.showGuideFrame && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.guideContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                                    styles.guideFrame,
-                                    overlay.guideFrameAspectRatio
-                                        ? { aspectRatio: overlay.guideFrameAspectRatio }
-                                        : undefined,
-                                ] }) })), overlay?.instructions && status === 'idle' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.instructionsContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.instructionsText, children: overlay.instructions }) })), status === 'processing' && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statusOverlay, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: "#fff" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statusText, children: "Analyzing photo..." })] })), status === 'success' && result && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statusOverlay, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                                        styles.resultBadge,
-                                        result.is_compliant ? styles.resultPass : styles.resultFail,
-                                    ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.resultText, children: result.is_compliant ? 'PASS' : 'FAIL' }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.feedbackText, children: result.feedback })] })), status === 'error' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.statusOverlay, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.errorText, children: "Verification failed. Try again." }) }))] }), showCaptureButton && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.bottomBar, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
-                            styles.captureButton,
-                            (status === 'capturing' || status === 'processing') && styles.captureButtonDisabled,
-                        ], onPress: handleCapture, disabled: status === 'capturing' || status === 'processing', activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.captureButtonInner }) }) }))] }) }));
+    const showBottomCard = status === 'success' || status === 'error';
+    return (_jsx(View, { style: [styles.container, style], children: _jsx(CameraView, { ref: cameraRef, style: styles.camera, facing: "back", children: _jsxs(View, { style: styles.overlay, children: [overlay?.title && (_jsx(View, { style: styles.topBar, children: _jsx(Text, { style: styles.titleText, children: overlay.title }) })), overlay?.showGuideFrame && (_jsx(View, { style: styles.guideContainer, children: _jsxs(View, { style: [
+                                styles.guideFrame,
+                                overlay.guideFrameAspectRatio
+                                    ? { aspectRatio: overlay.guideFrameAspectRatio }
+                                    : undefined,
+                            ], children: [_jsx(View, { style: [styles.corner, styles.cornerTopLeft] }), _jsx(View, { style: [styles.corner, styles.cornerTopRight] }), _jsx(View, { style: [styles.corner, styles.cornerBottomLeft] }), _jsx(View, { style: [styles.corner, styles.cornerBottomRight] })] }) })), status === 'processing' && (_jsxs(View, { style: styles.processingOverlay, children: [_jsx(ActivityIndicator, { size: "large", color: "#fff" }), _jsx(Text, { style: styles.statusText, children: "Analyzing photo..." })] })), showBottomCard && _jsx(View, { style: styles.cardBackdrop }), _jsxs(View, { style: styles.bottomArea, children: [status === 'success' && result && (_jsxs(View, { style: styles.resultCard, children: [_jsxs(View, { style: styles.resultCardHeader, children: [_jsx(View, { style: [
+                                                    styles.resultIconCircle,
+                                                    result.is_compliant ? styles.resultIconPass : styles.resultIconFail,
+                                                ], children: _jsx(Text, { style: styles.resultIcon, children: result.is_compliant ? '\u2713' : '\u2717' }) }), _jsx(Text, { style: [
+                                                    styles.resultLabel,
+                                                    result.is_compliant ? styles.resultLabelPass : styles.resultLabelFail,
+                                                ], children: result.is_compliant ? 'Verified' : 'Not Verified' })] }), _jsx(Text, { style: styles.feedbackText, children: result.feedback })] })), status === 'error' && (_jsxs(View, { style: styles.resultCard, children: [_jsxs(View, { style: styles.resultCardHeader, children: [_jsx(View, { style: [styles.resultIconCircle, styles.resultIconError], children: _jsx(Text, { style: styles.resultIcon, children: "!" }) }), _jsx(Text, { style: [styles.resultLabel, styles.resultLabelError], children: "Something went wrong" })] }), _jsx(Text, { style: styles.feedbackText, children: "We couldn't process your photo. Please try again." })] })), !showBottomCard && (_jsxs(_Fragment, { children: [overlay?.instructions && status === 'idle' && (_jsx(Text, { style: styles.instructionsText, children: overlay.instructions })), showCaptureButton && (_jsx(View, { style: styles.captureButtonRow, children: _jsx(TouchableOpacity, { style: [
+                                                styles.captureButton,
+                                                (status === 'capturing' || status === 'processing') &&
+                                                    styles.captureButtonDisabled,
+                                            ], onPress: handleCapture, disabled: status === 'capturing' || status === 'processing', activeOpacity: 0.7, children: _jsx(View, { style: styles.captureButtonInner }) }) }))] }))] })] }) }) }));
 }
-const styles = react_native_1.StyleSheet.create({
+const CORNER_SIZE = 30;
+const CORNER_THICKNESS = 3;
+const CORNER_COLOR = 'rgba(255, 255, 255, 0.7)';
+const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#000',
@@ -98,7 +103,7 @@ const styles = react_native_1.StyleSheet.create({
         flex: 1,
     },
     overlay: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
+        ...StyleSheet.absoluteFillObject,
         justifyContent: 'space-between',
     },
     topBar: {
@@ -111,6 +116,7 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 18,
         fontWeight: '600',
     },
+    // Guide frame with corner brackets
     guideContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -120,66 +126,57 @@ const styles = react_native_1.StyleSheet.create({
     guideFrame: {
         width: '100%',
         aspectRatio: 4 / 3,
-        borderWidth: 2,
-        borderColor: 'rgba(255, 255, 255, 0.5)',
-        borderRadius: 12,
-        borderStyle: 'dashed',
     },
-    instructionsContainer: {
-        paddingHorizontal: 20,
-        paddingBottom: 20,
-        alignItems: 'center',
-    },
-    instructionsText: {
-        color: 'rgba(255, 255, 255, 0.8)',
-        fontSize: 14,
-        textAlign: 'center',
-    },
-    statusOverlay: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: 16,
+    corner: {
+        position: 'absolute',
+        width: CORNER_SIZE,
+        height: CORNER_SIZE,
     },
-    statusText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '500',
+    cornerTopLeft: {
+        top: 0,
+        left: 0,
+        borderTopWidth: CORNER_THICKNESS,
+        borderLeftWidth: CORNER_THICKNESS,
+        borderColor: CORNER_COLOR,
+        borderTopLeftRadius: 4,
     },
-    resultBadge: {
-        paddingHorizontal: 24,
-        paddingVertical: 12,
-        borderRadius: 8,
+    cornerTopRight: {
+        top: 0,
+        right: 0,
+        borderTopWidth: CORNER_THICKNESS,
+        borderRightWidth: CORNER_THICKNESS,
+        borderColor: CORNER_COLOR,
+        borderTopRightRadius: 4,
     },
-    resultPass: {
-        backgroundColor: 'rgba(34, 197, 94, 0.9)',
+    cornerBottomLeft: {
+        bottom: 0,
+        left: 0,
+        borderBottomWidth: CORNER_THICKNESS,
+        borderLeftWidth: CORNER_THICKNESS,
+        borderColor: CORNER_COLOR,
+        borderBottomLeftRadius: 4,
     },
-    resultFail: {
-        backgroundColor: 'rgba(239, 68, 68, 0.9)',
+    cornerBottomRight: {
+        bottom: 0,
+        right: 0,
+        borderBottomWidth: CORNER_THICKNESS,
+        borderRightWidth: CORNER_THICKNESS,
+        borderColor: CORNER_COLOR,
+        borderBottomRightRadius: 4,
     },
-    resultText: {
-        color: '#fff',
-        fontSize: 24,
-        fontWeight: '700',
+    // Bottom area: flex column for instructions + capture button
+    bottomArea: {
+        paddingBottom: 40,
+        alignItems: 'center',
     },
-    feedbackText: {
-        color: '#fff',
+    instructionsText: {
+        color: 'rgba(255, 255, 255, 0.8)',
         fontSize: 14,
         textAlign: 'center',
-        paddingHorizontal: 40,
-        lineHeight: 20,
-    },
-    errorText: {
-        color: '#ef4444',
-        fontSize: 16,
-        fontWeight: '500',
+        paddingHorizontal: 20,
+        marginBottom: 20,
     },
-    bottomBar: {
-        position: 'absolute',
-        bottom: 40,
-        left: 0,
-        right: 0,
+    captureButtonRow: {
         alignItems: 'center',
     },
     captureButton: {
@@ -200,6 +197,79 @@ const styles = react_native_1.StyleSheet.create({
         borderRadius: 29,
         backgroundColor: '#fff',
     },
+    // Processing spinner overlay
+    processingOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 16,
+    },
+    statusText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    // Bottom card for results and errors
+    cardBackdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    },
+    resultCard: {
+        backgroundColor: '#fff',
+        borderRadius: 20,
+        paddingVertical: 24,
+        paddingHorizontal: 24,
+        marginHorizontal: 16,
+        alignItems: 'center',
+        gap: 12,
+    },
+    resultCardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    resultIconCircle: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    resultIconPass: {
+        backgroundColor: '#22c55e',
+    },
+    resultIconFail: {
+        backgroundColor: '#ef4444',
+    },
+    resultIconError: {
+        backgroundColor: '#f59e0b',
+    },
+    resultIcon: {
+        color: '#fff',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+    resultLabel: {
+        fontSize: 20,
+        fontWeight: '700',
+    },
+    resultLabelPass: {
+        color: '#15803d',
+    },
+    resultLabelFail: {
+        color: '#dc2626',
+    },
+    resultLabelError: {
+        color: '#b45309',
+    },
+    feedbackText: {
+        color: '#4b5563',
+        fontSize: 15,
+        textAlign: 'center',
+        lineHeight: 22,
+    },
+    // Permission screen
     permissionContainer: {
         justifyContent: 'center',
         alignItems: 'center',

package/lib/hooks/useVerifyAI.js CHANGED Viewed

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVerifyAI = useVerifyAI;
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const client_1 = require("../client");
+import { useMemo, useCallback, useState, useEffect } from 'react';
+import { AppState } from 'react-native';
+import { VerifyAIClient } from '../client';
 // Lazy-load OfflineQueue to avoid hard dependency on @react-native-async-storage/async-storage.
 // Consumers who don't use offlineMode won't need it installed.
 let OfflineQueueClass = null;
@@ -36,22 +33,22 @@ catch {
  * };
  * ```
  */
-function useVerifyAI(config) {
-    const client = (0, react_1.useMemo)(() => new client_1.VerifyAIClient(config), [config.apiKey, config.baseUrl, config.timeout]);
-    const offlineQueue = (0, react_1.useMemo)(() => (config.offlineMode && OfflineQueueClass ? new OfflineQueueClass(client) : null), [client, config.offlineMode]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [lastResult, setLastResult] = (0, react_1.useState)(null);
-    const [queueSize, setQueueSize] = (0, react_1.useState)(0);
+export function useVerifyAI(config) {
+    const client = useMemo(() => new VerifyAIClient(config), [config.apiKey, config.baseUrl, config.timeout]);
+    const offlineQueue = useMemo(() => (config.offlineMode && OfflineQueueClass ? new OfflineQueueClass(client) : null), [client, config.offlineMode]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [lastResult, setLastResult] = useState(null);
+    const [queueSize, setQueueSize] = useState(0);
     // Refresh queue size
-    const refreshQueueSize = (0, react_1.useCallback)(async () => {
+    const refreshQueueSize = useCallback(async () => {
         if (offlineQueue) {
             const size = await offlineQueue.getQueueSize();
             setQueueSize(size);
         }
     }, [offlineQueue]);
     // Process queue on app foreground
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!offlineQueue)
             return;
         refreshQueueSize();
@@ -60,10 +57,10 @@ function useVerifyAI(config) {
                 offlineQueue.processQueue().then(() => refreshQueueSize());
             }
         };
-        const subscription = react_native_1.AppState.addEventListener('change', handleAppState);
+        const subscription = AppState.addEventListener('change', handleAppState);
         return () => subscription.remove();
     }, [offlineQueue, refreshQueueSize]);
-    const verify = (0, react_1.useCallback)(async (request) => {
+    const verify = useCallback(async (request) => {
         setLoading(true);
         setError(null);
         try {
@@ -86,9 +83,9 @@ function useVerifyAI(config) {
             setLoading(false);
         }
     }, [client, offlineQueue, refreshQueueSize]);
-    const listVerifications = (0, react_1.useCallback)((params) => client.listVerifications(params), [client]);
-    const getVerification = (0, react_1.useCallback)((id) => client.getVerification(id), [client]);
-    const processQueue = (0, react_1.useCallback)(async () => {
+    const listVerifications = useCallback((params) => client.listVerifications(params), [client]);
+    const getVerification = useCallback((id) => client.getVerification(id), [client]);
+    const processQueue = useCallback(async () => {
         if (!offlineQueue)
             return;
         await offlineQueue.processQueue((_, result) => setLastResult(result));

package/lib/index.js CHANGED Viewed

@@ -1,10 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVerifyAI = exports.VerifyAIRequestError = exports.VerifyAIClient = void 0;
 // Client
-var client_1 = require("./client");
-Object.defineProperty(exports, "VerifyAIClient", { enumerable: true, get: function () { return client_1.VerifyAIClient; } });
-Object.defineProperty(exports, "VerifyAIRequestError", { enumerable: true, get: function () { return client_1.VerifyAIRequestError; } });
+export { VerifyAIClient, VerifyAIRequestError } from './client';
 // Hooks
-var useVerifyAI_1 = require("./hooks/useVerifyAI");
-Object.defineProperty(exports, "useVerifyAI", { enumerable: true, get: function () { return useVerifyAI_1.useVerifyAI; } });
+export { useVerifyAI } from './hooks/useVerifyAI';

package/lib/storage/offlineQueue.js CHANGED Viewed

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OfflineQueue = void 0;
-const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+import AsyncStorage from '@react-native-async-storage/async-storage';
 const MANIFEST_KEY = '@verifyai/queue_manifest';
 const ITEM_PREFIX = '@verifyai/queue_item_';
 const LEGACY_KEY = '@verifyai/offline_queue';
-class OfflineQueue {
+export class OfflineQueue {
     constructor(client) {
         this.processing = false;
         this.migrated = false;
@@ -22,13 +16,13 @@ class OfflineQueue {
         if (this.migrated)
             return;
         this.migrated = true;
-        const legacy = await async_storage_1.default.getItem(LEGACY_KEY);
+        const legacy = await AsyncStorage.getItem(LEGACY_KEY);
         if (!legacy)
             return;
         try {
             const items = JSON.parse(legacy);
             if (!Array.isArray(items) || items.length === 0) {
-                await async_storage_1.default.removeItem(LEGACY_KEY);
+                await AsyncStorage.removeItem(LEGACY_KEY);
                 return;
             }
             const ids = [];
@@ -37,24 +31,24 @@ class OfflineQueue {
                 ids.push(item.id);
                 pairs.push([`${ITEM_PREFIX}${item.id}`, JSON.stringify(item)]);
             }
-            await async_storage_1.default.multiSet([
+            await AsyncStorage.multiSet([
                 [MANIFEST_KEY, JSON.stringify(ids)],
                 ...pairs,
             ]);
-            await async_storage_1.default.removeItem(LEGACY_KEY);
+            await AsyncStorage.removeItem(LEGACY_KEY);
         }
         catch {
             // If migration fails, remove corrupt legacy data
-            await async_storage_1.default.removeItem(LEGACY_KEY);
+            await AsyncStorage.removeItem(LEGACY_KEY);
         }
     }
     async getManifest() {
         await this.migrateIfNeeded();
-        const raw = await async_storage_1.default.getItem(MANIFEST_KEY);
+        const raw = await AsyncStorage.getItem(MANIFEST_KEY);
         return raw ? JSON.parse(raw) : [];
     }
     async setManifest(ids) {
-        await async_storage_1.default.setItem(MANIFEST_KEY, JSON.stringify(ids));
+        await AsyncStorage.setItem(MANIFEST_KEY, JSON.stringify(ids));
     }
     /**
      * Add a verification request to the offline queue.
@@ -69,7 +63,7 @@ class OfflineQueue {
         };
         const ids = await this.getManifest();
         ids.push(item.id);
-        await async_storage_1.default.setItem(`${ITEM_PREFIX}${item.id}`, JSON.stringify(item));
+        await AsyncStorage.setItem(`${ITEM_PREFIX}${item.id}`, JSON.stringify(item));
         await this.setManifest(ids);
         return item.id;
     }
@@ -81,7 +75,7 @@ class OfflineQueue {
         if (ids.length === 0)
             return [];
         const keys = ids.map((id) => `${ITEM_PREFIX}${id}`);
-        const pairs = await async_storage_1.default.multiGet(keys);
+        const pairs = await AsyncStorage.multiGet(keys);
         const items = [];
         for (const [, value] of pairs) {
             if (value) {
@@ -109,7 +103,7 @@ class OfflineQueue {
         const ids = await this.getManifest();
         const filtered = ids.filter((i) => i !== id);
         await this.setManifest(filtered);
-        await async_storage_1.default.removeItem(`${ITEM_PREFIX}${id}`);
+        await AsyncStorage.removeItem(`${ITEM_PREFIX}${id}`);
     }
     /**
      * Clear all items from the queue.
@@ -118,10 +112,10 @@ class OfflineQueue {
         const ids = await this.getManifest();
         if (ids.length > 0) {
             const keys = ids.map((id) => `${ITEM_PREFIX}${id}`);
-            await async_storage_1.default.multiRemove([MANIFEST_KEY, ...keys]);
+            await AsyncStorage.multiRemove([MANIFEST_KEY, ...keys]);
         }
         else {
-            await async_storage_1.default.removeItem(MANIFEST_KEY);
+            await AsyncStorage.removeItem(MANIFEST_KEY);
         }
     }
     /**
@@ -145,7 +139,7 @@ class OfflineQueue {
         try {
             const ids = await this.getManifest();
             for (const id of ids) {
-                const raw = await async_storage_1.default.getItem(`${ITEM_PREFIX}${id}`);
+                const raw = await AsyncStorage.getItem(`${ITEM_PREFIX}${id}`);
                 if (!raw)
                     continue;
                 let item;
@@ -154,24 +148,24 @@ class OfflineQueue {
                 }
                 catch {
                     // Remove corrupt item
-                    await async_storage_1.default.removeItem(`${ITEM_PREFIX}${id}`);
+                    await AsyncStorage.removeItem(`${ITEM_PREFIX}${id}`);
                     continue;
                 }
                 try {
                     const result = await this.client.verify(item.request);
                     processed++;
-                    await async_storage_1.default.removeItem(`${ITEM_PREFIX}${id}`);
+                    await AsyncStorage.removeItem(`${ITEM_PREFIX}${id}`);
                     onResult?.(item.id, result);
                 }
                 catch {
                     item.retryCount++;
                     if (item.retryCount < maxRetries) {
-                        await async_storage_1.default.setItem(`${ITEM_PREFIX}${id}`, JSON.stringify(item));
+                        await AsyncStorage.setItem(`${ITEM_PREFIX}${id}`, JSON.stringify(item));
                         remainingIds.push(id);
                     }
                     else {
                         failed++;
-                        await async_storage_1.default.removeItem(`${ITEM_PREFIX}${id}`);
+                        await AsyncStorage.removeItem(`${ITEM_PREFIX}${id}`);
                     }
                 }
             }
@@ -183,4 +177,3 @@ class OfflineQueue {
         }
     }
 }
-exports.OfflineQueue = OfflineQueue;

package/lib/types/index.js CHANGED Viewed

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@switchlabs/verify-ai-react-native",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React Native SDK for Verify AI - photo verification with AI vision processing",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

package/src/components/VerifyAIScanner.tsx CHANGED Viewed

@@ -128,6 +128,8 @@ export function VerifyAIScanner({
     );
   }
+  const showBottomCard = status === 'success' || status === 'error';
   return (
     <View style={[styles.container, style]}>
       <CameraView ref={cameraRef} style={styles.camera} facing="back">
@@ -148,68 +150,105 @@ export function VerifyAIScanner({
                     ? { aspectRatio: overlay.guideFrameAspectRatio }
                     : undefined,
                 ]}
-              />
-            </View>
-          )}
-          {overlay?.instructions && status === 'idle' && (
-            <View style={styles.instructionsContainer}>
-              <Text style={styles.instructionsText}>{overlay.instructions}</Text>
+              >
+                {/* Corner brackets */}
+                <View style={[styles.corner, styles.cornerTopLeft]} />
+                <View style={[styles.corner, styles.cornerTopRight]} />
+                <View style={[styles.corner, styles.cornerBottomLeft]} />
+                <View style={[styles.corner, styles.cornerBottomRight]} />
+              </View>
             </View>
           )}
-          {/* Status indicators */}
+          {/* Processing spinner */}
           {status === 'processing' && (
-            <View style={styles.statusOverlay}>
+            <View style={styles.processingOverlay}>
               <ActivityIndicator size="large" color="#fff" />
               <Text style={styles.statusText}>Analyzing photo...</Text>
             </View>
           )}
-          {status === 'success' && result && (
-            <View style={styles.statusOverlay}>
-              <View
-                style={[
-                  styles.resultBadge,
-                  result.is_compliant ? styles.resultPass : styles.resultFail,
-                ]}
-              >
-                <Text style={styles.resultText}>
-                  {result.is_compliant ? 'PASS' : 'FAIL'}
-                </Text>
+          {/* Semi-transparent backdrop for result/error cards */}
+          {showBottomCard && <View style={styles.cardBackdrop} />}
+          {/* Bottom area: instructions + capture button OR result card */}
+          <View style={styles.bottomArea}>
+            {status === 'success' && result && (
+              <View style={styles.resultCard}>
+                <View style={styles.resultCardHeader}>
+                  <View
+                    style={[
+                      styles.resultIconCircle,
+                      result.is_compliant ? styles.resultIconPass : styles.resultIconFail,
+                    ]}
+                  >
+                    <Text style={styles.resultIcon}>
+                      {result.is_compliant ? '\u2713' : '\u2717'}
+                    </Text>
+                  </View>
+                  <Text
+                    style={[
+                      styles.resultLabel,
+                      result.is_compliant ? styles.resultLabelPass : styles.resultLabelFail,
+                    ]}
+                  >
+                    {result.is_compliant ? 'Verified' : 'Not Verified'}
+                  </Text>
+                </View>
+                <Text style={styles.feedbackText}>{result.feedback}</Text>
               </View>
-              <Text style={styles.feedbackText}>{result.feedback}</Text>
-            </View>
-          )}
+            )}
-          {status === 'error' && (
-            <View style={styles.statusOverlay}>
-              <Text style={styles.errorText}>Verification failed. Try again.</Text>
-            </View>
-          )}
-        </View>
+            {status === 'error' && (
+              <View style={styles.resultCard}>
+                <View style={styles.resultCardHeader}>
+                  <View style={[styles.resultIconCircle, styles.resultIconError]}>
+                    <Text style={styles.resultIcon}>!</Text>
+                  </View>
+                  <Text style={[styles.resultLabel, styles.resultLabelError]}>
+                    Something went wrong
+                  </Text>
+                </View>
+                <Text style={styles.feedbackText}>
+                  We couldn't process your photo. Please try again.
+                </Text>
+              </View>
+            )}
-        {/* Capture button */}
-        {showCaptureButton && (
-          <View style={styles.bottomBar}>
-            <TouchableOpacity
-              style={[
-                styles.captureButton,
-                (status === 'capturing' || status === 'processing') && styles.captureButtonDisabled,
-              ]}
-              onPress={handleCapture}
-              disabled={status === 'capturing' || status === 'processing'}
-              activeOpacity={0.7}
-            >
-              <View style={styles.captureButtonInner} />
-            </TouchableOpacity>
+            {!showBottomCard && (
+              <>
+                {overlay?.instructions && status === 'idle' && (
+                  <Text style={styles.instructionsText}>{overlay.instructions}</Text>
+                )}
+                {showCaptureButton && (
+                  <View style={styles.captureButtonRow}>
+                    <TouchableOpacity
+                      style={[
+                        styles.captureButton,
+                        (status === 'capturing' || status === 'processing') &&
+                          styles.captureButtonDisabled,
+                      ]}
+                      onPress={handleCapture}
+                      disabled={status === 'capturing' || status === 'processing'}
+                      activeOpacity={0.7}
+                    >
+                      <View style={styles.captureButtonInner} />
+                    </TouchableOpacity>
+                  </View>
+                )}
+              </>
+            )}
           </View>
-        )}
+        </View>
       </CameraView>
     </View>
   );
 }
+const CORNER_SIZE = 30;
+const CORNER_THICKNESS = 3;
+const CORNER_COLOR = 'rgba(255, 255, 255, 0.7)';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -232,6 +271,8 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '600',
   },
+  // Guide frame with corner brackets
   guideContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -241,66 +282,58 @@ const styles = StyleSheet.create({
   guideFrame: {
     width: '100%',
     aspectRatio: 4 / 3,
-    borderWidth: 2,
-    borderColor: 'rgba(255, 255, 255, 0.5)',
-    borderRadius: 12,
-    borderStyle: 'dashed',
-  },
-  instructionsContainer: {
-    paddingHorizontal: 20,
-    paddingBottom: 20,
-    alignItems: 'center',
   },
-  instructionsText: {
-    color: 'rgba(255, 255, 255, 0.8)',
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  statusOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 16,
+  corner: {
+    position: 'absolute',
+    width: CORNER_SIZE,
+    height: CORNER_SIZE,
   },
-  statusText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '500',
+  cornerTopLeft: {
+    top: 0,
+    left: 0,
+    borderTopWidth: CORNER_THICKNESS,
+    borderLeftWidth: CORNER_THICKNESS,
+    borderColor: CORNER_COLOR,
+    borderTopLeftRadius: 4,
   },
-  resultBadge: {
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
+  cornerTopRight: {
+    top: 0,
+    right: 0,
+    borderTopWidth: CORNER_THICKNESS,
+    borderRightWidth: CORNER_THICKNESS,
+    borderColor: CORNER_COLOR,
+    borderTopRightRadius: 4,
   },
-  resultPass: {
-    backgroundColor: 'rgba(34, 197, 94, 0.9)',
+  cornerBottomLeft: {
+    bottom: 0,
+    left: 0,
+    borderBottomWidth: CORNER_THICKNESS,
+    borderLeftWidth: CORNER_THICKNESS,
+    borderColor: CORNER_COLOR,
+    borderBottomLeftRadius: 4,
   },
-  resultFail: {
-    backgroundColor: 'rgba(239, 68, 68, 0.9)',
+  cornerBottomRight: {
+    bottom: 0,
+    right: 0,
+    borderBottomWidth: CORNER_THICKNESS,
+    borderRightWidth: CORNER_THICKNESS,
+    borderColor: CORNER_COLOR,
+    borderBottomRightRadius: 4,
   },
-  resultText: {
-    color: '#fff',
-    fontSize: 24,
-    fontWeight: '700',
+  // Bottom area: flex column for instructions + capture button
+  bottomArea: {
+    paddingBottom: 40,
+    alignItems: 'center',
   },
-  feedbackText: {
-    color: '#fff',
+  instructionsText: {
+    color: 'rgba(255, 255, 255, 0.8)',
     fontSize: 14,
     textAlign: 'center',
-    paddingHorizontal: 40,
-    lineHeight: 20,
-  },
-  errorText: {
-    color: '#ef4444',
-    fontSize: 16,
-    fontWeight: '500',
+    paddingHorizontal: 20,
+    marginBottom: 20,
   },
-  bottomBar: {
-    position: 'absolute',
-    bottom: 40,
-    left: 0,
-    right: 0,
+  captureButtonRow: {
     alignItems: 'center',
   },
   captureButton: {
@@ -321,6 +354,82 @@ const styles = StyleSheet.create({
     borderRadius: 29,
     backgroundColor: '#fff',
   },
+  // Processing spinner overlay
+  processingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 16,
+  },
+  statusText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  // Bottom card for results and errors
+  cardBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  resultCard: {
+    backgroundColor: '#fff',
+    borderRadius: 20,
+    paddingVertical: 24,
+    paddingHorizontal: 24,
+    marginHorizontal: 16,
+    alignItems: 'center',
+    gap: 12,
+  },
+  resultCardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  resultIconCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  resultIconPass: {
+    backgroundColor: '#22c55e',
+  },
+  resultIconFail: {
+    backgroundColor: '#ef4444',
+  },
+  resultIconError: {
+    backgroundColor: '#f59e0b',
+  },
+  resultIcon: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  resultLabel: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  resultLabelPass: {
+    color: '#15803d',
+  },
+  resultLabelFail: {
+    color: '#dc2626',
+  },
+  resultLabelError: {
+    color: '#b45309',
+  },
+  feedbackText: {
+    color: '#4b5563',
+    fontSize: 15,
+    textAlign: 'center',
+    lineHeight: 22,
+  },
+  // Permission screen
   permissionContainer: {
     justifyContent: 'center',
     alignItems: 'center',