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

package/lib/components/VerifyAIScanner.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
@@ -48,6 +48,7 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
                 setResult(verificationResult);
                 setStatus('success');
                 onResult?.(verificationResult);
+                setTimeout(() => setStatus('idle'), 3000);
             }
             else {
                 // null result means queued for offline
@@ -72,19 +73,27 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
     if (!permission.granted) {
         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 (_jsx(View, { style: [styles.container, style], children: _jsxs(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: _jsx(View, { style: [
-                                    styles.guideFrame,
-                                    overlay.guideFrameAspectRatio
-                                        ? { aspectRatio: overlay.guideFrameAspectRatio }
-                                        : undefined,
-                                ] }) })), overlay?.instructions && status === 'idle' && (_jsx(View, { style: styles.instructionsContainer, children: _jsx(Text, { style: styles.instructionsText, children: overlay.instructions }) })), status === 'processing' && (_jsxs(View, { style: styles.statusOverlay, children: [_jsx(ActivityIndicator, { size: "large", color: "#fff" }), _jsx(Text, { style: styles.statusText, children: "Analyzing photo..." })] })), status === 'success' && result && (_jsxs(View, { style: styles.statusOverlay, children: [_jsx(View, { style: [
-                                        styles.resultBadge,
-                                        result.is_compliant ? styles.resultPass : styles.resultFail,
-                                    ], children: _jsx(Text, { style: styles.resultText, children: result.is_compliant ? 'PASS' : 'FAIL' }) }), _jsx(Text, { style: styles.feedbackText, children: result.feedback })] })), status === 'error' && (_jsx(View, { style: styles.statusOverlay, children: _jsx(Text, { style: styles.errorText, children: "Verification failed. Try again." }) }))] }), showCaptureButton && (_jsx(View, { style: styles.bottomBar, 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 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 CORNER_SIZE = 30;
+const CORNER_THICKNESS = 3;
+const CORNER_COLOR = 'rgba(255, 255, 255, 0.7)';
 const styles = StyleSheet.create({
     container: {
         flex: 1,
@@ -107,6 +116,7 @@ const styles = StyleSheet.create({
         fontSize: 18,
         fontWeight: '600',
     },
+    // Guide frame with corner brackets
     guideContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -116,66 +126,57 @@ 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: {
@@ -196,6 +197,79 @@ 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',

package/lib/hooks/useVerifyAI.d.ts

@@ -1,5 +1,5 @@
 import { VerifyAIClient } from '../client';
-import { OfflineQueue } from '../storage/offlineQueue';
+import type { OfflineQueue } from '../storage/offlineQueue';
 import type { VerifyAIConfig, VerificationRequest, VerificationResult, VerificationListParams, VerificationListResponse } from '../types';
 export interface UseVerifyAIReturn {
     /** Submit a verification. Uses offline queue if offlineMode is enabled and request fails. */

package/lib/hooks/useVerifyAI.js

@@ -1,7 +1,16 @@
 import { useMemo, useCallback, useState, useEffect } from 'react';
 import { AppState } from 'react-native';
 import { VerifyAIClient } from '../client';
-import { OfflineQueue } from '../storage/offlineQueue';
+// 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;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    OfflineQueueClass = require('../storage/offlineQueue').OfflineQueue;
+}
+catch {
+    // AsyncStorage not installed — offlineMode will be unavailable
+}
 /**
  * React hook for Verify AI. Provides verification methods,
  * loading/error state, and optional offline queue management.
@@ -26,7 +35,7 @@ import { OfflineQueue } from '../storage/offlineQueue';
  */
 export function useVerifyAI(config) {
     const client = useMemo(() => new VerifyAIClient(config), [config.apiKey, config.baseUrl, config.timeout]);
-    const offlineQueue = useMemo(() => (config.offlineMode ? new OfflineQueue(client) : null), [client, config.offlineMode]);
+    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);

package/lib/index.d.ts

@@ -1,7 +1,6 @@
 export { VerifyAIClient, VerifyAIRequestError } from './client';
 export { useVerifyAI } from './hooks/useVerifyAI';
 export type { UseVerifyAIReturn } from './hooks/useVerifyAI';
-export { VerifyAIScanner } from './components/VerifyAIScanner';
 export type { VerifyAIScannerProps } from './components/VerifyAIScanner';
-export { OfflineQueue } from './storage/offlineQueue';
+export type { OfflineQueue } from './storage/offlineQueue';
 export type { VerifyAIConfig, VerificationRequest, VerificationResult, VerificationListResponse, VerificationListParams, QueueItem, VerifyAIError, ScannerStatus, ScannerOverlayConfig, } from './types';

package/lib/index.js

@@ -2,7 +2,3 @@
 export { VerifyAIClient, VerifyAIRequestError } from './client';
 // Hooks
 export { useVerifyAI } from './hooks/useVerifyAI';
-// Components
-export { VerifyAIScanner } from './components/VerifyAIScanner';
-// Offline Queue
-export { OfflineQueue } from './storage/offlineQueue';

package/package.json

@@ -1,12 +1,34 @@
 {
   "name": "@switchlabs/verify-ai-react-native",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React Native SDK for Verify AI - photo verification with AI vision processing",
   "main": "./lib/index.js",
-  "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "source": "./src/index.ts",
   "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./scanner": {
+      "react-native": "./src/components/VerifyAIScanner.tsx",
+      "types": "./lib/components/VerifyAIScanner.d.ts",
+      "default": "./lib/components/VerifyAIScanner.js"
+    },
+    "./offline": {
+      "react-native": "./src/storage/offlineQueue.ts",
+      "types": "./lib/storage/offlineQueue.d.ts",
+      "default": "./lib/storage/offlineQueue.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "scanner": ["./lib/components/VerifyAIScanner.d.ts"],
+      "offline": ["./lib/storage/offlineQueue.d.ts"]
+    }
+  },
   "files": [
     "src",
     "lib"

package/src/components/VerifyAIScanner.tsx

@@ -94,6 +94,7 @@ export function VerifyAIScanner({
         setResult(verificationResult);
         setStatus('success');
         onResult?.(verificationResult);
+        setTimeout(() => setStatus('idle'), 3000);
       } else {
         // null result means queued for offline
         setStatus('idle');
@@ -127,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">
@@ -147,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,
@@ -231,6 +271,8 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '600',
   },
+
+  // Guide frame with corner brackets
   guideContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -240,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: {
@@ -320,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',

package/src/hooks/useVerifyAI.ts

@@ -1,7 +1,7 @@
 import { useRef, useMemo, useCallback, useState, useEffect } from 'react';
 import { AppState, type AppStateStatus } from 'react-native';
 import { VerifyAIClient } from '../client';
-import { OfflineQueue } from '../storage/offlineQueue';
+import type { OfflineQueue } from '../storage/offlineQueue';
 import type {
   VerifyAIConfig,
   VerificationRequest,
@@ -10,6 +10,16 @@ import type {
   VerificationListResponse,
 } from '../types';
 
+// 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: (new (client: VerifyAIClient) => OfflineQueue) | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  OfflineQueueClass = require('../storage/offlineQueue').OfflineQueue;
+} catch {
+  // AsyncStorage not installed — offlineMode will be unavailable
+}
+
 export interface UseVerifyAIReturn {
   /** Submit a verification. Uses offline queue if offlineMode is enabled and request fails. */
   verify: (request: VerificationRequest) => Promise<VerificationResult | null>;
@@ -58,7 +68,7 @@ export interface UseVerifyAIReturn {
 export function useVerifyAI(config: VerifyAIConfig): UseVerifyAIReturn {
   const client = useMemo(() => new VerifyAIClient(config), [config.apiKey, config.baseUrl, config.timeout]);
   const offlineQueue = useMemo(
-    () => (config.offlineMode ? new OfflineQueue(client) : null),
+    () => (config.offlineMode && OfflineQueueClass ? new OfflineQueueClass(client) : null),
     [client, config.offlineMode]
   );
 

package/src/index.ts

@@ -5,12 +5,11 @@ export { VerifyAIClient, VerifyAIRequestError } from './client';
 export { useVerifyAI } from './hooks/useVerifyAI';
 export type { UseVerifyAIReturn } from './hooks/useVerifyAI';
 
-// Components
-export { VerifyAIScanner } from './components/VerifyAIScanner';
+// Components — import { VerifyAIScanner } from '@switchlabs/verify-ai-react-native/scanner'
 export type { VerifyAIScannerProps } from './components/VerifyAIScanner';
 
-// Offline Queue
-export { OfflineQueue } from './storage/offlineQueue';
+// Offline Queue — import { OfflineQueue } from '@switchlabs/verify-ai-react-native/offline'
+export type { OfflineQueue } from './storage/offlineQueue';
 
 // Types
 export type {