@switchlabs/verify-ai-react-native 0.1.0

package/src/components/VerifyAIScanner.tsx

@@ -0,0 +1,346 @@
+import React, { useRef, useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  type ViewStyle,
+} from 'react-native';
+import {
+  CameraView,
+  useCameraPermissions,
+  type CameraCapturedPicture,
+} from 'expo-camera';
+import type {
+  VerificationResult,
+  ScannerStatus,
+  ScannerOverlayConfig,
+} from '../types';
+
+export interface VerifyAIScannerProps {
+  /** Called with the base64 image data when the user captures a photo. */
+  onCapture: (base64Image: string) => Promise<VerificationResult | null>;
+  /** Called when verification completes successfully. */
+  onResult?: (result: VerificationResult) => void;
+  /** Called when an error occurs. */
+  onError?: (error: Error) => void;
+  /** Overlay configuration for the camera view. */
+  overlay?: ScannerOverlayConfig;
+  /** Custom style for the container. */
+  style?: ViewStyle;
+  /** Whether to show the default capture button. Set false to use your own. */
+  showCaptureButton?: boolean;
+  /** Ref to imperatively trigger capture from parent. */
+  captureRef?: React.MutableRefObject<(() => void) | null>;
+}
+
+/**
+ * Camera scanner component for capturing verification photos.
+ * Uses expo-camera for the camera view and provides a simple capture UI.
+ *
+ * @example
+ * ```tsx
+ * const { verify } = useVerifyAI({ apiKey: 'vai_...' });
+ *
+ * <VerifyAIScanner
+ *   onCapture={(base64) => verify({ image: base64, policy: 'scooter_parking' })}
+ *   onResult={(result) => {
+ *     if (result.is_compliant) navigation.navigate('Success');
+ *   }}
+ *   overlay={{
+ *     title: 'Photo Verification',
+ *     instructions: 'Center the scooter in the frame',
+ *     showGuideFrame: true,
+ *   }}
+ * />
+ * ```
+ */
+export function VerifyAIScanner({
+  onCapture,
+  onResult,
+  onError,
+  overlay,
+  style,
+  showCaptureButton = true,
+  captureRef,
+}: VerifyAIScannerProps) {
+  const cameraRef = useRef<CameraView>(null);
+  const [status, setStatus] = useState<ScannerStatus>('idle');
+  const [result, setResult] = useState<VerificationResult | null>(null);
+  const [permission, requestPermission] = useCameraPermissions();
+
+  const handleCapture = useCallback(async () => {
+    if (!cameraRef.current || status === 'capturing' || status === 'processing') return;
+
+    setStatus('capturing');
+    setResult(null);
+
+    try {
+      const photo = await cameraRef.current.takePictureAsync({
+        base64: true,
+        quality: 0.8,
+        exif: false,
+      });
+
+      if (!photo?.base64) {
+        throw new Error('Failed to capture photo');
+      }
+
+      setStatus('processing');
+      const verificationResult = await onCapture(photo.base64);
+
+      if (verificationResult) {
+        setResult(verificationResult);
+        setStatus('success');
+        onResult?.(verificationResult);
+      } else {
+        // null result means queued for offline
+        setStatus('idle');
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setStatus('error');
+      onError?.(error);
+      // Reset after a brief pause
+      setTimeout(() => setStatus('idle'), 2000);
+    }
+  }, [status, onCapture, onResult, onError]);
+
+  // Expose capture to parent via ref
+  if (captureRef) {
+    captureRef.current = handleCapture;
+  }
+
+  if (!permission) {
+    return <View style={[styles.container, style]} />;
+  }
+
+  if (!permission.granted) {
+    return (
+      <View style={[styles.container, styles.permissionContainer, style]}>
+        <Text style={styles.permissionText}>Camera access is required for photo verification</Text>
+        <TouchableOpacity style={styles.permissionButton} onPress={requestPermission}>
+          <Text style={styles.permissionButtonText}>Grant Camera Access</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <CameraView ref={cameraRef} style={styles.camera} facing="back">
+        {/* Overlay */}
+        <View style={styles.overlay}>
+          {overlay?.title && (
+            <View style={styles.topBar}>
+              <Text style={styles.titleText}>{overlay.title}</Text>
+            </View>
+          )}
+
+          {overlay?.showGuideFrame && (
+            <View style={styles.guideContainer}>
+              <View
+                style={[
+                  styles.guideFrame,
+                  overlay.guideFrameAspectRatio
+                    ? { aspectRatio: overlay.guideFrameAspectRatio }
+                    : undefined,
+                ]}
+              />
+            </View>
+          )}
+
+          {overlay?.instructions && status === 'idle' && (
+            <View style={styles.instructionsContainer}>
+              <Text style={styles.instructionsText}>{overlay.instructions}</Text>
+            </View>
+          )}
+
+          {/* Status indicators */}
+          {status === 'processing' && (
+            <View style={styles.statusOverlay}>
+              <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>
+              </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>
+
+        {/* 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>
+          </View>
+        )}
+      </CameraView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  camera: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'space-between',
+  },
+  topBar: {
+    paddingTop: 60,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+  },
+  titleText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  guideContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 40,
+  },
+  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,
+  },
+  statusText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  resultBadge: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  resultPass: {
+    backgroundColor: 'rgba(34, 197, 94, 0.9)',
+  },
+  resultFail: {
+    backgroundColor: 'rgba(239, 68, 68, 0.9)',
+  },
+  resultText: {
+    color: '#fff',
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  feedbackText: {
+    color: '#fff',
+    fontSize: 14,
+    textAlign: 'center',
+    paddingHorizontal: 40,
+    lineHeight: 20,
+  },
+  errorText: {
+    color: '#ef4444',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  bottomBar: {
+    position: 'absolute',
+    bottom: 40,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  captureButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    borderWidth: 4,
+    borderColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captureButtonDisabled: {
+    opacity: 0.4,
+  },
+  captureButtonInner: {
+    width: 58,
+    height: 58,
+    borderRadius: 29,
+    backgroundColor: '#fff',
+  },
+  permissionContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 40,
+    gap: 20,
+  },
+  permissionText: {
+    color: '#fff',
+    fontSize: 16,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  permissionButton: {
+    backgroundColor: '#3b82f6',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  permissionButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/hooks/useVerifyAI.ts

@@ -0,0 +1,150 @@
+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 {
+  VerifyAIConfig,
+  VerificationRequest,
+  VerificationResult,
+  VerificationListParams,
+  VerificationListResponse,
+} from '../types';
+
+export interface UseVerifyAIReturn {
+  /** Submit a verification. Uses offline queue if offlineMode is enabled and request fails. */
+  verify: (request: VerificationRequest) => Promise<VerificationResult | null>;
+  /** List past verifications. */
+  listVerifications: (params?: VerificationListParams) => Promise<VerificationListResponse>;
+  /** Get a single verification by ID. */
+  getVerification: (id: string) => Promise<VerificationResult>;
+  /** Whether a verification is currently in progress. */
+  loading: boolean;
+  /** The most recent error, if any. */
+  error: Error | null;
+  /** The most recent verification result. */
+  lastResult: VerificationResult | null;
+  /** Number of items in the offline queue. */
+  queueSize: number;
+  /** Manually process the offline queue. */
+  processQueue: () => Promise<void>;
+  /** The underlying client instance. */
+  client: VerifyAIClient;
+  /** The offline queue instance (null if offlineMode is disabled). */
+  offlineQueue: OfflineQueue | null;
+}
+
+/**
+ * React hook for Verify AI. Provides verification methods,
+ * loading/error state, and optional offline queue management.
+ *
+ * @example
+ * ```tsx
+ * const { verify, loading, lastResult, error } = useVerifyAI({
+ *   apiKey: 'vai_your_api_key',
+ *   offlineMode: true,
+ * });
+ *
+ * const handleCapture = async (base64Image: string) => {
+ *   const result = await verify({
+ *     image: base64Image,
+ *     policy: 'scooter_parking',
+ *   });
+ *   if (result?.is_compliant) {
+ *     // Success
+ *   }
+ * };
+ * ```
+ */
+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),
+    [client, config.offlineMode]
+  );
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [lastResult, setLastResult] = useState<VerificationResult | null>(null);
+  const [queueSize, setQueueSize] = useState(0);
+
+  // Refresh queue size
+  const refreshQueueSize = useCallback(async () => {
+    if (offlineQueue) {
+      const size = await offlineQueue.getQueueSize();
+      setQueueSize(size);
+    }
+  }, [offlineQueue]);
+
+  // Process queue on app foreground
+  useEffect(() => {
+    if (!offlineQueue) return;
+
+    refreshQueueSize();
+
+    const handleAppState = (state: AppStateStatus) => {
+      if (state === 'active') {
+        offlineQueue.processQueue().then(() => refreshQueueSize());
+      }
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppState);
+    return () => subscription.remove();
+  }, [offlineQueue, refreshQueueSize]);
+
+  const verify = useCallback(
+    async (request: VerificationRequest): Promise<VerificationResult | null> => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await client.verify(request);
+        setLastResult(result);
+        return result;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+
+        // If offline mode, queue the request
+        if (offlineQueue) {
+          await offlineQueue.enqueue(request);
+          await refreshQueueSize();
+          return null;
+        }
+
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client, offlineQueue, refreshQueueSize]
+  );
+
+  const listVerifications = useCallback(
+    (params?: VerificationListParams) => client.listVerifications(params),
+    [client]
+  );
+
+  const getVerification = useCallback(
+    (id: string) => client.getVerification(id),
+    [client]
+  );
+
+  const processQueue = useCallback(async () => {
+    if (!offlineQueue) return;
+    await offlineQueue.processQueue((_, result) => setLastResult(result));
+    await refreshQueueSize();
+  }, [offlineQueue, refreshQueueSize]);
+
+  return {
+    verify,
+    listVerifications,
+    getVerification,
+    loading,
+    error,
+    lastResult,
+    queueSize,
+    processQueue,
+    client,
+    offlineQueue,
+  };
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+// Client
+export { VerifyAIClient, VerifyAIRequestError } from './client';
+
+// Hooks
+export { useVerifyAI } from './hooks/useVerifyAI';
+export type { UseVerifyAIReturn } from './hooks/useVerifyAI';
+
+// Components
+export { VerifyAIScanner } from './components/VerifyAIScanner';
+export type { VerifyAIScannerProps } from './components/VerifyAIScanner';
+
+// Offline Queue
+export { OfflineQueue } from './storage/offlineQueue';
+
+// Types
+export type {
+  VerifyAIConfig,
+  VerificationRequest,
+  VerificationResult,
+  VerificationListResponse,
+  VerificationListParams,
+  QueueItem,
+  VerifyAIError,
+  ScannerStatus,
+  ScannerOverlayConfig,
+} from './types';