@sanctum-key/react-native-sdk 1.0.5 → 1.0.7

package/src/SanctumKeySdkView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { SanctumKeySdkViewProps } from './SanctumKeySdk.types';
+
+const NativeView: React.ComponentType<SanctumKeySdkViewProps> =
+  requireNativeView('SanctumKeySdk');
+
+export default function SanctumKeySdkView(props: SanctumKeySdkViewProps) {
+  return <NativeView {...props} />;
+}

package/src/{TransfergratisSdkView.web.tsx → SanctumKeySdkView.web.tsx}

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { TransfergratisSdkViewProps } from './TransfergratisSdk.types';
+import { SanctumKeySdkViewProps } from './SanctumKeySdk.types';
 
-export default function TransfergratisSdkView(props: TransfergratisSdkViewProps) {
+export default function SanctumKeySdkView(props: SanctumKeySdkViewProps) {
   return (
     <div>
       {/* <iframe

package/src/api/axios.ts

@@ -132,12 +132,12 @@ export default HttpClient;
 
 // ml service api
 export const mlService = new HttpClient({
-    baseURL: 'https://api.ml.transfergratis.com',
+    baseURL: 'https://api.ml.SanctumKey.com',
     apiKey: 'your-api-key',
 });
 // backedn service api
 export const backendService = new HttpClient({
-    baseURL: 'https://api.backend.transfergratis.com',
+    baseURL: 'https://api.backend.SanctumKey.com',
     apiKey: 'your-api-key',
 });
 

package/src/components/EnhancedCameraView.tsx

@@ -1,266 +1,143 @@
-import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Text, AppState } from 'react-native';
 import { Camera, useCameraDevice } from 'react-native-vision-camera';
 import VisionCameraModule from '../modules/camera/VisionCameraModule';
 import { useI18n } from '../hooks/useI18n';
 import { EnhancedCameraViewProps } from './OverLay/type';
 import { Button } from './ui/Button';
 
-
-
-
 export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({ 
   showCamera,
   cameraType: initialCameraType = 'front',
   style,
-  onCapture,
   onError,
-  onClose,
-  enableFlash = false,
-  enableHdr = false,
-  quality = 'high',
-  showCaptureButton = true,
-  showSwitchCamera = true,
-  overlayComponent,
-  bbox,
-  canFlip = true,
-  enableVideo = false,
-  isRecording = false,
-  onVideoRecordingStart,
-  onVideoRecordingStop,
-  videoDuration = 10,
-  onSilentCapture,
+  onSilentCapture, 
   silentCaptureResult,
+  isProcessing = false, 
+  overlayComponent,
 }) => {
   const { t } = useI18n();
   const camera = useRef<Camera>(null);
-  const [cameraType, setCameraType] = useState<'front' | 'back'>(initialCameraType);
-  const [hasPermission, setHasPermission] = useState(false);
+  
+  const isCapturingRef = useRef(false);
+  const isProcessingRef = useRef(isProcessing);
+
+  const [cameraType] = useState<'front' | 'back'>(initialCameraType);
+  
+  // 🚨 BUG FIX: Initialize to null to prevent the "Flicker" on retake
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
-  const [flash, setFlash] = useState<'off' | 'on' | 'auto'>('off');
   const [refreshCamera, setRefreshCamera] = useState(false);
 
   const device = useCameraDevice(cameraType);
-  console.log({ setCameraType, setFlash });
 
-  // Sélectionner le meilleur format disponible pour une qualité maximale
-  // Prioriser les formats avec une bonne résolution vidéo (pour la prévisualisation) ET photo (pour la capture)
-  const bestFormat = useMemo(() => {
-    if (!device || !device.formats || device.formats.length === 0) {
-      return undefined;
-    }
-    
-    // Trier les formats en combinant la résolution vidéo (pour la prévisualisation) et photo (pour la capture)
-    // On priorise les formats avec une bonne résolution vidéo car c'est ce qui est affiché en temps réel
-    const sortedFormats = [...device.formats].sort((a, b) => {
-      // Résolution vidéo (pour la prévisualisation live)
-      const videoResolutionA = (a.videoWidth || 0) * (a.videoHeight || 0);
-      const videoResolutionB = (b.videoWidth || 0) * (b.videoHeight || 0);
-      
-      // Résolution photo (pour la capture)
-      const photoResolutionA = (a.photoWidth || 0) * (a.photoHeight || 0);
-      const photoResolutionB = (b.photoWidth || 0) * (b.photoHeight || 0);
-      
-      // Prioriser d'abord la résolution vidéo (prévisualisation), puis la résolution photo
-      if (videoResolutionB !== videoResolutionA) {
-        return videoResolutionB - videoResolutionA;
-      }
-      return photoResolutionB - photoResolutionA;
-    });
-    
-    return sortedFormats[0];
-  }, [device]);
+  useEffect(() => {
+    isProcessingRef.current = isProcessing;
+  }, [isProcessing]);
 
   const checkPermissions = async () => {
     try {
       const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
-      console.log('hasAllPermissions', hasAllPermissions);
       if (!hasAllPermissions) {
         const granted = await VisionCameraModule.requestAllPermissions();
-        console.log('granted', granted);
         if (!granted) {
-          console.log('permissionRequired', t('camera.permissionRequired'));
+          setHasPermission(false);
           onError?.({ message: t('camera.permissionRequired') });
           return;
         }
       }
       setHasPermission(true);
     } catch (error) {
-      console.error('Error checking permissions:', error);
+      setHasPermission(false);
       onError?.({ message: t('camera.errorOccurred') });
     }
   };
 
-  // Check permissions on component mount
   useEffect(() => {
-    if (showCamera) {
-      checkPermissions();
-    }
+    if (showCamera) checkPermissions();
   }, [showCamera, refreshCamera]);
 
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (nextAppState === 'active' && showCamera && hasPermission === false) {
+        checkPermissions();
+      }
+    });
+    return () => subscription.remove();
+  }, [showCamera, hasPermission]);
 
-
-  const onInitialized = useCallback(() => {
-    console.log('Camera initialized!');
-    setIsInitialized(true);
-  }, []);
-
+  const onInitialized = useCallback(() => setIsInitialized(true), []);
   const onCameraError = useCallback((error: any) => {
-    console.error('Camera error:', error);
     onError?.({ message: error.message || t('camera.errorOccurred') });
   }, [onError, t]);
 
   const captureSilentPhoto = useCallback(async () => {
-    if (!camera.current || !isInitialized) {
-      onError?.({ message: t('camera.notReady') });
-      return;
-    }
-    console.log('silentCaptureResult', silentCaptureResult);
-    if (silentCaptureResult?.isAnalyzing || silentCaptureResult?.success) {
-      return;
-    }
-    try {
-      const photo = await camera.current.takePhoto({
-        enableShutterSound: true,
-        flash: enableFlash ? flash : 'off',
-      });
-
-      const result = await VisionCameraModule.processPhotoResult(photo);
-      onSilentCapture?.(result);
-    } catch (error) {
-
-    }
-  }, [isInitialized, onError, onSilentCapture, enableFlash, flash, silentCaptureResult]);
-
-  // Automatically take a silent photo every 5 seconds when ready
-  useEffect(() => {
-    if (!showCamera || !isInitialized) {
-      return;
-    }
-
-    const intervalId = setInterval(() => {
-      captureSilentPhoto();
-    }, 2500);
+    if (!camera.current || !isInitialized || isProcessingRef.current || isCapturingRef.current) return;
+    if (silentCaptureResult?.isAnalyzing) return;
 
-    return () => clearInterval(intervalId);
-  }, [showCamera, isInitialized, captureSilentPhoto]);
-
-  const capturePhoto = useCallback(async () => {
     try {
-      if (!camera.current || !isInitialized) {
-        onError?.({ message: t('camera.notReady') });
-        return;
-      }
-      if (silentCaptureResult?.success) {
-        onCapture?.({
-          success: true,
-          path: silentCaptureResult.path,
-        });
-        return;
-      }
-
+      isCapturingRef.current = true; 
       const photo = await camera.current.takePhoto({
-        enableShutterSound: true,
-        flash: enableFlash ? flash : 'off',
+        enableShutterSound: false, 
+        flash: 'off', 
       });
 
       const result = await VisionCameraModule.processPhotoResult(photo);
-      onCapture?.(result);
-    } catch (error) {
-      console.error('Error taking photo:', error);
-      onCapture?.({
-        success: false,
-        error: error instanceof Error ? error.message : t('camera.failedToCapture'),
-      });
-    }
-  }, [isInitialized, quality, flash, enableFlash, onCapture, onError]);
-
-  const startVideoRecording = useCallback(async () => {
-    try {
-      if (!camera.current || !isInitialized) {
-        onError?.({ message: t('camera.notReady') });
-        return;
-      }
-
-      await camera.current.startRecording({
-        onRecordingFinished: (video: any) => {
-          onVideoRecordingStop?.({
-            success: true,
-            path: video.path,
-          });
-        },
-        onRecordingError: (error: any) => {
-          console.error('Recording error:', error);
-          onVideoRecordingStop?.({
-            success: false,
-            error: error.message || t('camera.failedToStartRecording'),
-          });
-        },
-      });
-
-      onVideoRecordingStart?.();
-    } catch (error) {
-      console.error('Error starting video recording:', error);
-      onVideoRecordingStop?.({
-        success: false,
-        error: error instanceof Error ? error.message : t('camera.failedToStartRecording'),
+      
+      onSilentCapture?.({
+          ...result,
+          path: result.path || photo.path, 
       });
-    }
-  }, [isInitialized, onVideoRecordingStart, onVideoRecordingStop, onError]);
 
-  const stopVideoRecording = useCallback(async () => {
-    try {
-      if (!camera.current) {
-        onError?.({ message: t('camera.notReady') });
-        return;
-      }
-
-      await camera.current.stopRecording();
     } catch (error) {
-      console.error('Error stopping video recording:', error);
-      onError?.({ message: t('camera.failedToStopRecording') });
+      // Silent background fail
+    } finally {
+      isCapturingRef.current = false; 
     }
-  }, [onError]);
-
-  // const switchCamera = useCallback(() => {
-  //   setCameraType(current => current === 'front' ? 'back' : 'front');
-  // }, []);
+  }, [isInitialized, onSilentCapture, silentCaptureResult]);
 
-  // const toggleFlash = useCallback(() => {
-  //   setFlash(current => {
-  //     switch (current) {
-  //       case 'off': return 'on';
-  //       case 'on': return 'auto';
-  //       case 'auto': return 'off';
-  //       default: return 'off';
-  //     }
-  //   });
-  // }, []);
-
-  if (!hasPermission) {
-    return (
-      <View style={[styles.container, style]}>
-        <Text style={styles.permissionMessage}>
-          {t('camera.permissionRequired')}
-        </Text>
-        <Button title="Refresh Camera" onPress={() => setRefreshCamera(!refreshCamera)} />
-      </View>
-    );
+  // 🚨 BUG FIX: The Warm-up Timer (Fixes Blurry Images)
+  useEffect(() => {
+    if (!showCamera || !isInitialized || isProcessing) return;
+    
+    let isActive = true;
+    let intervalId: ReturnType<typeof setInterval>;
+
+    const warmupTimer = setTimeout(() => {
+      if (!isActive) return;
+      intervalId = setInterval(() => {
+        captureSilentPhoto();
+      }, 1500); // 1.5s gives the hardware more time to stabilize between shots
+    }, 1000); 
+    
+    return () => {
+      isActive = false;
+      clearTimeout(warmupTimer);
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [showCamera, isInitialized, isProcessing, captureSilentPhoto]);
+
+  // --- RENDERERS ---
+  
+  // 🚨 BUG FIX: Show nothing while checking permissions (Stops flicker)
+  if (hasPermission === null) {
+    return <View style={[styles.container, style]} />;
   }
 
-  if (!device) {
+  if (hasPermission === false) {
     return (
-      <View style={[styles.container, style]}>
-        <Text style={styles.errorMessage}>
-          {t('camera.deviceNotAvailable')}
-        </Text>
+      <View style={[styles.container, style, { justifyContent: 'center', alignItems: 'center' }]}>
+        <Text style={styles.permissionMessage}>{t('camera.permissionRequired')}</Text>
+        <Button 
+           title="Refresh Camera" 
+           onPress={() => setRefreshCamera(prev => !prev)} 
+           variant="primary"
+        />
       </View>
     );
   }
 
-  if (!showCamera) {
-    return <View style={[styles.container, style]} />;
-  }
+  if (!device || !showCamera) return <View style={[styles.container, style]} />;
 
   return (
     <View style={[styles.container, style]}>
@@ -268,215 +145,19 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         ref={camera}
         style={StyleSheet.absoluteFill}
         device={device}
-        isActive={showCamera}
+        isActive={showCamera && !isProcessing}
         photo={true}
-        video={enableVideo}
-        audio={enableVideo}
-        format={bestFormat}
+        video={false} 
+        audio={false} 
         onInitialized={onInitialized}
         onError={onCameraError}
       />
-
-      {/* Instructions */}
-      {/* {instructions && (
-          <View style={styles.instructionsOverlay}>
-            <Text style={styles.instructions}>{instructions}</Text>
-          </View>
-        )} */}
-
-      {/* Custom overlay component */}
       {overlayComponent}
-
-      {/* Bounding box overlay */}
-      {bbox && (
-        <View style={styles.bboxOverlay}>
-          <View
-            style={[
-              styles.bbox,
-              {
-                left: `${bbox.xMin}%`,
-                top: `${bbox.yMin}%`,
-                width: `${bbox.xMax - bbox.xMin}%`,
-                height: `${bbox.yMax - bbox.yMin}%`,
-                borderColor: bbox.borderColor || '#2DBD60',
-                borderWidth: bbox.borderWidth || 3,
-                borderRadius: bbox.cornerRadius || 8,
-              }
-            ]}
-          />
-        </View>
-      )}
-
-
-      {/* Camera controls */}
-      <View style={styles.controlsContainer}>
-        {/* Flash button */}
-        {/* {enableFlash && (
-          <TouchableOpacity style={styles.controlButton} onPress={toggleFlash}>
-            <Text style={styles.controlButtonText}>
-              {flash === 'off' ? '⚡' : flash === 'on' ? '⚡️' : '✨'}
-            </Text>
-          </TouchableOpacity>
-        )} */}
-
-        {/* Capture button */}
-        {showCaptureButton && !enableVideo && silentCaptureResult?.success && (
-          <TouchableOpacity
-            style={styles.captureButton}
-            onPress={capturePhoto}
-            disabled={!isInitialized}
-          >
-            <View style={[
-              styles.captureButtonInner,
-              !isInitialized && styles.captureButtonDisabled
-            ]} />
-          </TouchableOpacity>
-        )}
-
-        {/* Video recording button */}
-        {showCaptureButton && enableVideo && silentCaptureResult?.success && (
-          <TouchableOpacity
-            style={[
-              styles.captureButton,
-              isRecording && styles.recordingButton
-            ]}
-            onPress={isRecording ? stopVideoRecording : startVideoRecording}
-            disabled={!isInitialized}
-          >
-            <View style={[
-              styles.captureButtonInner,
-              !isInitialized && styles.captureButtonDisabled,
-              isRecording && styles.recordingButtonInner
-            ]} />
-          </TouchableOpacity>
-        )}
-
-        {/* Switch camera button */}
-        {/* {showSwitchCamera && canFlip && (
-          <TouchableOpacity style={styles.controlButton} onPress={switchCamera}>
-            <Text style={styles.controlButtonText}>🔄</Text>
-          </TouchableOpacity>
-        )} */}
-
-        {silentCaptureResult?.isAnalyzing && (
-          <View style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)', padding: 10, borderRadius: 10 }}>
-            <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>{t('camera.analyzing')}</Text>
-          </View>
-        )}
-      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'black',
-  },
-  instructionsOverlay: {
-    position: 'absolute',
-    top: 60,
-    left: 20,
-    right: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    padding: 15,
-    // borderRadius: 10,
-    zIndex: 1,
-  },
-  instructions: {
-    color: 'white',
-    fontSize: 16,
-    textAlign: 'center',
-    fontWeight: '500',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 50,
-    right: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 2,
-  },
-  closeButtonText: {
-    color: 'white',
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  controlsContainer: {
-    position: 'absolute',
-    bottom: 40,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    paddingHorizontal: 40,
-    zIndex: 1,
-  },
-  controlButton: {
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  controlButtonText: {
-    fontSize: 24,
-  },
-  captureButton: {
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 3,
-    borderColor: 'white',
-  },
-  captureButtonInner: {
-    backgroundColor: 'white',
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-  },
-  captureButtonDisabled: {
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-  },
-  recordingButton: {
-    backgroundColor: 'rgba(255, 59, 48, 0.3)',
-    borderColor: '#FF3B30',
-  },
-  recordingButtonInner: {
-    backgroundColor: '#FF3B30',
-  },
-  permissionMessage: {
-    color: 'white',
-    fontSize: 16,
-    textAlign: 'center',
-    margin: 20,
-  },
-  errorMessage: {
-    color: 'red',
-    fontSize: 16,
-    textAlign: 'center',
-    margin: 20,
-  },
-  bboxOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-  },
-  bbox: {
-    position: 'absolute',
-    borderStyle: 'solid',
-    backgroundColor: 'transparent',
-  },
+  container: { flex: 1, backgroundColor: 'black' },
+  permissionMessage: { color: 'white', textAlign: 'center', margin: 20, fontSize: 16 },
 });