@switchlabs/verify-ai-react-native 1.1.1 → 1.1.2

package/README.md

@@ -7,13 +7,13 @@ React Native SDK for Verify AI photo verification.
 Expo-managed apps:
 
 ```bash
-npx expo install @switchlabs/verify-ai-react-native expo-camera @react-native-async-storage/async-storage
+npx expo install @switchlabs/verify-ai-react-native expo-camera expo-image-manipulator @react-native-async-storage/async-storage
 ```
 
 React Native CLI:
 
 ```bash
-npm install @switchlabs/verify-ai-react-native expo-camera @react-native-async-storage/async-storage
+npm install @switchlabs/verify-ai-react-native expo-camera expo-image-manipulator @react-native-async-storage/async-storage
 ```
 
 If you want on-device inference, also install `expo-file-system`,
@@ -63,6 +63,10 @@ function ScannerScreen() {
 }
 ```
 
+`verifyMultipart()` is the recommended path for live camera captures. The
+built-in offline queue currently replays base64 `verify()` requests only; raw
+multipart uploads are not persisted automatically.
+
 ## Offline Mode
 
 Set `offlineMode: true` to queue transient failures (network, timeout, 429, 5xx) and retry later.

package/lib/components/VerifyAIScanner.d.ts

@@ -3,8 +3,8 @@ import { type ViewStyle } from 'react-native';
 import type { VerificationResult, ScannerOverlayConfig } from '../types';
 import type { TelemetryReporter } from '../telemetry/TelemetryReporter';
 export interface VerifyAIScannerProps {
-    /** Called with the image URI when the user captures a photo. */
-    onCapture: (imageUri: string) => Promise<VerificationResult | null>;
+    /** Called with base64 image data when the user captures a photo. */
+    onCapture: (base64: string) => Promise<VerificationResult | null>;
     /** Called when a terminal verification result is reached. */
     onResult?: (result: VerificationResult) => void;
     /** Called when an error occurs. */
@@ -28,13 +28,10 @@ export interface VerifyAIScannerProps {
  *
  * @example
  * ```tsx
- * const { verifyMultipart } = useVerifyAI({
- *   apiKey: 'vai_...',
- *   enableOnDeviceML: true,
- * });
+ * const { verify } = useVerifyAI({ apiKey: 'vai_...' });
  *
  * <VerifyAIScanner
- *   onCapture={(imageUri) => verifyMultipart({ imageUri, policy: 'scooter_parking' })}
+ *   onCapture={(base64) => verify({ image: base64, policy: 'scooter_parking' })}
  *   onResult={(result) => {
  *     if (result.is_compliant) navigation.navigate('Success');
  *   }}

package/lib/components/VerifyAIScanner.js

@@ -2,8 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, } from 'react-native';
 import { CameraView, useCameraPermissions, } from 'expo-camera';
-import * as ImageManipulator from 'expo-image-manipulator';
 import { useTelemetry } from '../telemetry/TelemetryContext';
+/** Quality used when expo-image-manipulator is not available (lower = smaller). */
+const FALLBACK_QUALITY = 0.5;
+/** Quality used when expo-image-manipulator IS available (resize handles size). */
+const MANIPULATOR_QUALITY = 0.7;
+/** Max dimension (px) on longest side when resize is available. */
+const MAX_DIMENSION = 2048;
 function getErrorDisplay(error, showTechnicalDetails) {
     if (!error) {
         return {
@@ -24,6 +29,9 @@ function getErrorDisplay(error, showTechnicalDetails) {
     else if (status === 401) {
         message = 'Verification is not configured correctly.';
     }
+    else if (status === 413) {
+        message = 'Image is too large. Please try again — the photo will be resized automatically.';
+    }
     else if (status === 429) {
         message = 'Verification is temporarily unavailable. Please try again.';
     }
@@ -50,13 +58,10 @@ function getErrorDisplay(error, showTechnicalDetails) {
  *
  * @example
  * ```tsx
- * const { verifyMultipart } = useVerifyAI({
- *   apiKey: 'vai_...',
- *   enableOnDeviceML: true,
- * });
+ * const { verify } = useVerifyAI({ apiKey: 'vai_...' });
  *
  * <VerifyAIScanner
- *   onCapture={(imageUri) => verifyMultipart({ imageUri, policy: 'scooter_parking' })}
+ *   onCapture={(base64) => verify({ image: base64, policy: 'scooter_parking' })}
  *   onResult={(result) => {
  *     if (result.is_compliant) navigation.navigate('Success');
  *   }}
@@ -157,19 +162,89 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
         setResult(null);
         setLastError(null);
         try {
-            const photo = await cameraRef.current.takePictureAsync({
-                quality: 0.8,
-                exif: false,
-            });
-            if (!photo?.uri) {
-                throw new Error('Failed to capture photo');
+            // --- Capture + best-effort resize ---
+            // Strategy: try to dynamically import expo-image-manipulator.
+            //   If available → resize to MAX_DIMENSION, EXIF-normalize, return base64.
+            //   If not available → use expo-camera's built-in base64 at lower quality.
+            // This keeps expo-image-manipulator as an *optional* dependency.
+            let base64;
+            let origWidth = 0;
+            let origHeight = 0;
+            let processedWidth = 0;
+            let processedHeight = 0;
+            let didResize = false;
+            let ImageManipulator = null;
+            try {
+                ImageManipulator = await import('expo-image-manipulator');
+            }
+            catch {
+                // Not installed — fall back to camera-only base64 below
+            }
+            if (ImageManipulator) {
+                // Capture without base64 — ImageManipulator will produce it after resize.
+                const photo = await cameraRef.current.takePictureAsync({
+                    quality: 0.8,
+                    exif: false,
+                });
+                if (!photo?.uri) {
+                    throw new Error('Failed to capture photo');
+                }
+                origWidth = photo.width ?? 0;
+                origHeight = photo.height ?? 0;
+                const actions = [];
+                if (origWidth > MAX_DIMENSION || origHeight > MAX_DIMENSION) {
+                    if (origWidth >= origHeight) {
+                        actions.push({ resize: { width: MAX_DIMENSION } });
+                    }
+                    else {
+                        actions.push({ resize: { height: MAX_DIMENSION } });
+                    }
+                    didResize = true;
+                }
+                const normalized = await ImageManipulator.manipulateAsync(photo.uri, actions, {
+                    compress: MANIPULATOR_QUALITY,
+                    format: ImageManipulator.SaveFormat.JPEG,
+                    base64: true,
+                });
+                if (!normalized.base64) {
+                    throw new Error('ImageManipulator did not return base64');
+                }
+                base64 = normalized.base64;
+                processedWidth = normalized.width;
+                processedHeight = normalized.height;
             }
-            // Normalize EXIF orientation into actual pixels so the server
-            // receives an upright image (Gemini and other vision APIs ignore EXIF).
-            // An empty actions array makes ImageManipulator apply EXIF rotation only.
-            const normalized = await ImageManipulator.manipulateAsync(photo.uri, [], { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG });
+            else {
+                // Fallback: capture base64 directly from the camera at reduced quality.
+                // No resize is possible without ImageManipulator, but the lower quality
+                // significantly reduces payload size (e.g. 50 MP @ 0.5 ≈ 3–4 MB base64).
+                const photo = await cameraRef.current.takePictureAsync({
+                    base64: true,
+                    quality: FALLBACK_QUALITY,
+                    exif: false,
+                });
+                if (!photo?.base64) {
+                    throw new Error('Failed to capture photo');
+                }
+                origWidth = photo.width ?? 0;
+                origHeight = photo.height ?? 0;
+                processedWidth = origWidth;
+                processedHeight = origHeight;
+                base64 = photo.base64;
+            }
+            // Best-effort telemetry — never blocks capture
+            telemetry?.track('image_processed', {
+                component: 'scanner',
+                metadata: {
+                    original_width: origWidth,
+                    original_height: origHeight,
+                    processed_width: processedWidth,
+                    processed_height: processedHeight,
+                    resized: didResize ? 1 : 0,
+                    has_manipulator: ImageManipulator ? 1 : 0,
+                },
+            });
             setStatus('processing');
-            const verificationResult = await onCapture(normalized.uri);
+            const verificationResult = await onCapture(base64);
             attemptCountRef.current++;
             if (verificationResult) {
                 const maxAttempts = overlay?.maxAttempts;

package/lib/telemetry/TelemetryReporter.d.ts

@@ -12,6 +12,7 @@ export declare class TelemetryReporter {
         component?: string;
         error?: unknown;
         errorCode?: string;
+        metadata?: Record<string, string | number>;
     }): void;
     /** Flush all buffered events immediately. Returns a promise but never rejects. */
     flush(): Promise<void>;

package/lib/telemetry/TelemetryReporter.js

@@ -42,6 +42,7 @@ export class TelemetryReporter {
                 error_message: errorMessage?.slice(0, 1000),
                 error_stack: errorObj?.stack?.slice(0, 2000),
                 error_code: opts.errorCode,
+                metadata: opts.metadata,
                 sdk_platform: Platform.OS,
                 sdk_version: SDK_VERSION,
                 os_name: Platform.OS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@switchlabs/verify-ai-react-native",
-  "version": "1.1.1",
+  "version": "1.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

@@ -11,7 +11,6 @@ import {
   CameraView,
   useCameraPermissions,
 } from 'expo-camera';
-import * as ImageManipulator from 'expo-image-manipulator';
 import type {
   VerificationResult,
   ScannerStatus,
@@ -20,9 +19,16 @@ import type {
 import { useTelemetry } from '../telemetry/TelemetryContext';
 import type { TelemetryReporter } from '../telemetry/TelemetryReporter';
 
+/** Quality used when expo-image-manipulator is not available (lower = smaller). */
+const FALLBACK_QUALITY = 0.5;
+/** Quality used when expo-image-manipulator IS available (resize handles size). */
+const MANIPULATOR_QUALITY = 0.7;
+/** Max dimension (px) on longest side when resize is available. */
+const MAX_DIMENSION = 2048;
+
 export interface VerifyAIScannerProps {
-  /** Called with the image URI when the user captures a photo. */
-  onCapture: (imageUri: string) => Promise<VerificationResult | null>;
+  /** Called with base64 image data when the user captures a photo. */
+  onCapture: (base64: string) => Promise<VerificationResult | null>;
   /** Called when a terminal verification result is reached. */
   onResult?: (result: VerificationResult) => void;
   /** Called when an error occurs. */
@@ -72,6 +78,8 @@ function getErrorDisplay(error: ErrorWithDetails | null, showTechnicalDetails?:
     message = 'Network request failed. Check your connection and try again.';
   } else if (status === 401) {
     message = 'Verification is not configured correctly.';
+  } else if (status === 413) {
+    message = 'Image is too large. Please try again — the photo will be resized automatically.';
   } else if (status === 429) {
     message = 'Verification is temporarily unavailable. Please try again.';
   } else if (status !== undefined && status >= 500) {
@@ -101,13 +109,10 @@ function getErrorDisplay(error: ErrorWithDetails | null, showTechnicalDetails?:
  *
  * @example
  * ```tsx
- * const { verifyMultipart } = useVerifyAI({
- *   apiKey: 'vai_...',
- *   enableOnDeviceML: true,
- * });
+ * const { verify } = useVerifyAI({ apiKey: 'vai_...' });
  *
  * <VerifyAIScanner
- *   onCapture={(imageUri) => verifyMultipart({ imageUri, policy: 'scooter_parking' })}
+ *   onCapture={(base64) => verify({ image: base64, policy: 'scooter_parking' })}
  *   onResult={(result) => {
  *     if (result.is_compliant) navigation.navigate('Success');
  *   }}
@@ -230,26 +235,102 @@ export function VerifyAIScanner({
     setLastError(null);
 
     try {
-      const photo = await cameraRef.current.takePictureAsync({
-        quality: 0.8,
-        exif: false,
-      });
+      // --- Capture + best-effort resize ---
+      // Strategy: try to dynamically import expo-image-manipulator.
+      //   If available → resize to MAX_DIMENSION, EXIF-normalize, return base64.
+      //   If not available → use expo-camera's built-in base64 at lower quality.
+      // This keeps expo-image-manipulator as an *optional* dependency.
+      let base64: string;
+      let origWidth = 0;
+      let origHeight = 0;
+      let processedWidth = 0;
+      let processedHeight = 0;
+      let didResize = false;
+
+      let ImageManipulator: typeof import('expo-image-manipulator') | null = null;
+      try {
+        ImageManipulator = await import('expo-image-manipulator');
+      } catch {
+        // Not installed — fall back to camera-only base64 below
+      }
+
+      if (ImageManipulator) {
+        // Capture without base64 — ImageManipulator will produce it after resize.
+        const photo = await cameraRef.current.takePictureAsync({
+          quality: 0.8,
+          exif: false,
+        });
+
+        if (!photo?.uri) {
+          throw new Error('Failed to capture photo');
+        }
+
+        origWidth = photo.width ?? 0;
+        origHeight = photo.height ?? 0;
+
+        const actions: Array<{ resize: { width?: number; height?: number } }> = [];
+        if (origWidth > MAX_DIMENSION || origHeight > MAX_DIMENSION) {
+          if (origWidth >= origHeight) {
+            actions.push({ resize: { width: MAX_DIMENSION } });
+          } else {
+            actions.push({ resize: { height: MAX_DIMENSION } });
+          }
+          didResize = true;
+        }
+
+        const normalized = await ImageManipulator.manipulateAsync(
+          photo.uri,
+          actions,
+          {
+            compress: MANIPULATOR_QUALITY,
+            format: ImageManipulator.SaveFormat.JPEG,
+            base64: true,
+          },
+        );
+
+        if (!normalized.base64) {
+          throw new Error('ImageManipulator did not return base64');
+        }
+
+        base64 = normalized.base64;
+        processedWidth = normalized.width;
+        processedHeight = normalized.height;
+      } else {
+        // Fallback: capture base64 directly from the camera at reduced quality.
+        // No resize is possible without ImageManipulator, but the lower quality
+        // significantly reduces payload size (e.g. 50 MP @ 0.5 ≈ 3–4 MB base64).
+        const photo = await cameraRef.current.takePictureAsync({
+          base64: true,
+          quality: FALLBACK_QUALITY,
+          exif: false,
+        });
 
-      if (!photo?.uri) {
-        throw new Error('Failed to capture photo');
+        if (!photo?.base64) {
+          throw new Error('Failed to capture photo');
+        }
+
+        origWidth = photo.width ?? 0;
+        origHeight = photo.height ?? 0;
+        processedWidth = origWidth;
+        processedHeight = origHeight;
+        base64 = photo.base64;
       }
 
-      // Normalize EXIF orientation into actual pixels so the server
-      // receives an upright image (Gemini and other vision APIs ignore EXIF).
-      // An empty actions array makes ImageManipulator apply EXIF rotation only.
-      const normalized = await ImageManipulator.manipulateAsync(
-        photo.uri,
-        [],
-        { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG },
-      );
+      // Best-effort telemetry — never blocks capture
+      telemetry?.track('image_processed', {
+        component: 'scanner',
+        metadata: {
+          original_width: origWidth,
+          original_height: origHeight,
+          processed_width: processedWidth,
+          processed_height: processedHeight,
+          resized: didResize ? 1 : 0,
+          has_manipulator: ImageManipulator ? 1 : 0,
+        },
+      });
 
       setStatus('processing');
-      const verificationResult = await onCapture(normalized.uri);
+      const verificationResult = await onCapture(base64);
 
       attemptCountRef.current++;
 

package/src/telemetry/TelemetryReporter.ts

@@ -7,6 +7,7 @@ interface TelemetryEvent {
   error_message?: string;
   error_stack?: string;
   error_code?: string;
+  metadata?: Record<string, string | number>;
   sdk_platform: string;
   sdk_version: string;
   os_name: string;
@@ -51,6 +52,7 @@ export class TelemetryReporter {
       component?: string;
       error?: unknown;
       errorCode?: string;
+      metadata?: Record<string, string | number>;
     } = {},
   ): void {
     if (this.disposed) return;
@@ -80,6 +82,7 @@ export class TelemetryReporter {
         error_message: errorMessage?.slice(0, 1000),
         error_stack: errorObj?.stack?.slice(0, 2000),
         error_code: opts.errorCode,
+        metadata: opts.metadata,
         sdk_platform: Platform.OS,
         sdk_version: SDK_VERSION,
         os_name: Platform.OS,