@sanctum-key/react-native-sdk 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanctum-key/react-native-sdk",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "Sanctum Key React Native SDK",
   "main": "build/src/index.js",
   "types": "build/src/index.d.ts",
@@ -54,6 +54,7 @@
     "i18n-js": "4.5.1",
     "iconsax-react-nativejs": "^0.0.8",
     "react-native-qrcode-svg": "^6.3.21",
+    "react-native-worklets-core": "^1.6.3",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

package/src/components/EnhancedCameraView.tsx

@@ -1,15 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, Text, Platform } from 'react-native';
+import { View, StyleSheet, Text, Platform, AppState, AppStateStatus } from 'react-native';
 import { Camera, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
 import VisionCameraModule from '../modules/camera/VisionCameraModule';
 import { useI18n } from '../hooks/useI18n';
 import { EnhancedCameraViewProps } from './OverLay/type';
 import { WebBarcodeScanner } from './WebBarcodeScanner';
 
-export interface ExtendedCameraProps extends EnhancedCameraViewProps {
+export interface ExtendedCameraProps extends Omit<EnhancedCameraViewProps, 'onError'> {
   isScanningBarcode?: boolean;
   onBarcodeScanned?: (data: string) => void;
   barcodeTypes?: CodeType[];
+  onError?: (error: { message: string; name?: string; code?: string }) => void; 
 }
 
 export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
@@ -41,22 +42,35 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
   const scannedBarcodeRef = useRef<string | null>(null);
   const containerRef = useRef<any>(null);
 
+  const [appState, setAppState] = useState<AppStateStatus>(AppState.currentState);
+
   const device = useCameraDevice(cameraType);
 
   useEffect(() => {
     isProcessingRef.current = isProcessing;
   }, [isProcessing]);
 
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      setAppState(nextAppState);
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   const checkPermissions = async () => {
     try {
-      const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
-      if (!hasAllPermissions) {
-        const granted = await VisionCameraModule.requestAllPermissions();
-        if (!granted) {
+      let cameraStatus = Camera.getCameraPermissionStatus();
+      
+      if (cameraStatus !== 'granted') {
+        cameraStatus = await Camera.requestCameraPermission();
+        
+        if (cameraStatus !== 'granted') {
           setHasPermission(false);
           onError?.({ 
             message: t('camera.permissionRequired'),
-            name: 'NotAllowedError', // Emulate web standard for easy catching
+            name: 'NotAllowedError', 
             code: 'permission-denied'
           });
           return;
@@ -112,7 +126,12 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
       isCapturingRef.current = true;
       const photo = await camera.current.takePhoto({
         enableShutterSound: false,
-        flash: 'off'
+        flash: 'off',
+
+        ...(Platform.OS === 'ios' ? {
+          photoCodec: 'jpeg', 
+          qualityPrioritization: 'speed', 
+        } : {})
       });
       
       const result = await VisionCameraModule.processPhotoResult(photo);
@@ -210,7 +229,7 @@ export const EnhancedCameraView: React.FC<ExtendedCameraProps> = ({
         style={StyleSheet.absoluteFill}
         device={device}
         resizeMode="cover"
-        isActive={showCamera && !isProcessing}
+        isActive={showCamera && !isProcessing && appState === 'active'}
         photo={true}
         video={false}
         audio={false}

package/src/components/KYCElements/IDCardCapture.tsx

@@ -48,6 +48,34 @@ const SHORT_TO_LONG_REGION: Record<string, string> = {
   "SK": "Saskatchewan", "YT": "Yukon"
 };
 
+// 🚨 Isolates the 1-second re-renders away from the Camera!
+const ExpiringCodeTimer = ({ initialCode, language }: { initialCode: string, language: string }) => {
+  const [timeLeft, setTimeLeft] = useState(300);
+
+  useEffect(() => {
+    if (timeLeft <= 0) return;
+    const timer = setInterval(() => setTimeLeft((prev) => prev - 1), 1000);
+    return () => clearInterval(timer);
+  }, [timeLeft]);
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  if (timeLeft <= 0) return null;
+
+  return (
+    <View style={styles.activeCodeContainer}>
+      <Text style={styles.activeCodeText}>{initialCode}</Text>
+      <Text style={styles.timerText}>
+        {language === 'en' ? `Expires in ${formatTime(timeLeft)}` : `Expire dans ${formatTime(timeLeft)}`}
+      </Text>
+    </View>
+  );
+};
+
 export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
   const { t, locale } = useI18n();
   const [showCamera, setShowCamera] = useState(false);
@@ -69,54 +97,32 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   
   const scannedBarcodeRef = useRef<string | null>(null);
 
-  // 🚨 NEW: State for the expiring link code
   const [generatedCode, setGeneratedCode] = useState<string | null>(null);
   const [isGeneratingCode, setIsGeneratingCode] = useState(false);
-  const [codeTimeLeft, setCodeTimeLeft] = useState(0);
-
-  // 🚨 NEW: Countdown Timer Effect
-  useEffect(() => {
-    if (codeTimeLeft <= 0) {
-      if (generatedCode) setGeneratedCode(null); // Clear the code when timer hits 0
-      return;
-    }
-    const timer = setInterval(() => {
-      setCodeTimeLeft((prev) => prev - 1);
-    }, 1000);
-    return () => clearInterval(timer);
-  }, [codeTimeLeft, generatedCode]);
 
-  // 🚨 NEW: Formatting helper
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, '0')}`;
-  };
 
   const handleGenerateCode = async () => {
     if (isGeneratingCode) return;
     setIsGeneratingCode(true);
+    
     try {
-      const apiKey = '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'; 
-
       if (!apiKey) {
         showAlert('Error', 'API Key is missing.');
         setIsGeneratingCode(false);
         return;
       }
 
-      // 🚨 Pass the apiKey as the strictly required second parameter
+      // Pass the dynamic apiKey to your service
       const res = await kycService.generateReferralCode(
         { session_id: state.session.session_id }, 
         apiKey
       );
-      
+
       // Extract the code from the response
       const newCode = res.code || res.referral_code || res?.data?.code || res?.data?.referral_code; 
       
       if (newCode) {
         setGeneratedCode(newCode);
-        setCodeTimeLeft(300); // 300 seconds = 5 minutes
       } else {
         showAlert('Error', 'Failed to parse code from server response.');
       }
@@ -139,7 +145,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     'healthInsuranceCard': 'health_insurance_card', 'health_insurance_card': 'health_insurance_card',
   };
 
-  const { actions, state, env } = useTemplateKYCFlowContext();
+  const { actions, state, env, apiKey } = useTemplateKYCFlowContext();
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
   const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
@@ -382,7 +388,12 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const autoCapture = async (capturePath: string, verified: ISilentCaptureResult & { region?: string }) => {
     if (isProcessingCapture) return;
     setIsProcessingCapture(true);
-    setProcessingImagePath(capturePath);
+
+    const safeCapturePath = (Platform.OS === 'ios' && !capturePath.startsWith('file://')) 
+      ? `file://${capturePath}` 
+      : capturePath;
+
+    setProcessingImagePath(safeCapturePath);
 
     try {
       let imagePathForUpload = capturePath;
@@ -394,13 +405,17 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       };
 
       try {
-        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.06);
+        imagePathForUpload = await cropImageWithBBoxWithTolerance(safeCapturePath, uiCropBbox, 0.06);
       } catch (e) {
         console.warn("Crop failed, falling back to original image", e);
-        imagePathForUpload = capturePath; 
+        imagePathForUpload = safeCapturePath; 
       }
 
-      const base64 = await pathToBase64(imagePathForUpload);
+      const safeCroppedPath = (Platform.OS === 'ios' && !imagePathForUpload.startsWith('file://')) 
+        ? `file://${imagePathForUpload}` 
+        : imagePathForUpload;
+
+      const base64 = await pathToBase64(safeCroppedPath);
       const newImages = {
         ...capturedImages,
         [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
@@ -543,11 +558,15 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       
       const issuingSubdivision = selectedDocumentType.region !== 'root' ? selectedDocumentType.region : undefined;
   
+      const safeCapturePath = (Platform.OS === 'ios' && !result.path.startsWith('file://')) 
+        ? `file://${result.path}` 
+        : result.path;
+
       try {
         // 1. Check & Crop the Template visually first
         if (!templatePath) {
           const templateType = await checkTemplateType({
-            path: result.path || '',
+            path: safeCapturePath,
             docType: selectedDocumentType?.type as GovernmentDocumentType,
             docRegion: countryData?.code || "",
             postfix: currentSide,
@@ -564,8 +583,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               return;
             }
             try {
-              const crop = await cropByObb(result.path, (templateType as any).card_obb);
-              templateBbox = crop.bbox;
+              const crop = await cropByObb(safeCapturePath, (templateType as any).card_obb);              templateBbox = crop.bbox;
             } catch {}
           }
         }
@@ -579,21 +597,21 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
           
           verificationRes = await frontVerification({
-            path: result.path,
+            path: safeCapturePath,
             regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : [], mrzTypes: mrzType ? [mrzType] : [] },
             selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '',
             code: countryData?.code || '', currentSide, templatePath, mrzType,
             issuingSubdivision: issuingSubdivision, clientSideBarcodeData: silentCaptureResult.barcode
           }, env);
         } else {
-          logger.log("Attempting backVerification with:", { path: result.path, templatePath, side: currentSide });
+          logger.log("Attempting backVerification with:", { path: safeCapturePath, templatePath, side: currentSide });
           const matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
           const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
           const frontTemplatePath = capturedImages['front']?.templatePath || '';
           
           // This validates if the back matches the front template!
           verificationRes = await backVerification({
-            path: result.path,
+            path: safeCapturePath,
             regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : [], mrzTypes: backMrzType ? [backMrzType] : [] },
             selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '',
             code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse,
@@ -622,7 +640,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             }
   
             const verifiedResult: ISilentCaptureResult & { region?: string } = {
-              path: result.path, templatePath: templatePath, bbox: bbox, success: true,
+              path: safeCapturePath, templatePath: templatePath, bbox: bbox, success: true,
               mrz: JSON.stringify(parsedDictionary), barcode: barcodeData, isAnalyzing: false,
               country: countryData?.code, documentType: selectedDocumentType!.type,
               region: selectedDocumentType!.region !== 'root' ? selectedDocumentType!.region : undefined,
@@ -633,13 +651,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
               const safeBbox = bbox as IBbox;
               setBboxBySide(prev => ({ ...prev, ['back']: safeBbox }));
             }
-            await autoCapture(result.path!, verifiedResult);
+            await autoCapture(safeCapturePath!, verifiedResult);
             return;
           }
   
           // If validation passed but we still need the barcode, trigger the UI phase!
           logger.log('[CA Barcode] Image captured & template VERIFIED. Switching to Barcode phase.');
-          setPendingCAImage({ path: result.path!, templateResponse, templatePath, bbox });
+          setPendingCAImage({ path: safeCapturePath!, templateResponse, templatePath, bbox });
           setScanPhase('barcode');
           setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
           return;
@@ -647,13 +665,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   
         // 4. NORMAL COMPLETION (For standard MRZ / Passport / Non-barcode documents)
         const verifiedResult: ISilentCaptureResult & { region?: string } = {
-          path: result.path, templatePath, bbox, success: true, mrz: verifiedMrz, isAnalyzing: false,
+          path: safeCapturePath, templatePath, bbox, success: true, mrz: verifiedMrz, isAnalyzing: false,
           country: countryData?.code, documentType: selectedDocumentType.type, region: issuingSubdivision
         };
         
         setSilentCaptureResult(verifiedResult);
         if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
-        await autoCapture(result.path, verifiedResult);
+        await autoCapture(safeCapturePath, verifiedResult);
   
       } catch (error: any) {
         console.log("Backend Verification Error:", error);
@@ -1114,28 +1132,19 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           {state.currentLanguage === 'en' ? 'Use code below to proceed on the Sanctum Key App.' : 'Vous avez déjà l\'application ? Liez-la :'}
         </Text>
         
-        {generatedCode && codeTimeLeft > 0 ? (
-          <View style={styles.activeCodeContainer}>
-            <Text style={styles.activeCodeText}>{generatedCode}</Text>
-            <Text style={styles.timerText}>
-              {state.currentLanguage === 'en' ? `Expires in ${formatTime(codeTimeLeft)}` : `Expire dans ${formatTime(codeTimeLeft)}`}
-            </Text>
-          </View>
-        ) : (
-          <TouchableOpacity 
-            style={styles.generateCodeButton} 
-            onPress={handleGenerateCode}
-            disabled={isGeneratingCode}
-          >
-            {isGeneratingCode ? (
-               <ActivityIndicator size="small" color="#0F172A" />
-            ) : (
-              <Text style={styles.generateCodeButtonText}>
-                {state.currentLanguage === 'en' ? 'Generate 5-Digit Link Code' : 'Générer un code à 5 chiffres'}
-              </Text>
-            )}
-          </TouchableOpacity>
-        )}
+          {generatedCode ? (
+            <ExpiringCodeTimer initialCode={generatedCode} language={state.currentLanguage} />
+          ) : (
+            <TouchableOpacity style={styles.generateCodeButton} onPress={handleGenerateCode} disabled={isGeneratingCode}>
+              {isGeneratingCode ? (
+                <ActivityIndicator size="small" color="#0F172A" />
+              ) : (
+                <Text style={styles.generateCodeButtonText}>
+                  {state.currentLanguage === 'en' ? 'Generate 5-Digit Link Code' : 'Générer un code à 5 chiffres'}
+                </Text>
+              )}
+            </TouchableOpacity>
+          )}
       </View>
 
       {isWebScanningRestricted && (