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

package/lib/components/VerifyAIScanner.js

@@ -93,6 +93,24 @@ 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 — this fires via expo-camera's responsive-orientation callback
+    // so we can rotate the overlay UI to stay readable from the user's viewpoint.
+    const [physicalOrientation, setPhysicalOrientation] = useState('portrait');
+    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 +387,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, 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 +445,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.5";
+export declare const SDK_VERSION = "2.4.8";

package/lib/version.js

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

package/package.json

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

@@ -159,6 +159,28 @@ 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 — this fires via expo-camera's responsive-orientation callback
+  // so we can rotate the overlay UI to stay readable from the user's viewpoint.
+  const [physicalOrientation, setPhysicalOrientation] = useState<
+    'portrait' | 'portraitUpsideDown' | 'landscapeLeft' | 'landscapeRight'
+  >('portrait');
+
+  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.
@@ -486,12 +508,31 @@ export function VerifyAIScanner({
 
   return (
     <View style={[styles.container, style]}>
-      <CameraView key={cameraKey} ref={cameraRef} style={styles.camera} facing="back" enableTorch={!terminated && enableTorch} onCameraReady={onCameraReady} onMountError={onMountError}>
+      <CameraView
+        key={cameraKey}
+        ref={cameraRef}
+        style={styles.camera}
+        facing="back"
+        enableTorch={!terminated && enableTorch}
+        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>
           )}
 
@@ -519,7 +560,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>
           )}
@@ -621,7 +669,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.5';
+export const SDK_VERSION = '2.4.8';