@switchlabs/verify-ai-react-native 2.4.3 → 2.4.5

package/lib/client/index.js

@@ -1,7 +1,7 @@
 import { TelemetryReporter } from '../telemetry/TelemetryReporter';
 import { SDK_VERSION } from '../version';
 const DEFAULT_BASE_URL = 'https://verify.switchlabs.dev/api/v1';
-const DEFAULT_TIMEOUT = 30000;
+const DEFAULT_TIMEOUT = 60000;
 const VEHICLE_TYPE_LABELS = {
     scooter: 'Scooter',
     'e-bike': 'E-Bike',

package/lib/components/VerifyAIScanner.js

@@ -89,15 +89,19 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
     const cameraReadyRef = useRef(false);
     const cameraInitFailedRef = useRef(false);
     const permissionDeniedTrackedRef = useRef(false);
-    // Track dimensions to detect orientation changes and remount camera
+    // Track dimensions for orientation detection and responsive layout
     const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const isLandscape = windowWidth > windowHeight;
     const prevDimensionsRef = useRef({ width: windowWidth, height: windowHeight });
+    // Detect orientation changes and remount camera after rotation settles.
+    // On iOS, AVCaptureVideoPreviewLayer distorts if remounted during the rotation
+    // animation — the native preview layer initializes with transitional bounds.
+    // A short delay lets the layout stabilize before creating a fresh CameraView.
     useEffect(() => {
         const prev = prevDimensionsRef.current;
         const orientationChanged = (prev.width > prev.height) !== (windowWidth > windowHeight);
         prevDimensionsRef.current = { width: windowWidth, height: windowHeight };
         if (orientationChanged && !terminated) {
-            // Force camera remount to fix preview distortion on iOS
             telemetry?.track('camera_orientation_remount', {
                 component: 'scanner',
                 metadata: {
@@ -107,7 +111,12 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
             });
             setCameraReady(false);
             cameraReadyRef.current = false;
-            setCameraKey((k) => k + 1);
+            // Delay remount so iOS rotation animation completes before the new
+            // AVCaptureVideoPreviewLayer initializes with the final frame bounds.
+            const timer = setTimeout(() => {
+                setCameraKey((k) => k + 1);
+            }, 400);
+            return () => clearTimeout(timer);
         }
     }, [windowWidth, windowHeight, terminated]);
     // Resume camera when app returns from background/inactive (e.g. notification bar)
@@ -360,24 +369,31 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
         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" }) })] }));
     }
     const showBottomCard = status === 'success' || status === 'error';
-    return (_jsx(View, { style: [styles.container, style], children: _jsx(CameraView, { ref: cameraRef, style: styles.camera, facing: "back", enableTorch: !terminated && enableTorch, onCameraReady: onCameraReady, onMountError: onMountError, 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 && (_jsxs(View, { style: styles.guideContainer, children: [_jsxs(View, { style: [
+    return (_jsx(View, { style: [styles.container, style], children: _jsx(CameraView, { ref: cameraRef, style: styles.camera, facing: "back", enableTorch: !terminated && enableTorch, onCameraReady: onCameraReady, onMountError: onMountError, children: _jsxs(View, { style: styles.overlay, children: [overlay?.title && (_jsx(View, { style: [styles.topBar, isLandscape && styles.topBarLandscape], children: _jsx(Text, { style: styles.titleText, children: overlay.title }) })), overlay?.showGuideFrame && (_jsxs(View, { style: [styles.guideContainer, isLandscape && styles.guideContainerLandscape], children: [_jsxs(View, { style: [
                                     styles.guideFrame,
+                                    isLandscape && styles.guideFrameLandscape,
                                     overlay.guideFrameAspectRatio
                                         ? { aspectRatio: overlay.guideFrameAspectRatio }
                                         : undefined,
-                                ], children: [overlay.guideOverlayContent && (_jsx(View, { style: [StyleSheet.absoluteFill, { opacity: overlay.guideOverlayOpacity ?? 0.3 }], children: overlay.guideOverlayContent })), _jsx(View, { style: [styles.corner, styles.cornerTopLeft, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] }), _jsx(View, { style: [styles.corner, styles.cornerTopRight, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] }), _jsx(View, { style: [styles.corner, styles.cornerBottomLeft, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] }), _jsx(View, { style: [styles.corner, styles.cornerBottomRight, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] })] }), overlay.guideCaption && (_jsx(Text, { style: styles.guideCaptionText, children: overlay.guideCaption }))] })), status === 'processing' && (_jsxs(View, { style: styles.processingOverlay, children: [_jsx(ActivityIndicator, { size: "large", color: "#fff" }), _jsx(Text, { style: styles.statusText, children: overlay?.processingMessage || '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: [
+                                ], children: [overlay.guideOverlayContent && (_jsx(View, { style: [StyleSheet.absoluteFill, { opacity: overlay.guideOverlayOpacity ?? 0.3 }], children: overlay.guideOverlayContent })), _jsx(View, { style: [styles.corner, styles.cornerTopLeft, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] }), _jsx(View, { style: [styles.corner, styles.cornerTopRight, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] }), _jsx(View, { style: [styles.corner, styles.cornerBottomLeft, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] }), _jsx(View, { style: [styles.corner, styles.cornerBottomRight, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined] })] }), overlay.guideCaption && (_jsx(Text, { style: styles.guideCaptionText, children: overlay.guideCaption }))] })), status === 'processing' && (_jsxs(View, { style: styles.processingOverlay, children: [_jsx(ActivityIndicator, { size: "large", color: "#fff" }), _jsx(Text, { style: styles.statusText, children: overlay?.processingMessage || 'Analyzing photo...' })] })), showBottomCard && _jsx(View, { style: styles.cardBackdrop }), _jsxs(View, { style: [styles.bottomArea, isLandscape && styles.bottomAreaLandscape], 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,
-                                                    result.is_compliant && overlay?.theme?.successColor ? { backgroundColor: overlay.theme.successColor } : undefined,
-                                                    !result.is_compliant && overlay?.theme?.failureColor ? { backgroundColor: overlay.theme.failureColor } : undefined,
-                                                ], children: _jsx(Text, { style: styles.resultIcon, children: result.is_compliant ? '\u2713' : '\u2717' }) }), _jsx(Text, { style: [
+                                                    exhausted
+                                                        ? styles.resultIconExhausted
+                                                        : result.is_compliant ? styles.resultIconPass : styles.resultIconFail,
+                                                    !exhausted && result.is_compliant && overlay?.theme?.successColor ? { backgroundColor: overlay.theme.successColor } : undefined,
+                                                    !exhausted && !result.is_compliant && overlay?.theme?.failureColor ? { backgroundColor: overlay.theme.failureColor } : undefined,
+                                                ], children: _jsx(Text, { style: styles.resultIcon, children: exhausted ? '\u2139' : result.is_compliant ? '\u2713' : '\u2717' }) }), _jsx(Text, { style: [
                                                     styles.resultLabel,
-                                                    result.is_compliant ? styles.resultLabelPass : styles.resultLabelFail,
-                                                    result.is_compliant && overlay?.theme?.successColor ? { color: overlay.theme.successColor } : undefined,
-                                                    !result.is_compliant && overlay?.theme?.failureColor ? { color: overlay.theme.failureColor } : undefined,
-                                                ], children: result.is_compliant
-                                                    ? (overlay?.successMessage || 'Verified')
-                                                    : (overlay?.failureMessage || 'Not Verified') })] }), _jsx(Text, { style: styles.feedbackText, children: result.feedback })] })), status === 'error' && (() => {
+                                                    exhausted
+                                                        ? styles.resultLabelExhausted
+                                                        : result.is_compliant ? styles.resultLabelPass : styles.resultLabelFail,
+                                                    !exhausted && result.is_compliant && overlay?.theme?.successColor ? { color: overlay.theme.successColor } : undefined,
+                                                    !exhausted && !result.is_compliant && overlay?.theme?.failureColor ? { color: overlay.theme.failureColor } : undefined,
+                                                ], children: exhausted
+                                                    ? (overlay?.exhaustedMessage || 'Submitted for review')
+                                                    : result.is_compliant
+                                                        ? (overlay?.successMessage || 'Verified')
+                                                        : (overlay?.failureMessage || 'Not Verified') })] }), _jsx(Text, { style: styles.feedbackText, children: result.feedback })] })), status === 'error' && (() => {
                                 let errorTitle;
                                 let errorMessage;
                                 if (exhausted) {
@@ -430,6 +446,9 @@ const styles = StyleSheet.create({
         paddingHorizontal: 20,
         alignItems: 'center',
     },
+    topBarLandscape: {
+        paddingTop: 16,
+    },
     titleText: {
         color: '#fff',
         fontSize: 18,
@@ -442,6 +461,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         paddingHorizontal: 40,
     },
+    guideContainerLandscape: {
+        paddingHorizontal: 80,
+    },
     guideCaptionText: {
         color: 'rgba(255,255,255,0.8)',
         fontSize: 13,
@@ -454,6 +476,11 @@ const styles = StyleSheet.create({
         width: '100%',
         aspectRatio: 4 / 3,
     },
+    guideFrameLandscape: {
+        width: undefined,
+        height: '100%',
+        aspectRatio: 4 / 3,
+    },
     corner: {
         position: 'absolute',
         width: CORNER_SIZE,
@@ -496,6 +523,9 @@ const styles = StyleSheet.create({
         paddingBottom: 40,
         alignItems: 'center',
     },
+    bottomAreaLandscape: {
+        paddingBottom: 16,
+    },
     instructionsText: {
         color: 'rgba(255, 255, 255, 0.8)',
         fontSize: 14,
@@ -572,6 +602,9 @@ const styles = StyleSheet.create({
     resultIconError: {
         backgroundColor: '#f59e0b',
     },
+    resultIconExhausted: {
+        backgroundColor: '#f59e0b',
+    },
     resultIcon: {
         color: '#fff',
         fontSize: 20,
@@ -590,6 +623,9 @@ const styles = StyleSheet.create({
     resultLabelError: {
         color: '#b45309',
     },
+    resultLabelExhausted: {
+        color: '#92400e',
+    },
     feedbackText: {
         color: '#4b5563',
         fontSize: 15,

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.4.3";
+export declare const SDK_VERSION = "2.4.5";

package/lib/version.js

@@ -1 +1 @@
-export const SDK_VERSION = '2.4.3';
+export const SDK_VERSION = '2.4.5';

package/package.json

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

package/src/client/index.ts

@@ -13,7 +13,7 @@ import { TelemetryReporter } from '../telemetry/TelemetryReporter';
 import { SDK_VERSION } from '../version';
 
 const DEFAULT_BASE_URL = 'https://verify.switchlabs.dev/api/v1';
-const DEFAULT_TIMEOUT = 30000;
+const DEFAULT_TIMEOUT = 60000;
 
 const VEHICLE_TYPE_LABELS: Record<string, string> = {
   scooter: 'Scooter',

package/src/components/VerifyAIScanner.tsx

@@ -154,10 +154,15 @@ export function VerifyAIScanner({
   const cameraInitFailedRef = useRef(false);
   const permissionDeniedTrackedRef = useRef(false);
 
-  // Track dimensions to detect orientation changes and remount camera
+  // Track dimensions for orientation detection and responsive layout
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const isLandscape = windowWidth > windowHeight;
   const prevDimensionsRef = useRef({ width: windowWidth, height: windowHeight });
 
+  // Detect orientation changes and remount camera after rotation settles.
+  // On iOS, AVCaptureVideoPreviewLayer distorts if remounted during the rotation
+  // animation — the native preview layer initializes with transitional bounds.
+  // A short delay lets the layout stabilize before creating a fresh CameraView.
   useEffect(() => {
     const prev = prevDimensionsRef.current;
     const orientationChanged =
@@ -165,7 +170,6 @@ export function VerifyAIScanner({
     prevDimensionsRef.current = { width: windowWidth, height: windowHeight };
 
     if (orientationChanged && !terminated) {
-      // Force camera remount to fix preview distortion on iOS
       telemetry?.track('camera_orientation_remount', {
         component: 'scanner',
         metadata: {
@@ -175,7 +179,13 @@ export function VerifyAIScanner({
       });
       setCameraReady(false);
       cameraReadyRef.current = false;
-      setCameraKey((k) => k + 1);
+
+      // Delay remount so iOS rotation animation completes before the new
+      // AVCaptureVideoPreviewLayer initializes with the final frame bounds.
+      const timer = setTimeout(() => {
+        setCameraKey((k) => k + 1);
+      }, 400);
+      return () => clearTimeout(timer);
     }
   }, [windowWidth, windowHeight, terminated]);
 
@@ -480,16 +490,17 @@ export function VerifyAIScanner({
         {/* Overlay */}
         <View style={styles.overlay}>
           {overlay?.title && (
-            <View style={styles.topBar}>
+            <View style={[styles.topBar, isLandscape && styles.topBarLandscape]}>
               <Text style={styles.titleText}>{overlay.title}</Text>
             </View>
           )}
 
           {overlay?.showGuideFrame && (
-            <View style={styles.guideContainer}>
+            <View style={[styles.guideContainer, isLandscape && styles.guideContainerLandscape]}>
               <View
                 style={[
                   styles.guideFrame,
+                  isLandscape && styles.guideFrameLandscape,
                   overlay.guideFrameAspectRatio
                     ? { aspectRatio: overlay.guideFrameAspectRatio }
                     : undefined,
@@ -527,33 +538,39 @@ export function VerifyAIScanner({
           {showBottomCard && <View style={styles.cardBackdrop} />}
 
           {/* Bottom area: instructions + capture button OR result card */}
-          <View style={styles.bottomArea}>
+          <View style={[styles.bottomArea, isLandscape && styles.bottomAreaLandscape]}>
             {status === 'success' && result && (
               <View style={styles.resultCard}>
                 <View style={styles.resultCardHeader}>
                   <View
                     style={[
                       styles.resultIconCircle,
-                      result.is_compliant ? styles.resultIconPass : styles.resultIconFail,
-                      result.is_compliant && overlay?.theme?.successColor ? { backgroundColor: overlay.theme.successColor } : undefined,
-                      !result.is_compliant && overlay?.theme?.failureColor ? { backgroundColor: overlay.theme.failureColor } : undefined,
+                      exhausted
+                        ? styles.resultIconExhausted
+                        : result.is_compliant ? styles.resultIconPass : styles.resultIconFail,
+                      !exhausted && result.is_compliant && overlay?.theme?.successColor ? { backgroundColor: overlay.theme.successColor } : undefined,
+                      !exhausted && !result.is_compliant && overlay?.theme?.failureColor ? { backgroundColor: overlay.theme.failureColor } : undefined,
                     ]}
                   >
                     <Text style={styles.resultIcon}>
-                      {result.is_compliant ? '\u2713' : '\u2717'}
+                      {exhausted ? '\u2139' : result.is_compliant ? '\u2713' : '\u2717'}
                     </Text>
                   </View>
                   <Text
                     style={[
                       styles.resultLabel,
-                      result.is_compliant ? styles.resultLabelPass : styles.resultLabelFail,
-                      result.is_compliant && overlay?.theme?.successColor ? { color: overlay.theme.successColor } : undefined,
-                      !result.is_compliant && overlay?.theme?.failureColor ? { color: overlay.theme.failureColor } : undefined,
+                      exhausted
+                        ? styles.resultLabelExhausted
+                        : result.is_compliant ? styles.resultLabelPass : styles.resultLabelFail,
+                      !exhausted && result.is_compliant && overlay?.theme?.successColor ? { color: overlay.theme.successColor } : undefined,
+                      !exhausted && !result.is_compliant && overlay?.theme?.failureColor ? { color: overlay.theme.failureColor } : undefined,
                     ]}
                   >
-                    {result.is_compliant
-                      ? (overlay?.successMessage || 'Verified')
-                      : (overlay?.failureMessage || 'Not Verified')}
+                    {exhausted
+                      ? (overlay?.exhaustedMessage || 'Submitted for review')
+                      : result.is_compliant
+                        ? (overlay?.successMessage || 'Verified')
+                        : (overlay?.failureMessage || 'Not Verified')}
                   </Text>
                 </View>
                 <Text style={styles.feedbackText}>{result.feedback}</Text>
@@ -653,6 +670,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     alignItems: 'center',
   },
+  topBarLandscape: {
+    paddingTop: 16,
+  },
   titleText: {
     color: '#fff',
     fontSize: 18,
@@ -666,6 +686,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 40,
   },
+  guideContainerLandscape: {
+    paddingHorizontal: 80,
+  },
   guideCaptionText: {
     color: 'rgba(255,255,255,0.8)',
     fontSize: 13,
@@ -678,6 +701,11 @@ const styles = StyleSheet.create({
     width: '100%',
     aspectRatio: 4 / 3,
   },
+  guideFrameLandscape: {
+    width: undefined,
+    height: '100%',
+    aspectRatio: 4 / 3,
+  },
   corner: {
     position: 'absolute',
     width: CORNER_SIZE,
@@ -721,6 +749,9 @@ const styles = StyleSheet.create({
     paddingBottom: 40,
     alignItems: 'center',
   },
+  bottomAreaLandscape: {
+    paddingBottom: 16,
+  },
   instructionsText: {
     color: 'rgba(255, 255, 255, 0.8)',
     fontSize: 14,
@@ -799,6 +830,9 @@ const styles = StyleSheet.create({
   resultIconError: {
     backgroundColor: '#f59e0b',
   },
+  resultIconExhausted: {
+    backgroundColor: '#f59e0b',
+  },
   resultIcon: {
     color: '#fff',
     fontSize: 20,
@@ -817,6 +851,9 @@ const styles = StyleSheet.create({
   resultLabelError: {
     color: '#b45309',
   },
+  resultLabelExhausted: {
+    color: '#92400e',
+  },
   feedbackText: {
     color: '#4b5563',
     fontSize: 15,

package/src/version.ts

@@ -1 +1 @@
-export const SDK_VERSION = '2.4.3';
+export const SDK_VERSION = '2.4.5';