react-native-biometric-verifier 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "A React Native module for biometric verification with face recognition and QR code scanning",
   "main": "src/index.js",
   "scripts": {

package/src/components/CaptureImageWithoutEdit.js

@@ -5,8 +5,6 @@ import {
   Text,
   StyleSheet,
   ActivityIndicator,
-  AppState,
-  BackHandler,
   Animated,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -15,7 +13,6 @@ import {
   getCameraDevice,
   useCodeScanner,
   useCameraFormat,
-  CameraRuntimeError,
 } from 'react-native-vision-camera';
 import { Global } from '../utils/Global';
 import { useFaceDetectionFrameProcessor } from '../hooks/useFaceDetectionFrameProcessor';
@@ -27,7 +24,7 @@ const CaptureImageWithoutEdit = React.memo(
     showCodeScanner = false,
     isLoading = false,
     frameProcessorFps = 1,
-    livenessLevel = 1, // 0=no liveness, 1=blink only, 2=face turn only, 3=both
+    livenessLevel = 1,
   }) => {
     const cameraRef = useRef(null);
     const [cameraDevice, setCameraDevice] = useState(null);
@@ -35,6 +32,7 @@ const CaptureImageWithoutEdit = React.memo(
     const [showCamera, setShowCamera] = useState(false);
     const [cameraInitialized, setCameraInitialized] = useState(false);
     const [currentCameraType, setCurrentCameraType] = useState(cameraType);
+    const [isInitializing, setIsInitializing] = useState(true);
 
     const [faces, setFaces] = useState([]);
     const [cameraError, setCameraError] = useState(null);
@@ -44,13 +42,10 @@ const CaptureImageWithoutEdit = React.memo(
     const [faceCount, setFaceCount] = useState(0);
 
     const captured = useRef(false);
-    const appState = useRef(AppState.currentState);
     const isMounted = useRef(true);
 
-    // Animation values
     const instructionAnim = useRef(new Animated.Value(1)).current;
 
-    // Reset capture state
     const resetCaptureState = useCallback(() => {
       captured.current = false;
       setFaces([]);
@@ -60,7 +55,6 @@ const CaptureImageWithoutEdit = React.memo(
       setFaceCount(0);
     }, []);
 
-    // Code scanner
     const codeScanner = useCodeScanner({
       codeTypes: ['qr', 'ean-13'],
       onCodeScanned: (codes) => {
@@ -76,46 +70,48 @@ const CaptureImageWithoutEdit = React.memo(
       },
     });
 
-    // Callbacks for face detection events
-    const onStableFaceDetected = useCallback(async (faceRect) => {
-      if (!isMounted.current) return;
-      if (captured.current) return;
+    const onStableFaceDetected = useCallback(
+      async (faceRect) => {
+        if (!isMounted.current) return;
+        if (captured.current) return;
 
-      captured.current = true;
-      setFaces([faceRect]);
+        captured.current = true;
+        setFaces([faceRect]);
 
-      try {
-        if (!cameraRef.current) {
-          throw new Error('Camera ref not available');
-        }
+        try {
+          if (!cameraRef.current) {
+            throw new Error('Camera ref not available');
+          }
+
+          const photo = await cameraRef.current.takePhoto({
+            flash: 'off',
+            qualityPrioritization: 'quality',
+            enableShutterSound: false,
+            skipMetadata: true,
+          });
 
-        const photo = await cameraRef.current.takePhoto({
-          flash: 'off',
-          qualityPrioritization: 'quality',
-          enableShutterSound: false,
-          skipMetadata: true,
-        });
+          if (!photo || !photo.path) {
+            throw new Error('Failed to capture photo - no path returned');
+          }
 
-        if (!photo || !photo.path) {
-          throw new Error('Failed to capture photo - no path returned');
+          const photopath = `file://${photo.path}`;
+          const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
+          const photoData = {
+            uri: photopath,
+            filename: fileName,
+            filetype: 'image/jpeg',
+          };
+
+          onCapture(photoData, faceRect);
+        } catch (e) {
+          console.error('Capture error:', e);
+          captured.current = false;
+          resetCaptureState();
+          setCameraError('Failed to capture image. Please try again.');
         }
-
-        const photopath = `file://${photo.path}`;
-        const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
-        const photoData = {
-          uri: photopath,
-          filename: fileName,
-          filetype: 'image/jpeg',
-        };
-
-        onCapture(photoData, faceRect);
-      } catch (e) {
-        console.error('Capture error:', e);
-        captured.current = false;
-        resetCaptureState();
-        setCameraError('Failed to capture image. Please try again.');
-      }
-    }, [onCapture, resetCaptureState]);
+      },
+      [onCapture, resetCaptureState]
+    );
 
     const onFacesUpdate = useCallback((payload) => {
       if (!isMounted.current) return;
@@ -125,7 +121,7 @@ const CaptureImageWithoutEdit = React.memo(
         setProgress(progress);
 
         if (count === 1) {
-          setFaces(prev => {
+          setFaces((prev) => {
             if (prev.length === 1) return prev;
             return [{ x: 0, y: 0, width: 0, height: 0 }];
           });
@@ -137,20 +133,21 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, []);
 
-    const onLivenessUpdate = useCallback((step, extra) => {
-      setLivenessStep(step);
-      if (extra?.blinkCount !== undefined) setBlinkCount(extra.blinkCount);
-
-      // Animate instruction change
-      instructionAnim.setValue(0);
-      Animated.timing(instructionAnim, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
-    }, [instructionAnim]);
+    const onLivenessUpdate = useCallback(
+      (step, extra) => {
+        setLivenessStep(step);
+        if (extra?.blinkCount !== undefined) setBlinkCount(extra.blinkCount);
+
+        instructionAnim.setValue(0);
+        Animated.timing(instructionAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }).start();
+      },
+      [instructionAnim]
+    );
 
-    // Use the face detection frame processor hook
     const {
       frameProcessor,
       forceResetCaptureState,
@@ -164,10 +161,9 @@ const CaptureImageWithoutEdit = React.memo(
       showCodeScanner,
       isLoading,
       isActive: showCamera && cameraInitialized,
-      livenessLevel, // Pass liveness level to hook
+      livenessLevel,
     });
 
-    // Sync captured state with the shared value
     useEffect(() => {
       if (capturedSV?.value && !captured.current) {
         captured.current = true;
@@ -176,43 +172,63 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, [capturedSV?.value]);
 
-    // Get Camera Permission - from original code
     const getPermission = useCallback(async () => {
       try {
         if (!isMounted.current) return;
 
+        setIsInitializing(true);
         setCameraError(null);
+        setShowCamera(false);
+
         const newCameraPermission = await Camera.requestCameraPermission();
         setCameraPermission(newCameraPermission);
 
         if (newCameraPermission === 'granted') {
           const devices = await Camera.getAvailableCameraDevices();
-          setCameraDevice(getCameraDevice(devices, currentCameraType));
+
+          if (!devices || devices.length === 0) {
+            throw new Error('No camera devices available');
+          }
+
+          const device = getCameraDevice(devices, currentCameraType);
+
+          if (!device) {
+            throw new Error(`No ${currentCameraType} camera available`);
+          }
+
+          setCameraDevice(device);
           setShowCamera(true);
+          console.log('Camera device set successfully');
         } else {
           setCameraError('Camera permission denied');
         }
       } catch (error) {
         console.error('Camera permission error:', error);
-        setCameraError('Failed to get camera permission');
+        setCameraError(error.message || 'Failed to get camera permission');
+        setShowCamera(false);
+      } finally {
+        if (isMounted.current) {
+          setIsInitializing(false);
+        }
       }
     }, [currentCameraType]);
 
-    // Simplified camera initialization
     const initializeCamera = useCallback(async () => {
-      try {
-        if (!isMounted.current) return;
-        await getPermission();
-      } catch (error) {
-        console.error('Camera initialization failed:', error);
-        setCameraError('Failed to initialize camera');
-      }
+      await getPermission();
     }, [getPermission]);
 
-    // Effects: lifecycle, camera init, app state, cleanup
     useEffect(() => {
       isMounted.current = true;
-      initializeCamera();
+
+      const initOnMount = async () => {
+        try {
+          await initializeCamera();
+        } catch (error) {
+          console.error('Failed to initialize camera on mount:', error);
+        }
+      };
+
+      initOnMount();
 
       return () => {
         isMounted.current = false;
@@ -221,105 +237,22 @@ const CaptureImageWithoutEdit = React.memo(
       };
     }, [initializeCamera, forceResetCaptureState]);
 
-    // Update frame processor active state when camera state changes
     useEffect(() => {
       updateIsActive(showCamera && cameraInitialized);
     }, [showCamera, cameraInitialized, updateIsActive]);
 
-    // Handle camera type changes from parent
     useEffect(() => {
       if (cameraType !== currentCameraType) {
         setCurrentCameraType(cameraType);
-        // Reinitialize camera with new type
         initializeCamera();
       }
     }, [cameraType, currentCameraType, initializeCamera]);
 
-    // app state change
-    useEffect(() => {
-      const subscription = AppState.addEventListener('change', nextAppState => {
-        try {
-          if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-            if (cameraPermission === 'granted') {
-              setShowCamera(true);
-              if (captured.current) {
-                forceResetCaptureState();
-                resetCaptureState();
-              }
-            }
-          } else if (nextAppState.match(/inactive|background/)) {
-            setShowCamera(false);
-          }
-          appState.current = nextAppState;
-        } catch (error) {
-          console.error('Error handling app state change:', error);
-        }
-      });
-
-      return () => {
-        try {
-          subscription.remove();
-        } catch (error) {
-          console.error('Error removing app state listener:', error);
-        }
-      };
-    }, [cameraPermission, forceResetCaptureState, resetCaptureState]);
-
-    // android back handler
-    useEffect(() => {
-      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-        return true;
-      });
-
-      return () => {
-        try {
-          backHandler.remove();
-        } catch (error) {
-          console.error('Error removing back handler:', error);
-        }
-      };
-    }, []);
-
-    // handle camera errors
-    const handleCameraError = useCallback((error) => {
-      console.error('Camera error:', error);
-      let errorMessage = 'Camera error occurred';
-
-      if (error instanceof CameraRuntimeError) {
-        switch (error.code) {
-          case 'session/configuration-failed':
-            errorMessage = 'Camera configuration failed. Please try again.';
-            break;
-          case 'device/not-available':
-            errorMessage = 'Camera not available';
-            break;
-          case 'permission/microphone-not-granted':
-            errorMessage = 'Camera permission required';
-            break;
-          default:
-            errorMessage = `Camera error: ${error.message}`;
-        }
-      }
-
-      setCameraError(errorMessage);
-      setShowCamera(false);
-      forceResetCaptureState();
-      resetCaptureState();
-    }, [forceResetCaptureState, resetCaptureState]);
-
-    const handleCameraInitialized = useCallback(() => {
-      setCameraInitialized(true);
-      setCameraError(null);
-      updateIsActive(true);
-    }, [updateIsActive]);
-
-    // format selection
     const format = useCameraFormat(cameraDevice, [
       { videoResolution: { width: 640, height: 640 } },
       { fps: 30 },
     ]);
 
-    // keep worklet's showCodeScanner flag in sync
     useEffect(() => {
       try {
         updateShowCodeScanner(!!showCodeScanner);
@@ -330,24 +263,27 @@ const CaptureImageWithoutEdit = React.memo(
       } catch (error) {
         console.error('Error updating code scanner:', error);
       }
-    }, [showCodeScanner, updateShowCodeScanner, forceResetCaptureState, resetCaptureState]);
-
-    // Retry camera initialization
-    const handleRetry = useCallback(() => {
-      setCameraError(null);
-      setShowCamera(false);
-      forceResetCaptureState();
-      resetCaptureState();
-      setTimeout(() => {
-        if (isMounted.current) {
-          initializeCamera();
-        }
-      }, 500);
-    }, [initializeCamera, resetCaptureState, forceResetCaptureState]);
+    }, [
+      showCodeScanner,
+      updateShowCodeScanner,
+      forceResetCaptureState,
+      resetCaptureState,
+    ]);
 
-  
+    const handleRetry = useCallback(async () => {
+      try {
+        setCameraError(null);
+        setShowCamera(false);
+        setCameraInitialized(false);
+        forceResetCaptureState();
+        resetCaptureState();
+        await initializeCamera();
+      } catch (error) {
+        console.error('Retry failed:', error);
+        setCameraError('Failed to retry camera initialization');
+      }
+    }, [initializeCamera, resetCaptureState, forceResetCaptureState]);
 
-    // Helper text for user guidance based on liveness level
     const getInstruction = useCallback(() => {
       if (faceCount > 1) {
         return 'Multiple faces detected';
@@ -405,19 +341,24 @@ const CaptureImageWithoutEdit = React.memo(
       }
 
       return 'Align your face in frame';
-    }, [livenessLevel, livenessStep, blinkCount, faces.length, progress, faceCount]);
-
+    }, [
+      livenessLevel,
+      livenessStep,
+      blinkCount,
+      faces.length,
+      progress,
+      faceCount,
+    ]);
 
-    // Get step configuration based on liveness level
     const getStepConfig = useCallback(() => {
       switch (livenessLevel) {
-        case 0: // No liveness
+        case 0:
           return { totalSteps: 0, showSteps: false };
-        case 1: // Blink only
+        case 1:
           return { totalSteps: 1, showSteps: true };
-        case 2: // Face turn only
+        case 2:
           return { totalSteps: 2, showSteps: true };
-        case 3: // Both
+        case 3:
           return { totalSteps: 3, showSteps: true };
         default:
           return { totalSteps: 0, showSteps: false };
@@ -426,7 +367,6 @@ const CaptureImageWithoutEdit = React.memo(
 
     const stepConfig = getStepConfig();
 
-    // Get instruction text style based on content
     const getInstructionStyle = useCallback(() => {
       if (faceCount > 1) {
         return [styles.instructionText, { color: Global.AppTheme.error }];
@@ -434,84 +374,38 @@ const CaptureImageWithoutEdit = React.memo(
       return styles.instructionText;
     }, [faceCount]);
 
-    // camera placeholder / UI
-    const renderCameraPlaceholder = () => (
-      <View style={styles.cameraContainer}>
-        {cameraError ? (
-          <View style={styles.errorContainer}>
-            <Icon name="error-outline" size={40} color={Global.AppTheme.error} />
-            <Text style={styles.errorText}>{cameraError}</Text>
-            <TouchableOpacity
-              style={styles.retryButton}
-              onPress={handleRetry}
-              accessibilityLabel="Retry camera initialization"
-            >
-              <Text style={styles.retryButtonText}>Retry</Text>
-            </TouchableOpacity>
-          </View>
-        ) : cameraPermission === 'denied' || cameraPermission === 'restricted' ? (
-          <View style={styles.placeholderContainer}>
-            <Icon name="camera-off" size={40} color={Global.AppTheme.light} />
-            <Text style={styles.placeholderText}>
-              Camera permission required. Please enable in settings.
-            </Text>
-            <TouchableOpacity
-              style={styles.retryButton}
-              onPress={handleRetry}
-              accessibilityLabel="Request camera permission again"
-            >
-              <Text style={styles.retryButtonText}>Request Again</Text>
-            </TouchableOpacity>
-          </View>
-        ) : cameraPermission === 'not-determined' ? (
-          <View style={styles.placeholderContainer}>
-            <ActivityIndicator size="large" color={Global.AppTheme.primary} />
-            <Text style={styles.placeholderText}>
-              Requesting camera access...
-            </Text>
-          </View>
-        ) : !cameraDevice ? (
-          <View style={styles.placeholderContainer}>
-            <Icon name="camera-alt" size={40} color={Global.AppTheme.light} />
-            <Text style={styles.placeholderText}>Camera not available</Text>
-            <TouchableOpacity
-              style={styles.retryButton}
-              onPress={handleRetry}
-              accessibilityLabel="Retry camera initialization"
-            >
-              <Text style={styles.retryButtonText}>Retry</Text>
-            </TouchableOpacity>
-          </View>
-        ) : (
-          <View style={styles.placeholderContainer}>
-            <ActivityIndicator size="large" color={Global.AppTheme.primary} />
-            <Text style={styles.placeholderText}>Initializing camera...</Text>
-          </View>
-        )}
-      </View>
-    );
-
-    const shouldRenderCamera = showCamera &&
-      cameraPermission === 'granted' &&
-      cameraDevice &&
-      !cameraError;
-
     return (
       <View style={styles.container}>
         <View style={styles.cameraContainer}>
-          {shouldRenderCamera ? (
+          {isInitializing && (
+            <View style={styles.loadingContainer}>
+              <ActivityIndicator size="large" color={Global.AppTheme.primary} />
+              <Text style={styles.placeholderText}>Initializing camera...</Text>
+            </View>
+          )}
+
+          {!isInitializing && showCamera && cameraDevice ? (
             <Camera
               ref={cameraRef}
               style={styles.camera}
               device={cameraDevice}
-              isActive={showCamera && !isLoading && appState.current === 'active'}
+              isActive={showCamera && !isLoading}
               photo={true}
               format={format}
               codeScanner={showCodeScanner ? codeScanner : undefined}
-              frameProcessor={!showCodeScanner && cameraInitialized ? frameProcessor : undefined}
+              frameProcessor={
+                !showCodeScanner && cameraInitialized ? frameProcessor : undefined
+              }
               frameProcessorFps={frameProcessorFps}
-              onInitialized={handleCameraInitialized}
-              onError={handleCameraError}
+              onInitialized={() => {
+                console.log('Camera initialized successfully');
+                setCameraInitialized(true);
+              }}
+              onError={(error) => {
+                console.log('Camera error:', error);
+                setCameraError('Camera error occurred');
+                setCameraInitialized(false);
+              }}
               enableZoomGesture={false}
               exposure={0}
               pixelFormat="yuv"
@@ -519,13 +413,23 @@ const CaptureImageWithoutEdit = React.memo(
               orientation="portrait"
             />
           ) : (
-            renderCameraPlaceholder()
+            <View style={styles.placeholderContainer}>
+              <Icon name="camera-alt" size={40} color={Global.AppTheme.light} />
+              <Text style={styles.placeholderText}>
+                {cameraError || 'Camera not available'}
+              </Text>
+              <TouchableOpacity
+                style={styles.retryButton}
+                onPress={handleRetry}
+                accessibilityLabel="Retry camera initialization"
+              >
+                <Text style={styles.retryButtonText}>Retry</Text>
+              </TouchableOpacity>
+            </View>
           )}
 
-          {/* Liveness Detection UI */}
-          {!showCodeScanner && shouldRenderCamera && livenessLevel > 0 && (
+          {!showCodeScanner && showCamera && cameraDevice && livenessLevel > 0 && (
             <View style={styles.livenessContainer}>
-              {/* Instructions with animation */}
               <Animated.View
                 style={[
                   styles.instructionContainer,
@@ -545,45 +449,54 @@ const CaptureImageWithoutEdit = React.memo(
                 <Text style={getInstructionStyle()}>{getInstruction()}</Text>
               </Animated.View>
 
-              {/* Blink Progress for blink steps */}
-              {(livenessLevel === 1 || livenessLevel === 3) && livenessStep === (livenessLevel === 1 ? 1 : 3) && (
-                <View style={styles.blinkProgressContainer}>
-                  {[1, 2, 3].map((i) => (
-                    <View
-                      key={i}
-                      style={[
-                        styles.blinkDot,
-                        blinkCount >= i && styles.blinkDotActive,
-                      ]}
-                    />
-                  ))}
-                </View>
-              )}
+              {(livenessLevel === 1 || livenessLevel === 3) &&
+                livenessStep === (livenessLevel === 1 ? 1 : 3) && (
+                  <View style={styles.blinkProgressContainer}>
+                    {[1, 2, 3].map((i) => (
+                      <View
+                        key={i}
+                        style={[
+                          styles.blinkDot,
+                          blinkCount >= i && styles.blinkDotActive,
+                        ]}
+                      />
+                    ))}
+                  </View>
+                )}
 
-              {/* Step Indicators - only show for liveness levels 1, 2, 3 */}
               {stepConfig.showSteps && faceCount <= 1 && (
                 <>
                   <View style={styles.stepsContainer}>
-                    {Array.from({ length: stepConfig.totalSteps + 1 }).map((_, step) => (
-                      <React.Fragment key={step}>
-                        <View style={[
-                          styles.stepIndicator,
-                          livenessStep > step ? styles.stepCompleted :
-                            livenessStep === step ? styles.stepCurrent : styles.stepPending
-                        ]}>
-                          <Text style={styles.stepText}>{step + 1}</Text>
-                        </View>
-                        {step < stepConfig.totalSteps && (
-                          <View style={[
-                            styles.stepConnector,
-                            livenessStep > step ? styles.connectorCompleted : {}
-                          ]} />
-                        )}
-                      </React.Fragment>
-                    ))}
+                    {Array.from({ length: stepConfig.totalSteps + 1 }).map(
+                      (_, step) => (
+                        <React.Fragment key={step}>
+                          <View
+                            style={[
+                              styles.stepIndicator,
+                              livenessStep > step
+                                ? styles.stepCompleted
+                                : livenessStep === step
+                                ? styles.stepCurrent
+                                : styles.stepPending,
+                            ]}
+                          >
+                            <Text style={styles.stepText}>{step + 1}</Text>
+                          </View>
+                          {step < stepConfig.totalSteps && (
+                            <View
+                              style={[
+                                styles.stepConnector,
+                                livenessStep > step
+                                  ? styles.connectorCompleted
+                                  : {},
+                              ]}
+                            />
+                          )}
+                        </React.Fragment>
+                      )
+                    )}
                   </View>
 
-                  {/* Step Labels */}
                   <View style={styles.stepLabelsContainer}>
                     {livenessLevel === 1 && (
                       <>
@@ -612,8 +525,7 @@ const CaptureImageWithoutEdit = React.memo(
             </View>
           )}
 
-          {/* Simple face detection UI for liveness level 0 */}
-          {!showCodeScanner && shouldRenderCamera && livenessLevel === 0 && (
+          {!showCodeScanner && showCamera && cameraDevice && livenessLevel === 0 && (
             <View style={styles.livenessContainer}>
               <Animated.View
                 style={[
@@ -626,14 +538,13 @@ const CaptureImageWithoutEdit = React.memo(
                 <Text style={getInstructionStyle()}>{getInstruction()}</Text>
               </Animated.View>
 
-              {/* Progress bar for stability - only show when single face detected */}
               {faceCount === 1 && (
                 <View style={styles.stabilityContainer}>
                   <View style={styles.stabilityBar}>
                     <View
                       style={[
                         styles.stabilityProgress,
-                        { width: `${progress}%` }
+                        { width: `${progress}%` },
                       ]}
                     />
                   </View>
@@ -666,41 +577,23 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
   },
-  controlsContainer: {
-    position: 'absolute',
-    bottom: 20,
-    right: 20,
-    alignItems: 'center',
-  },
-  cameraSwitchButton: {
-    backgroundColor: 'rgba(0,0,0,0.7)',
-    padding: 12,
-    borderRadius: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  controlText: {
-    color: 'white',
-    fontSize: 10,
-    marginTop: 4,
-  },
-  placeholderContainer: {
+  loadingContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
   },
-  errorContainer: {
+  placeholderContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
   },
-  errorText: {
-    color: Global.AppTheme.error,
+  placeholderText: {
+    color: Global.AppTheme.light,
     fontSize: 16,
     textAlign: 'center',
-    marginVertical: 16,
+    marginTop: 16,
   },
   retryButton: {
     backgroundColor: Global.AppTheme.primary,
@@ -713,13 +606,6 @@ const styles = StyleSheet.create({
     color: Global.AppTheme.light,
     fontWeight: 'bold',
   },
-  placeholderText: {
-    color: Global.AppTheme.light,
-    fontSize: 16,
-    textAlign: 'center',
-    marginTop: 16,
-  },
-  // Liveness detection styles
   livenessContainer: {
     position: 'absolute',
     top: 40,
@@ -808,7 +694,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     flex: 1,
   },
-  // Stability bar for level 0
   stabilityContainer: {
     alignItems: 'center',
     width: '100%',

package/src/components/Card.js

@@ -4,7 +4,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import PropTypes from 'prop-types';
 import { Global } from '../utils/Global';
 
-export const Card = ({ employeeData, apiurl, imageurl = 'file/filedownload/photo/' }) => {
+export const Card = ({ employeeData, apiurl, fileurl = 'file/filedownload/photo/' }) => {
   const [imageError, setImageError] = useState(false);
 
   if (!employeeData || typeof employeeData !== 'object') {
@@ -18,7 +18,7 @@ export const Card = ({ employeeData, apiurl, imageurl = 'file/filedownload/photo
   const employeeId = faceid || 'N/A';
 
   const imageSource = !imageError && img
-    ? { uri: `${apiurl}${imageurl}${img}` }
+    ? { uri: `${apiurl}${fileurl}${img}` }
     : null;
 
   return (
@@ -65,7 +65,7 @@ Card.propTypes = {
     img: PropTypes.string,
   }),
   apiurl: PropTypes.string,
-  imageurl: PropTypes.string,
+  fileurl: PropTypes.string,
 };
 
 const styles = StyleSheet.create({

package/src/components/Loader.js

@@ -16,7 +16,7 @@ export default function Loader({
   overlayColor = 'rgba(0,0,0,0.4)',
   loaderColor = 'lightblue',
   size = 50,
-  gifSource = {uri: `http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
+  gifSource,
   message = '',
   messageStyle = {},
   animationType = 'fade',

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -6,7 +6,7 @@ import { useFaceDetector } from 'react-native-vision-camera-face-detector';
 // Tuned constants for liveness detection / stability
 const FACE_STABILITY_THRESHOLD = 3;
 const FACE_MOVEMENT_THRESHOLD = 15;
-const FRAME_PROCESSOR_MIN_INTERVAL_MS = 1000; // increased to reduce load
+const FRAME_PROCESSOR_MIN_INTERVAL_MS = 800; // increased to reduce load
 const MIN_FACE_SIZE = 0.2;
 
 // Liveness detection constants

package/src/index.js

@@ -40,7 +40,7 @@ import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
 const BiometricModal = React.memo(
-  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, imageurl }) => {
+  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl }) => {
     const navigation = useNavigation();
 
     // Custom hooks
@@ -547,8 +547,8 @@ const BiometricModal = React.memo(
     const loaderSource = useMemo(
       () =>
         state.isLoading &&
-        getLoaderGif(state.animationState, state.currentStep, apiurl),
-      [state.isLoading, state.animationState, state.currentStep, apiurl]
+        getLoaderGif(state.animationState, state.currentStep, apiurl, imageurl),
+      [state.isLoading, state.animationState, state.currentStep, apiurl, imageurl]
     );
 
     // Determine if camera should be shown
@@ -608,7 +608,7 @@ const BiometricModal = React.memo(
 
           {state.employeeData && (
             <View style={styles.cardContainer}>
-              <Card employeeData={state.employeeData} apiurl={apiurl} imageurl={imageurl} />
+              <Card employeeData={state.employeeData} apiurl={apiurl} fileurl={fileurl} />
             </View>
           )}
 

package/src/utils/getLoaderGif.js

@@ -6,11 +6,11 @@ import { Global } from "./Global";
  * @param {string} currentStep - Current step of verification
  * @returns {any} - Gif image source or null
  */
-export const getLoaderGif = (animationState, currentStep,APIURL) => {
+export const getLoaderGif = (animationState, currentStep,APIURL,imageurl ='file/getCommonFile/image/') => {
   const FaceGifUrl =
-    `${APIURL}file/getCommonFile/image/Face.gif`;
+    `${APIURL}${imageurl}Face.gif`;
   const LocationGifUrl =
-    `${APIURL}file/getCommonFile/image/Location.gif`;
+    `${APIURL}${imageurl}Location.gif`;
 
   if (
     animationState === Global.AnimationStates.faceScan ||