@switchlabs/verify-ai-react-native 2.4.7 → 2.4.9

package/lib/components/VerifyAIScanner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, useCallback, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, AppState, useWindowDimensions, } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, AppState, Platform, useWindowDimensions, } from 'react-native';
 import { CameraView, useCameraPermissions, } from 'expo-camera';
 import { useTelemetry } from '../telemetry/TelemetryContext';
 /** Quality used when expo-image-manipulator is not available (lower = smaller). */
@@ -93,6 +93,66 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
     const { width: windowWidth, height: windowHeight } = useWindowDimensions();
     const isLandscape = windowWidth > windowHeight;
     const prevDimensionsRef = useRef({ width: windowWidth, height: windowHeight });
+    // Track physical device orientation independently of interface orientation.
+    // When the host app is orientation-locked, window dimensions don't change on
+    // rotation. iOS uses expo-camera's responsive-orientation callback; Android
+    // uses the accelerometer via expo-sensors (the callback is iOS-only). Either
+    // way we rotate the overlay UI to stay readable from the user's viewpoint.
+    const [physicalOrientation, setPhysicalOrientation] = useState('portrait');
+    useEffect(() => {
+        if (Platform.OS !== 'android')
+            return;
+        let subscription = null;
+        let cancelled = false;
+        let lastOrientation = 'portrait';
+        (async () => {
+            let Accelerometer = null;
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-require-imports
+                const mod = require('expo-sensors');
+                Accelerometer = mod?.Accelerometer ?? null;
+            }
+            catch {
+                return;
+            }
+            if (cancelled || !Accelerometer)
+                return;
+            Accelerometer.setUpdateInterval(500);
+            subscription = Accelerometer.addListener(({ x, y }) => {
+                let next;
+                if (Math.abs(x) > Math.abs(y) + 0.2) {
+                    next = x > 0 ? 'landscapeRight' : 'landscapeLeft';
+                }
+                else if (Math.abs(y) > Math.abs(x) + 0.2) {
+                    next = y > 0 ? 'portraitUpsideDown' : 'portrait';
+                }
+                else {
+                    return; // ambiguous tilt — ignore
+                }
+                if (next !== lastOrientation) {
+                    lastOrientation = next;
+                    setPhysicalOrientation(next);
+                }
+            });
+        })();
+        return () => {
+            cancelled = true;
+            subscription?.remove();
+        };
+    }, []);
+    const overlayRotationDeg = (() => {
+        switch (physicalOrientation) {
+            case 'landscapeLeft':
+                return 90;
+            case 'landscapeRight':
+                return -90;
+            case 'portraitUpsideDown':
+                return 180;
+            case 'portrait':
+            default:
+                return 0;
+        }
+    })();
     // 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.
@@ -369,13 +429,21 @@ 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, responsiveOrientationWhenOrientationLocked: true, 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: [
+    return (_jsx(View, { style: [styles.container, style], children: _jsx(CameraView, { ref: cameraRef, style: styles.camera, facing: "back", enableTorch: !terminated && enableTorch, onCameraReady: onCameraReady, onMountError: onMountError, responsiveOrientationWhenOrientationLocked: true, onResponsiveOrientationChanged: (event) => {
+                setPhysicalOrientation(event.orientation);
+            }, children: _jsxs(View, { style: styles.overlay, children: [overlay?.title && (_jsx(View, { style: [styles.topBar, isLandscape && styles.topBarLandscape], children: _jsx(Text, { style: [
+                                styles.titleText,
+                                { transform: [{ rotate: `${overlayRotationDeg}deg` }] },
+                            ], 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, isLandscape && styles.bottomAreaLandscape], 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,
+                                    { transform: [{ rotate: `${overlayRotationDeg}deg` }] },
+                                ], 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,
                                                     exhausted
                                                         ? styles.resultIconExhausted
@@ -419,7 +487,10 @@ export function VerifyAIScanner({ onCapture, onResult, onError, overlay, style,
                                     errorMessage = display.message;
                                 }
                                 return (_jsxs(View, { style: styles.resultCard, children: [_jsxs(View, { style: styles.resultCardHeader, children: [_jsx(View, { style: [styles.resultIconCircle, styles.resultIconError, overlay?.theme?.failureColor ? { backgroundColor: overlay.theme.failureColor } : undefined], children: _jsx(Text, { style: styles.resultIcon, children: "!" }) }), _jsx(Text, { style: [styles.resultLabel, styles.resultLabelError, overlay?.theme?.failureColor ? { color: overlay.theme.failureColor } : undefined], children: errorTitle })] }), _jsx(Text, { style: styles.feedbackText, children: errorMessage })] }));
-                            })(), !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: [
+                            })(), !showBottomCard && (_jsxs(_Fragment, { children: [overlay?.instructions && status === 'idle' && (_jsx(Text, { style: [
+                                            styles.instructionsText,
+                                            { transform: [{ rotate: `${overlayRotationDeg}deg` }] },
+                                        ], children: overlay.instructions })), showCaptureButton && (_jsx(View, { style: styles.captureButtonRow, children: _jsx(TouchableOpacity, { style: [
                                                 styles.captureButton,
                                                 overlay?.theme?.captureButtonColor ? { borderColor: overlay.theme.captureButtonColor } : undefined,
                                                 (!cameraReady || status === 'capturing' || status === 'processing') &&

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.4.7";
+export declare const SDK_VERSION = "2.4.9";

package/lib/version.js

@@ -1 +1 @@
-export const SDK_VERSION = '2.4.7';
+export const SDK_VERSION = '2.4.9';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@switchlabs/verify-ai-react-native",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "description": "React Native SDK for Verify AI - photo verification with AI vision processing",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -43,6 +43,7 @@
     "expo-camera": ">=15.0.0",
     "expo-file-system": ">=17.0.0",
     "expo-image-manipulator": ">=12.0.0",
+    "expo-sensors": ">=13.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-fast-tflite": ">=1.0.0"
@@ -54,6 +55,9 @@
     "expo-image-manipulator": {
       "optional": true
     },
+    "expo-sensors": {
+      "optional": true
+    },
     "@react-native-async-storage/async-storage": {
       "optional": true
     },

package/src/components/VerifyAIScanner.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   ActivityIndicator,
   AppState,
+  Platform,
   useWindowDimensions,
   type ViewStyle,
 } from 'react-native';
@@ -159,6 +160,74 @@ export function VerifyAIScanner({
   const isLandscape = windowWidth > windowHeight;
   const prevDimensionsRef = useRef({ width: windowWidth, height: windowHeight });
 
+  // Track physical device orientation independently of interface orientation.
+  // When the host app is orientation-locked, window dimensions don't change on
+  // rotation. iOS uses expo-camera's responsive-orientation callback; Android
+  // uses the accelerometer via expo-sensors (the callback is iOS-only). Either
+  // way we rotate the overlay UI to stay readable from the user's viewpoint.
+  const [physicalOrientation, setPhysicalOrientation] = useState<
+    'portrait' | 'portraitUpsideDown' | 'landscapeLeft' | 'landscapeRight'
+  >('portrait');
+
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+    let subscription: { remove: () => void } | null = null;
+    let cancelled = false;
+    let lastOrientation: typeof physicalOrientation = 'portrait';
+
+    (async () => {
+      let Accelerometer: {
+        setUpdateInterval: (ms: number) => void;
+        addListener: (
+          cb: (data: { x: number; y: number; z: number }) => void,
+        ) => { remove: () => void };
+      } | null = null;
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require('expo-sensors');
+        Accelerometer = mod?.Accelerometer ?? null;
+      } catch {
+        return;
+      }
+      if (cancelled || !Accelerometer) return;
+
+      Accelerometer.setUpdateInterval(500);
+      subscription = Accelerometer.addListener(({ x, y }) => {
+        let next: typeof physicalOrientation;
+        if (Math.abs(x) > Math.abs(y) + 0.2) {
+          next = x > 0 ? 'landscapeRight' : 'landscapeLeft';
+        } else if (Math.abs(y) > Math.abs(x) + 0.2) {
+          next = y > 0 ? 'portraitUpsideDown' : 'portrait';
+        } else {
+          return; // ambiguous tilt — ignore
+        }
+        if (next !== lastOrientation) {
+          lastOrientation = next;
+          setPhysicalOrientation(next);
+        }
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+      subscription?.remove();
+    };
+  }, []);
+
+  const overlayRotationDeg = (() => {
+    switch (physicalOrientation) {
+      case 'landscapeLeft':
+        return 90;
+      case 'landscapeRight':
+        return -90;
+      case 'portraitUpsideDown':
+        return 180;
+      case 'portrait':
+      default:
+        return 0;
+    }
+  })();
+
   // 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.
@@ -495,12 +564,22 @@ export function VerifyAIScanner({
         onCameraReady={onCameraReady}
         onMountError={onMountError}
         responsiveOrientationWhenOrientationLocked
+        onResponsiveOrientationChanged={(event) => {
+          setPhysicalOrientation(event.orientation);
+        }}
       >
         {/* Overlay */}
         <View style={styles.overlay}>
           {overlay?.title && (
             <View style={[styles.topBar, isLandscape && styles.topBarLandscape]}>
-              <Text style={styles.titleText}>{overlay.title}</Text>
+              <Text
+                style={[
+                  styles.titleText,
+                  { transform: [{ rotate: `${overlayRotationDeg}deg` }] },
+                ]}
+              >
+                {overlay.title}
+              </Text>
             </View>
           )}
 
@@ -528,7 +607,14 @@ export function VerifyAIScanner({
                 <View style={[styles.corner, styles.cornerBottomRight, overlay.theme?.cornerColor ? { borderColor: overlay.theme.cornerColor } : undefined]} />
               </View>
               {overlay.guideCaption && (
-                <Text style={styles.guideCaptionText}>{overlay.guideCaption}</Text>
+                <Text
+                  style={[
+                    styles.guideCaptionText,
+                    { transform: [{ rotate: `${overlayRotationDeg}deg` }] },
+                  ]}
+                >
+                  {overlay.guideCaption}
+                </Text>
               )}
             </View>
           )}
@@ -630,7 +716,14 @@ export function VerifyAIScanner({
             {!showBottomCard && (
               <>
                 {overlay?.instructions && status === 'idle' && (
-                  <Text style={styles.instructionsText}>{overlay.instructions}</Text>
+                  <Text
+                    style={[
+                      styles.instructionsText,
+                      { transform: [{ rotate: `${overlayRotationDeg}deg` }] },
+                    ]}
+                  >
+                    {overlay.instructions}
+                  </Text>
                 )}
                 {showCaptureButton && (
                   <View style={styles.captureButtonRow}>

package/src/version.ts

@@ -1 +1 @@
-export const SDK_VERSION = '2.4.7';
+export const SDK_VERSION = '2.4.9';