@sanctum-key/react-native-sdk 1.0.53 → 1.0.54

package/src/components/EnhancedCameraView.tsx

@@ -22,6 +22,7 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   silentCaptureResult,
   isProcessing = false,
   overlayComponent,
+  captureStabilizationDelayMs = 4000,
   isScanningBarcode = false,
   onBarcodeScanned,
   barcodeTypes
@@ -32,6 +33,8 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   
   const isCapturingRef = useRef(false);
   const isProcessingRef = useRef(isProcessing);
+  const isScanningBarcodeRef = useRef(isScanningBarcode);
+  const onBarcodeScannedRef = useRef(onBarcodeScanned);
   // Ref-tracked isAnalyzing so captureSilentPhoto always reads the latest
   // value — the prop-based closure goes stale on iOS between renders.
   const isAnalyzingRef = useRef(silentCaptureResult?.isAnalyzing ?? false);
@@ -42,7 +45,7 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   const [refreshCamera] = useState(false);
   
   const [isVideoFound, setIsVideoFound] = useState(false);
-  const scannedBarcodeRef = useRef<string | null>(null);
+  const scannedBarcodeRef = useRef<{ value: string | null; emittedAt: number }>({ value: null, emittedAt: 0 });
   const containerRef = useRef<any>(null);
 
   const [appState, setAppState] = useState<AppStateStatus>(AppState.currentState);
@@ -50,8 +53,14 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   const device = useCameraDevice(cameraType);
 
   useEffect(() => { isProcessingRef.current = isProcessing; }, [isProcessing]);
+  useEffect(() => { isScanningBarcodeRef.current = isScanningBarcode; }, [isScanningBarcode]);
+  useEffect(() => { onBarcodeScannedRef.current = onBarcodeScanned; }, [onBarcodeScanned]);
   useEffect(() => { isAnalyzingRef.current = silentCaptureResult?.isAnalyzing ?? false; }, [silentCaptureResult?.isAnalyzing]);
 
+  useEffect(() => {
+    scannedBarcodeRef.current = { value: null, emittedAt: 0 };
+  }, [isScanningBarcode]);
+
   useEffect(() => {
     const subscription = AppState.addEventListener('change', nextAppState => {
       setAppState(nextAppState);
@@ -100,7 +109,12 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
     if (showCamera) checkPermissions();
   }, [showCamera, refreshCamera]);
 
-  const onInitialized = useCallback(() => setIsInitialized(true), []);
+  const onInitialized = useCallback(() => {
+    setIsInitialized(true);
+    if (isScanningBarcodeRef.current) {
+      console.log('📷 Barcode camera initialized');
+    }
+  }, []);
 
   const onCameraError = useCallback((error: any) => {
     console.warn("🎥 [Vision Camera Error Caught]:", error);
@@ -114,11 +128,15 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   const codeScanner = useCodeScanner({
     codeTypes: barcodeTypes || ['pdf-417', 'qr', 'code-128', 'code-39'],
     onCodeScanned: (codes) => {
-      if (!isProcessingRef.current && isScanningBarcode) {
+      if (!isProcessingRef.current && isScanningBarcodeRef.current) {
         for (const code of codes) {
-          if (code.value && scannedBarcodeRef.current !== code.value) {
-            scannedBarcodeRef.current = code.value;
-            onBarcodeScanned?.(code.value);
+          if (!code.value) continue;
+
+          const now = Date.now();
+          const previous = scannedBarcodeRef.current;
+          if (previous.value !== code.value || now - previous.emittedAt > 1500) {
+            scannedBarcodeRef.current = { value: code.value, emittedAt: now };
+            onBarcodeScannedRef.current?.(code.value);
             break;
           }
         }
@@ -137,8 +155,8 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
     // Web handles its own stream via WebBarcodeScanner; do not run native camera methods on web.
     if (Platform.OS === 'web') return; 
     
-    // We intentionally ignore `isInitialized`. If AVFoundation (iOS) or CameraX (Android) 
-    // aren't ready, the try/catch will handle it gracefully.
+    // The scheduling effect waits for camera initialization and a positioning
+    // grace period before this function can run.
     if (!camera.current || isProcessingRef.current || isCapturingRef.current) return;
     if (isAnalyzingRef.current) return;
 
@@ -148,8 +166,14 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
       const photo = await camera.current.takePhoto({
         enableShutterSound: false,
         flash: 'off',
-        // iOS requires aggressive compression to prevent RAM crashes during interval captures
-        ...(Platform.OS === 'ios' ? { photoCodec: 'jpeg', qualityPrioritization: 'speed' } : {})
+        ...(Platform.OS === 'ios'
+          ? {
+              photoCodec: 'jpeg' as const,
+              // Barcode stills are decoded off the live path, so preserve the
+              // fine PDF417 modules instead of favoring capture speed.
+              qualityPrioritization: isScanningBarcodeRef.current ? 'quality' as const : 'balanced' as const,
+            }
+          : {})
       });
 
       // 3. CROSS-PLATFORM PATH NORMALIZATION
@@ -172,7 +196,7 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
       onSilentCaptureRef.current?.({
         success: captureSuccess,
         path: finalPath,
-        barcode: scannedBarcodeRef.current
+        barcode: scannedBarcodeRef.current.value
       });
       
     } catch (error: any) {
@@ -185,45 +209,26 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
 
   // 5. THE UNBREAKABLE INTERVAL
   useEffect(() => {
-    // If we shouldn't scan, or if web (web handles its own stream), abort.
-    // We intentionally don't require `isInitialized` here, the try/catch inside 
-    // captureSilentPhoto handles unready cameras gracefully without breaking the loop.
-    if (!showCamera || isProcessing || Platform.OS === 'web') return; 
+    // Give autofocus/exposure and the user time to settle before the first
+    // automatic capture. A remount creates a fresh grace period for each side.
+    if (!showCamera || !isInitialized || isProcessing || Platform.OS === 'web') return;
 
     let active = true;
     let id: ReturnType<typeof setInterval>;
 
     const timer = setTimeout(() => {
       if (!active) return;
-      const intervalDelay = isScanningBarcode ? 3000 : 1500;
-      id = setInterval(captureSilentPhoto, intervalDelay);
-    }, 1500);
-
-    return () => {
-      active = false;
-      clearTimeout(timer);
-      if (id) clearInterval(id);
-    };
-  }, [showCamera, isProcessing, isScanningBarcode, captureSilentPhoto]);
-
-
-  useEffect(() => {
-    if (!showCamera || !isInitialized || isProcessing) return;
-    let active = true;
-    let id: ReturnType<typeof setInterval>;
-    
-    const timer = setTimeout(() => {
-      if (!active) return;
-      const intervalDelay = isScanningBarcode ? 3000 : 1500;
+      captureSilentPhoto();
+      const intervalDelay = isScanningBarcode ? 4500 : 3000;
       id = setInterval(captureSilentPhoto, intervalDelay);
-    }, 1500);
+    }, Math.max(0, captureStabilizationDelayMs));
 
     return () => {
       active = false;
       clearTimeout(timer);
       if (id) clearInterval(id);
     };
-  }, [showCamera, isInitialized, isProcessing, captureSilentPhoto, isScanningBarcode]);
+  }, [showCamera, isInitialized, isProcessing, isScanningBarcode, captureStabilizationDelayMs, captureSilentPhoto]);
 
   useEffect(() => {
     if (Platform.OS !== 'web' || !showCamera) return;
@@ -252,8 +257,8 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   }, [showCamera]);
 
   const handleWebBarcodeScanned = useCallback((value: string) => {
-    if (!isProcessingRef.current && value !== scannedBarcodeRef.current) {
-      scannedBarcodeRef.current = value;
+    if (!isProcessingRef.current && value !== scannedBarcodeRef.current.value) {
+      scannedBarcodeRef.current = { value, emittedAt: Date.now() };
       onBarcodeScanned?.(value);
     }
   }, [onBarcodeScanned]);
@@ -291,16 +296,22 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
         resizeMode="cover"
         isActive={showCamera && !isProcessing && appState === 'active'}
         photo={true}
+        photoQualityBalance={isScanningBarcode ? 'quality' : 'balanced'}
         video={false}
         audio={false}
         onInitialized={onInitialized}
         onError={onCameraError}
-        codeScanner={Platform.OS !== 'web' && isScanningBarcode ? codeScanner : undefined}
+        // Some Android camera levels cannot configure Preview + ImageCapture +
+        // ImageAnalysis together and fail with invalid-output-configuration.
+        // Android barcodes use the bundled full-resolution ML Kit/ZXing still
+        // decoder; iOS can retain Vision Camera's low-latency live scanner.
+        codeScanner={Platform.OS === 'ios' && isScanningBarcode ? codeScanner : undefined}
       />
       {Platform.OS === 'web' && isScanningBarcode && isVideoFound && (
         <WebBarcodeScanner
           videoRef={webVideoRef as React.RefObject<HTMLVideoElement>}
           onBarcodeScanned={handleWebBarcodeScanned}
+          formats={barcodeTypes}
           active={!isProcessingRef.current}
         />
       )}
@@ -312,4 +323,4 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: 'black' },
   permissionMessage: { color: 'white', textAlign: 'center', margin: 20, fontSize: 16 },
-});
+});

package/src/components/EnhancedCameraView.web.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
 import { EnhancedCameraViewProps } from './OverLay/type';
 import { useI18n } from '../hooks/useI18n';
+import type { CodeType } from 'react-native-vision-camera';
 // 🚨 Import the WebBarcodeScanner we built earlier
 import { WebBarcodeScanner } from './WebBarcodeScanner';
 
@@ -9,6 +10,7 @@ import { WebBarcodeScanner } from './WebBarcodeScanner';
 export interface ExtendedCameraProps extends EnhancedCameraViewProps {
   isScanningBarcode?: boolean;
   onBarcodeScanned?: (data: string) => void;
+  barcodeTypes?: CodeType[];
 }
 
 export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
@@ -34,10 +36,11 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   videoDuration = 10,
   onSilentCapture,
   silentCaptureResult,
-  captureStabilizationDelayMs = 2500,
+  captureStabilizationDelayMs = 4000,
   // 🚨 New props for barcode support
   isScanningBarcode = false,
   onBarcodeScanned,
+  barcodeTypes,
 }) => {
   const { t } = useI18n();
 
@@ -61,12 +64,16 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
 
   // 🚨 New Refs for Barcode Logic
   const isProcessingRef = useRef(silentCaptureResult?.isAnalyzing || false);
-  const scannedBarcodeRef = useRef<string | null>(null);
+  const scannedBarcodeRef = useRef<{ value: string | null; emittedAt: number }>({ value: null, emittedAt: 0 });
 
   useEffect(() => {
     isProcessingRef.current = silentCaptureResult?.isAnalyzing || false;
   }, [silentCaptureResult?.isAnalyzing]);
 
+  useEffect(() => {
+    scannedBarcodeRef.current = { value: null, emittedAt: 0 };
+  }, [isScanningBarcode]);
+
   useEffect(() => {
     if (showCamera) {
       checkPermissions();
@@ -223,8 +230,10 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   // 🚨 Memoized Callback for Barcode Decoding
   const handleWebBarcodeScanned = useCallback((value: string) => {
     console.log(`🎉 [WEB SCANNER] SUCCESS! Decoded value:`, value);
-    if (!isProcessingRef.current && value !== scannedBarcodeRef.current) {
-      scannedBarcodeRef.current = value;
+    const now = Date.now();
+    const previous = scannedBarcodeRef.current;
+    if (!isProcessingRef.current && (value !== previous.value || now - previous.emittedAt > 1500)) {
+      scannedBarcodeRef.current = { value, emittedAt: now };
       onBarcodeScanned?.(value);
     }
   }, [onBarcodeScanned]);
@@ -289,6 +298,7 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
         <WebBarcodeScanner
           videoRef={videoRef}
           onBarcodeScanned={handleWebBarcodeScanned}
+          formats={barcodeTypes}
           // Use silentCaptureResult.isAnalyzing (state) not the ref so
           // React re-renders with the correct active value
           active={isScanningBarcode && isInitialized && !(silentCaptureResult?.isAnalyzing ?? false)}
@@ -354,4 +364,4 @@ const styles = StyleSheet.create({
   bbox: { position: 'absolute', borderStyle: 'solid', backgroundColor: 'transparent' },
   analyzingContainer: { position: 'absolute', bottom: 100, alignSelf: 'center', backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 10, borderRadius: 10, zIndex: 1000 },
   analyzingText: { color: 'white', fontSize: 16, fontWeight: 'bold' },
-});
+});