react-native-biometric-verifier 0.0.25 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "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

@@ -24,11 +24,10 @@ const CaptureImageWithoutEdit = React.memo(
     showCodeScanner = false,
     isLoading = false,
     frameProcessorFps = 1,
-    livenessLevel = 1,
+    livenessLevel,
   }) => {
     const cameraRef = useRef(null);
     const [cameraDevice, setCameraDevice] = useState(null);
-    const [cameraPermission, setCameraPermission] = useState('not-determined');
     const [showCamera, setShowCamera] = useState(false);
     const [cameraInitialized, setCameraInitialized] = useState(false);
     const [currentCameraType, setCurrentCameraType] = useState(cameraType);
@@ -161,7 +160,7 @@ const CaptureImageWithoutEdit = React.memo(
       showCodeScanner,
       isLoading,
       isActive: showCamera && cameraInitialized,
-      livenessLevel,
+      livenessLevel: livenessLevel || 0, // Ensure livenessLevel is never null/undefined
     });
 
     useEffect(() => {
@@ -181,20 +180,22 @@ const CaptureImageWithoutEdit = React.memo(
         setShowCamera(false);
 
         const newCameraPermission = await Camera.requestCameraPermission();
-        setCameraPermission(newCameraPermission);
-
         if (newCameraPermission === 'granted') {
-          const devices = await Camera.getAvailableCameraDevices();
+          let devices = await Camera.getAvailableCameraDevices();
+
+          // 🔁 Retry once after short delay if no devices found
+          if (!devices || devices.length === 0) {
+            console.warn('No camera devices yet, retrying in 300ms...');
+            await new Promise((resolve) => setTimeout(resolve, 300));
+            devices = await Camera.getAvailableCameraDevices();
+          }
 
           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`);
-          }
+          if (!device) throw new Error(`No ${currentCameraType} camera available`);
 
           setCameraDevice(device);
           setShowCamera(true);
@@ -213,6 +214,7 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, [currentCameraType]);
 
+
     const initializeCamera = useCallback(async () => {
       await getPermission();
     }, [getPermission]);
@@ -289,13 +291,15 @@ const CaptureImageWithoutEdit = React.memo(
         return 'Multiple faces detected';
       }
 
-      if (livenessLevel === 0) {
+      const currentLevel = livenessLevel || 0;
+
+      if (currentLevel === 0) {
         if (faces.length === 0) return 'Position your face in the frame';
         if (progress < 100) return 'Hold still...';
         return 'Perfect! Capturing...';
       }
 
-      if (livenessLevel === 1) {
+      if (currentLevel === 1) {
         switch (livenessStep) {
           case 0:
             return 'Face the camera straight';
@@ -308,7 +312,7 @@ const CaptureImageWithoutEdit = React.memo(
         }
       }
 
-      if (livenessLevel === 2) {
+      if (currentLevel === 2) {
         switch (livenessStep) {
           case 0:
             return 'Face the camera straight';
@@ -323,7 +327,7 @@ const CaptureImageWithoutEdit = React.memo(
         }
       }
 
-      if (livenessLevel === 3) {
+      if (currentLevel === 3) {
         switch (livenessStep) {
           case 0:
             return 'Face the camera straight';
@@ -351,7 +355,9 @@ const CaptureImageWithoutEdit = React.memo(
     ]);
 
     const getStepConfig = useCallback(() => {
-      switch (livenessLevel) {
+      const currentLevel = livenessLevel || 0;
+
+      switch (currentLevel) {
         case 0:
           return { totalSteps: 0, showSteps: false };
         case 1:
@@ -377,13 +383,6 @@ const CaptureImageWithoutEdit = React.memo(
     return (
       <View style={styles.container}>
         <View style={styles.cameraContainer}>
-          {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}
@@ -403,21 +402,16 @@ const CaptureImageWithoutEdit = React.memo(
               }}
               onError={(error) => {
                 console.log('Camera error:', error);
-                setCameraError('Camera error occurred');
-                setCameraInitialized(false);
               }}
-              enableZoomGesture={false}
-              exposure={0}
-              pixelFormat="yuv"
-              preset="medium"
-              orientation="portrait"
             />
           ) : (
             <View style={styles.placeholderContainer}>
-              <Icon name="camera-alt" size={40} color={Global.AppTheme.light} />
-              <Text style={styles.placeholderText}>
-                {cameraError || 'Camera not available'}
-              </Text>
+              {isInitializing && (
+                <View style={styles.loadingContainer}>
+                  <ActivityIndicator size="large" color={Global.AppTheme.primary} />
+                  <Text style={styles.placeholderText}>Initializing camera...</Text>
+                </View>
+              )}
               <TouchableOpacity
                 style={styles.retryButton}
                 onPress={handleRetry}
@@ -428,7 +422,7 @@ const CaptureImageWithoutEdit = React.memo(
             </View>
           )}
 
-          {!showCodeScanner && showCamera && cameraDevice && livenessLevel > 0 && (
+          {!showCodeScanner && showCamera && cameraDevice && (livenessLevel || 0) > 0 && (
             <View style={styles.livenessContainer}>
               <Animated.View
                 style={[
@@ -476,8 +470,8 @@ const CaptureImageWithoutEdit = React.memo(
                               livenessStep > step
                                 ? styles.stepCompleted
                                 : livenessStep === step
-                                ? styles.stepCurrent
-                                : styles.stepPending,
+                                  ? styles.stepCurrent
+                                  : styles.stepPending,
                             ]}
                           >
                             <Text style={styles.stepText}>{step + 1}</Text>
@@ -525,7 +519,7 @@ const CaptureImageWithoutEdit = React.memo(
             </View>
           )}
 
-          {!showCodeScanner && showCamera && cameraDevice && livenessLevel === 0 && (
+          {!showCodeScanner && showCamera && cameraDevice && (livenessLevel || 0) === 0 && (
             <View style={styles.livenessContainer}>
               <Animated.View
                 style={[

package/src/components/Loader.js

@@ -10,35 +10,35 @@ import {
 } from "react-native";
 import FastImage from 'react-native-fast-image';
 import { normalize } from "react-native-elements";
+import { getLoaderGif } from "../utils/getLoaderGif";
 
 export default function Loader({
-  visible = false,
+  state,
   overlayColor = 'rgba(0,0,0,0.4)',
   loaderColor = 'lightblue',
   size = 50,
-  gifSource,
+  gifSource = { uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/Face.gif" },
   message = '',
   messageStyle = {},
   animationType = 'fade',
   hasBackground = true,
   borderRadius = 20,
-  shadow = true
+  shadow = true,
+  imageurl,
 }) {
   const [rotation] = useState(new Animated.Value(0));
   const [pulse] = useState(new Animated.Value(1));
   const [fade] = useState(new Animated.Value(0));
   const [imageSource, setImageSource] = useState(gifSource);
-
+  const error = getLoaderGif(state.animationState, state.currentStep, "http://emr.amalaims.org:9393/", imageurl)
   // Reset imageSource whenever gifSource prop changes
   useEffect(() => {
     setImageSource(gifSource);
   }, [gifSource]);
 
   const handleImageError = () => {
-    // Fallback to default heartpulse GIF when image fails to load
-    setImageSource({ 
-      uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif" 
-    });
+    console.log('LoaderError', JSON.stringify(error))
+    setImageSource(error);
   };
 
   // Rotation animation
@@ -92,8 +92,8 @@ export default function Loader({
     />
   ) : (
     <Animated.View style={[
-      styles.defaultLoader, 
-      { 
+      styles.defaultLoader,
+      {
         borderColor: loaderColor,
         transform: [{ rotate: spin }, { scale: pulse }],
         width: normalize(size),
@@ -102,8 +102,8 @@ export default function Loader({
       }
     ]}>
       <View style={[
-        styles.innerCircle, 
-        { 
+        styles.innerCircle,
+        {
           backgroundColor: loaderColor,
           width: normalize(size / 2),
           height: normalize(size / 2)
@@ -116,19 +116,19 @@ export default function Loader({
     <Modal
       animationType={animationType}
       transparent={true}
-      visible={visible}
-      onRequestClose={() => {}}
+      visible={state.isLoading}
+      onRequestClose={() => { }}
     >
       <Animated.View style={[
         styles.modalContainer,
-        { 
+        {
           backgroundColor: overlayColor,
           opacity: fade
         }
       ]}>
         <Animated.View style={[
           styles.loaderContainer,
-          { 
+          {
             backgroundColor: hasBackground ? 'white' : 'transparent',
             borderRadius: normalize(borderRadius),
             transform: [{ scale: pulse }],

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 = 800; // increased to reduce load
+const FRAME_PROCESSOR_MIN_INTERVAL_MS = 500;
 const MIN_FACE_SIZE = 0.2;
 
 // Liveness detection constants
@@ -19,19 +19,19 @@ const BLINK_THRESHOLD = 0.3; // Eye closed if below this
 const REQUIRED_BLINKS = 3;
 
 export const useFaceDetectionFrameProcessor = ({
-  onStableFaceDetected = () => {},
-  onFacesUpdate = () => {},
-  onLivenessUpdate = () => {},
+  onStableFaceDetected = () => { },
+  onFacesUpdate = () => { },
+  onLivenessUpdate = () => { },
   showCodeScanner = false,
   isLoading = false,
   isActive = true,
-  livenessLevel = 3, // 0=no liveness, 1=blink only, 2=face turn only, 3=both
+  livenessLevel,
 }) => {
   const { detectFaces } = useFaceDetector({
     performanceMode: 'fast',
     landmarkMode: 'none',
     contourMode: 'none',
-    classificationMode: livenessLevel === 1 || livenessLevel === 3 ? 'all' : 'none', // Only enable classification for blink detection
+    classificationMode: (livenessLevel === 1 || livenessLevel === 3) ? 'all' : 'none', // Only enable classification for blink detection
     minFaceSize: MIN_FACE_SIZE,
   });
 
@@ -49,7 +49,7 @@ export const useFaceDetectionFrameProcessor = ({
         captured: false,
         showCodeScanner: showCodeScanner,
         isActive: isActive,
-        livenessLevel: livenessLevel,
+        livenessLevel: livenessLevel || 0, // Ensure default value
         livenessStep: 0, // 0=center, 1=left/center, 2=right/blink, 3=blink/capture, 4=capture
         leftTurnVerified: false,
         rightTurnVerified: false,
@@ -66,7 +66,7 @@ export const useFaceDetectionFrameProcessor = ({
     // update flags without recreating object
     sharedState.value.showCodeScanner = !!showCodeScanner;
     sharedState.value.isActive = !!isActive;
-    sharedState.value.livenessLevel = livenessLevel;
+    sharedState.value.livenessLevel = livenessLevel || 0;
 
     if (isActive && sharedState.value.captured) {
       // reset minimal fields
@@ -134,8 +134,9 @@ export const useFaceDetectionFrameProcessor = ({
   const frameProcessor = useFrameProcessor(
     (frame) => {
       'worklet';
+      console.log('qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq',JSON.stringify(frame))
       const state = sharedState.value;
-
+      
       // quick exits — do not call frame.release here; we'll release in finally
       if (state.showCodeScanner || state.captured || isLoading || !state.isActive) {
         frame.release?.();
@@ -193,11 +194,13 @@ export const useFaceDetectionFrameProcessor = ({
           } = state;
 
           // ---- Liveness Logic Based on Level ----
+          // Level 0: Basic face detection with stability check only
           if (livenessLevel === 0) {
             // No liveness check - only stability
             // Skip all liveness steps and go directly to capture when stable
             livenessStep = 0;
-          } 
+          }
+          // Level 1: Face detection with blink verification
           else if (livenessLevel === 1) {
             // Blink detection only
             if (livenessStep === 0) {
@@ -348,13 +351,13 @@ export const useFaceDetectionFrameProcessor = ({
 
           // Capture condition based on liveness level
           let shouldCapture = false;
-          
+
+          // Level 0: Basic face detection - capture when stable
           if (livenessLevel === 0) {
-            // No liveness - capture when stable
             shouldCapture = newStableCount >= FACE_STABILITY_THRESHOLD;
           }
+          // Level 1: Blink verification - capture after blinks and stable
           else if (livenessLevel === 1) {
-            // Blink only - capture after blinks and stable
             shouldCapture = livenessStep === 2 && blinkCount >= REQUIRED_BLINKS && newStableCount >= FACE_STABILITY_THRESHOLD;
           }
           else if (livenessLevel === 2) {
@@ -381,7 +384,7 @@ export const useFaceDetectionFrameProcessor = ({
         // protect worklet from throwing
         try {
           console.error('FrameProcessor worklet error:', err);
-        } catch (e) {}
+        } catch (e) { }
       } finally {
         // Always release the frame exactly once
         frame.release?.();

package/src/index.js

@@ -294,7 +294,7 @@ const BiometricModal = React.memo(
               body
             );
 
-            console.log("📨 API Response:", response);
+            console.log("📨 API Response:", JSON.stringify(response));
 
             if (response?.httpstatus === 200) {
               console.log("✅ Face recognition successful");
@@ -326,9 +326,9 @@ const BiometricModal = React.memo(
                 }, 1200);
               }
             } else {
-              console.warn("⚠️ Face recognition failed:", response?.data?.error);
+              console.warn("⚠️ Face recognition failed:", response?.httpstatus);
               handleProcessError(
-                response?.data?.error?.message ||
+                response?.data?.message ||
                 "Face not recognized. Please try again."
               );
             }
@@ -543,13 +543,8 @@ const BiometricModal = React.memo(
       }
     }, [data, modalVisible, startProcess]);
 
-    // Loader source memoization
-    const loaderSource = useMemo(
-      () =>
-        state.isLoading &&
-        getLoaderGif(state.animationState, state.currentStep, apiurl, imageurl),
-      [state.isLoading, state.animationState, state.currentStep, apiurl, imageurl]
-    );
+
+
 
     // Determine if camera should be shown
     const shouldShowCamera =
@@ -626,10 +621,9 @@ const BiometricModal = React.memo(
               currentTime={countdown}
             />
           </View>
-
           <Loader
-            gifSource={loaderSource}
-            visible={state.isLoading}
+            state={state}
+            gifSource={getLoaderGif(state.animationState, state.currentStep, apiurl, imageurl)}
           />
         </View>
       </Modal>

package/src/utils/Global.js

@@ -1,8 +1,8 @@
 export class Global {
   // ====== APP CONSTANTS ======
   static AppTheme = {
-    primary: '#6C63FF',
-    primaryLight: '#8A85FF',
+    primary: '#094485',
+    primaryLight: '#1b89ffff',
     success: '#4CAF50',
     error: '#F44336',
     warning: '#FF9800',

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,imageurl ='file/getCommonFile/image/') => {
+export const getLoaderGif = (animationState, currentStep,apiurl,imageurl ='file/getCommonFile/image/') => {
   const FaceGifUrl =
-    `${APIURL}${imageurl}Face.gif`;
+    `${apiurl}${imageurl}Face.gif`;
   const LocationGifUrl =
-    `${APIURL}${imageurl}Location.gif`;
+    `${apiurl}${imageurl}Location.gif`;
 
   if (
     animationState === Global.AnimationStates.faceScan ||