react-native-biometric-verifier 0.0.42 → 0.0.44

package/package.json

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

package/src/components/Notification.js

@@ -1,32 +1,23 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Text, Platform, StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import PropTypes from 'prop-types';
 import { Global } from '../utils/Global';
 
-export const Notification = ({ notification, fadeAnim, slideAnim }) => {
-  if (!notification || typeof notification !== 'object') {
-    console.warn('Notification: Invalid or missing notification object');
-    return null;
-  }
+export const Notification = ({ notification = {}, fadeAnim, slideAnim }) => {
+  const { visible = false, type = 'info', message = '' } = notification;
 
-  const { visible, type = 'info', message = '' } = notification;
-  if (!visible) return null;
+  // Animations (must ALWAYS exist)
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const shakeAnim = useRef(new Animated.Value(0)).current;
 
-  // Icon and color mapping
   const iconMap = {
     success: { name: 'check-circle', color: Global.AppTheme.success },
     error: { name: 'error', color: Global.AppTheme.error },
     info: { name: 'info', color: Global.AppTheme.info },
   };
 
-  const { name: iconName, color: iconColor } = iconMap[type] || iconMap.info;
-
-  // Heartbeat animation (scale in/out)
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-
-  // Shake animation (rotation wiggle)
-  const shakeAnim = useRef(new Animated.Value(0)).current;
+  const { name: iconName, color: iconColor } =
+    iconMap[type] || iconMap.info;
 
   useEffect(() => {
     const heartbeat = Animated.loop(
@@ -78,20 +69,20 @@ export const Notification = ({ notification, fadeAnim, slideAnim }) => {
       heartbeat.stop();
       shake.stop();
     };
-  }, [visible, type, scaleAnim, shakeAnim]);
+  }, [visible, type]);
 
-  // Shake rotation mapping (small wiggle)
-  const shakeInterpolate = shakeAnim.interpolate({
+  const shakeRotate = shakeAnim.interpolate({
     inputRange: [-1, 1],
     outputRange: ['-10deg', '10deg'],
   });
 
   return (
     <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
       style={[
         styles.container,
         {
-          opacity: fadeAnim instanceof Animated.Value ? fadeAnim : 1,
+          opacity: visible ? 1 : 0,
           transform: [
             { translateY: slideAnim instanceof Animated.Value ? slideAnim : 0 },
           ],
@@ -102,12 +93,13 @@ export const Notification = ({ notification, fadeAnim, slideAnim }) => {
         style={{
           transform: [
             { scale: scaleAnim },
-            ...(type === 'error' ? [{ rotate: shakeInterpolate }] : []),
+            ...(type === 'error' ? [{ rotate: shakeRotate }] : []),
           ],
         }}
       >
-        <Icon name={iconName} size={50} color={iconColor} style={styles.icon} />
+        <Icon name={iconName} size={50} color={iconColor} />
       </Animated.View>
+
       <Text style={styles.message}>
         {message || 'No message provided'}
       </Text>
@@ -142,20 +134,4 @@ const styles = StyleSheet.create({
   },
 });
 
-Notification.propTypes = {
-  notification: PropTypes.shape({
-    visible: PropTypes.bool.isRequired,
-    type: PropTypes.oneOf(['success', 'error', 'info']),
-    message: PropTypes.string,
-  }),
-  fadeAnim: PropTypes.instanceOf(Animated.Value),
-  slideAnim: PropTypes.instanceOf(Animated.Value),
-};
-
-Notification.defaultProps = {
-  notification: { visible: false, type: 'info', message: '' },
-  fadeAnim: new Animated.Value(1),
-  slideAnim: new Animated.Value(0),
-};
-
 export default Notification;

package/src/components/StepIndicator.js

@@ -7,45 +7,17 @@ import { Global } from '../utils/Global';
 const StepIndicator = ({ currentStep, qrscan }) => {
   return (
     <View style={styles.statusContainer}>
-      {/* Identity Step */}
-      <View style={styles.statusItem}>
-        <Icon
-          name="face"
-          size={20}
-          color={
-            currentStep === "Identity Verification" ||
-            currentStep === "Location Verification" ||
-            currentStep === "Complete"
-              ? Global.AppTheme.primary
-              : Global.AppTheme.light
-          }
-          style={styles.statusIcon}
-        />
-        <Text
-          style={[
-            styles.statusText,
-            (currentStep === "Identity Verification" ||
-              currentStep === "Location Verification" ||
-              currentStep === "Complete") && styles.statusTextActive,
-          ]}
-        >
-          Identity
-        </Text>
-      </View>
-
-      {/* Show Location only if qrscan = true */}
       {qrscan && (
         <>
-          <View style={styles.statusSeparator} />
           <View style={styles.statusItem}>
             <Icon
               name="location-on"
               size={20}
               color={
                 currentStep === "Location Verification" ||
-                currentStep === "Complete"
-                  ? Global.AppTheme.primary
-                  : Global.AppTheme.light
+                  currentStep === "Complete"
+                  ? Global.AppTheme.light
+                  : Global.AppTheme.primary
               }
               style={styles.statusIcon}
             />
@@ -56,11 +28,41 @@ const StepIndicator = ({ currentStep, qrscan }) => {
                   currentStep === "Complete") && styles.statusTextActive,
               ]}
             >
-              Location
+              QR
             </Text>
           </View>
+          <View style={styles.statusSeparator} />
         </>
       )}
+
+      {/* Identity Step */}
+      <View style={styles.statusItem}>
+        <Icon
+          name="face"
+          size={20}
+          color={
+            currentStep === "Identity Verification" ||
+              currentStep === "Location Verification" ||
+              currentStep === "Complete"
+              ? Global.AppTheme.light
+              : Global.AppTheme.primary
+          }
+          style={styles.statusIcon}
+        />
+        <Text
+          style={[
+            styles.statusText,
+            (currentStep === "Identity Verification" ||
+              currentStep === "Location Verification" ||
+              currentStep === "Complete") && styles.statusTextActive,
+          ]}
+        >
+          ID
+        </Text>
+      </View>
+
+      {/* Show Location only if qrscan = true */}
+
     </View>
   );
 };

package/src/index.js

@@ -3,7 +3,8 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-  useMemo,
+  useImperativeHandle,
+  forwardRef,
 } from "react";
 import {
   View,
@@ -37,8 +38,21 @@ import { Notification } from "./components/Notification";
 import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
-const BiometricModal = React.memo(
-  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl, navigation, MaxDistanceMeters = 100, duration = 100 }) => {
+const BiometricModal = forwardRef(({
+  data, 
+  depkey, 
+  qrscan = false, 
+  callback, 
+  apiurl, 
+  onclose, 
+  frameProcessorFps, 
+  livenessLevel, 
+  fileurl, 
+  imageurl, 
+  navigation, 
+  MaxDistanceMeters = 50, 
+  duration = 100 
+}, ref) => {
     // Custom hooks
     const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown(duration);
     const { requestLocationPermission, getCurrentLocation } = useGeolocation();
@@ -48,13 +62,14 @@ const BiometricModal = React.memo(
 
     // State
     const [modalVisible, setModalVisible] = useState(false);
-    const [cameraType, setCameraType] = useState("front");
+    const [cameraType, setCameraType] = useState("back"); // Start with back camera for QR scan
     const [state, setState] = useState({
       isLoading: false,
       loadingType: Global.LoadingTypes.none,
       currentStep: "Start",
       employeeData: null,
-      animationState: Global.AnimationStates.faceScan,
+      animationState: Global.AnimationStates.qrScan, // Start with QR scan animation
+      qrData: null, // Store QR data for later use in face recognition
     });
 
     // Refs
@@ -63,11 +78,18 @@ const BiometricModal = React.memo(
     const responseRef = useRef(null);
     const processedRef = useRef(false);
     const resetTimeoutRef = useRef(null);
-
     // Animation values
     const iconScaleAnim = useRef(new Animated.Value(1)).current;
     const iconOpacityAnim = useRef(new Animated.Value(0)).current;
 
+    // Expose methods to parent via ref
+    useImperativeHandle(ref, () => ({
+      reset: resetState,
+      start: startProcess,
+      close: resetState,
+      getStatus: () => state,
+    }));
+
     // Cleanup on unmount
     useEffect(() => {
       return () => {
@@ -145,14 +167,17 @@ const BiometricModal = React.memo(
 
     // Reset state helper
     const resetState = useCallback(() => {
-      onclose(false);
+      if (onclose) {
+        onclose(false);
+      }
 
       setState({
         isLoading: false,
         loadingType: Global.LoadingTypes.none,
         currentStep: "Start",
         employeeData: null,
-        animationState: Global.AnimationStates.faceScan,
+        animationState: Global.AnimationStates.qrScan,
+        qrData: null,
       });
 
       setModalVisible(false);
@@ -164,7 +189,7 @@ const BiometricModal = React.memo(
         clearTimeout(resetTimeoutRef.current);
         resetTimeoutRef.current = null;
       }
-    }, [resetCountdown, clearNotification]);
+    }, [resetCountdown, clearNotification, onclose]);
 
     // Error handler
     const handleProcessError = useCallback(
@@ -195,7 +220,7 @@ const BiometricModal = React.memo(
     const handleCountdownFinish = useCallback(() => {
       handleProcessError("Time is up! Please try again.");
 
-      if (navigation.canGoBack()) {
+      if (navigation?.canGoBack?.()) {
         navigation.goBack();
       }
     }, [handleProcessError, navigation]);
@@ -210,112 +235,7 @@ const BiometricModal = React.memo(
       return true;
     }, [apiurl, handleProcessError]);
 
-    // Face scan upload
-    const uploadFaceScan = useCallback(
-      async (selfie) => {
-        if (!validateApiUrl()) return;
-        const currentData = dataRef.current;
-
-        if (!currentData) {
-          handleProcessError("Employee data not found.");
-          return;
-        }
-
-        updateState({
-          isLoading: true,
-          loadingType: Global.LoadingTypes.faceRecognition,
-          animationState: Global.AnimationStates.processing,
-        });
-
-        InteractionManager.runAfterInteractions(async () => {
-          let base64;
-
-          try {
-            updateState({
-              loadingType: Global.LoadingTypes.imageProcessing,
-            });
-
-            base64 = await convertImageToBase64(selfie?.uri);
-          } catch (err) {
-            console.error("Image conversion failed:", err);
-            handleProcessError("Image conversion failed.", err);
-            return;
-          }
-
-          if (!base64) {
-            handleProcessError("Failed to process image.");
-            return;
-          }
-
-          try {
-            const body = { image: base64 };
-            const header = { faceid: currentData };
-            const buttonapi = `${apiurl}python/recognize`;
-
-            updateState({
-              loadingType: Global.LoadingTypes.networkRequest,
-            });
-
-            const response = await networkServiceCall(
-              "POST",
-              buttonapi,
-              header,
-              body
-            );
-
-            if (response?.httpstatus === 200) {
-              responseRef.current = response;
-
-              updateState({
-                employeeData: response.data?.data || null,
-                animationState: Global.AnimationStates.success,
-                isLoading: false,
-                loadingType: Global.LoadingTypes.none,
-              });
-
-              notifyMessage("Identity verified successfully!", "success");
-
-              if (qrscan) {
-                setTimeout(() => startQRCodeScan(), 1200);
-              } else {
-                safeCallback(responseRef.current);
-
-                if (resetTimeoutRef.current) {
-                  clearTimeout(resetTimeoutRef.current);
-                }
-
-                resetTimeoutRef.current = setTimeout(() => {
-                  resetState();
-                }, 1200);
-              }
-            } else {
-              handleProcessError(
-                response?.data?.message ||
-                "Face not recognized. Please try again."
-              );
-            }
-          } catch (error) {
-            console.error("Network request failed:", error);
-            handleProcessError(
-              "Connection error. Please check your network.",
-              error
-            );
-          }
-        });
-      },
-      [
-        convertImageToBase64,
-        notifyMessage,
-        qrscan,
-        resetState,
-        updateState,
-        validateApiUrl,
-        safeCallback,
-        handleProcessError
-      ]
-    );
-
-    // QR code processing
+    // QR code processing - FIRST STEP
     const handleQRScanned = useCallback(
       async (qrCodeData) => {
         if (!validateApiUrl()) return;
@@ -352,14 +272,12 @@ const BiometricModal = React.memo(
 
           const location = await getCurrentLocation();
 
-          const [latStr, lngStr] = qrString.split(",");
+          const [latStr, lngStr, qrkey] = qrString.split(",");
           const lat = parseFloat(latStr);
           const lng = parseFloat(lngStr);
           const validCoords = !isNaN(lat) && !isNaN(lng);
-          const validDev =
-            !isNaN(location?.latitude) && !isNaN(location?.longitude);
-
-          if (validCoords && validDev) {
+          const validDev = !isNaN(location?.latitude) && !isNaN(location?.longitude);
+          if (validCoords && validDev && qrkey === depkey) {
             updateState({
               loadingType: Global.LoadingTypes.calculateDistance,
             });
@@ -370,7 +288,6 @@ const BiometricModal = React.memo(
               location.latitude,
               location.longitude
             );
-
             if (distance <= MaxDistanceMeters) {
               const locationDetails = {
                 qrLocation: {
@@ -387,27 +304,24 @@ const BiometricModal = React.memo(
                 verifiedAt: new Date().toISOString(),
               };
 
+              // Store location details and QR data for face recognition
               responseRef.current = {
-                ...(responseRef.current || {}), // existing faceData
                 location: locationDetails,
               };
 
-              safeCallback(responseRef.current);
-
-              notifyMessage("Location verified successfully!", "success");
-
+              // Store QR data in state for face recognition step
               updateState({
+                qrData: qrString,
                 animationState: Global.AnimationStates.success,
                 isLoading: false,
                 loadingType: Global.LoadingTypes.none,
               });
 
-              if (resetTimeoutRef.current) {
-                clearTimeout(resetTimeoutRef.current);
-              }
+              notifyMessage("Location verified successfully!", "success");
 
-              resetTimeoutRef.current = setTimeout(() => {
-                resetState();
+              // Start face recognition after a brief delay
+              setTimeout(() => {
+                startFaceRecognition();
               }, 1200);
             }
             else {
@@ -430,49 +344,168 @@ const BiometricModal = React.memo(
         getCurrentLocation,
         notifyMessage,
         requestLocationPermission,
+        updateState,
+        validateApiUrl,
+        handleProcessError,
+        depkey,
+        MaxDistanceMeters
+      ]
+    );
+
+    // Face scan upload - SECOND STEP
+    const uploadFaceScan = useCallback(
+      async (selfie) => {
+        if (!validateApiUrl()) return;
+
+        // Check if QR scan was completed successfully
+        if (!state.qrData) {
+          handleProcessError("Please complete QR scan first.");
+          return;
+        }
+
+        const currentData = dataRef.current;
+
+        if (!currentData) {
+          handleProcessError("Employee data not found.");
+          return;
+        }
+
+        updateState({
+          isLoading: true,
+          loadingType: Global.LoadingTypes.faceRecognition,
+          animationState: Global.AnimationStates.processing,
+        });
+
+        InteractionManager.runAfterInteractions(async () => {
+          let base64;
+
+          try {
+            updateState({
+              loadingType: Global.LoadingTypes.imageProcessing,
+            });
+
+            base64 = await convertImageToBase64(selfie?.uri);
+          } catch (err) {
+            console.error("Image conversion failed:", err);
+            handleProcessError("Image conversion failed.", err);
+            return;
+          }
+
+          if (!base64) {
+            handleProcessError("Failed to process image.");
+            return;
+          }
+
+          try {
+            const body = { image: base64 };
+            const header = { faceid: currentData };
+            const buttonapi = `${apiurl}python/recognize`;
+
+            updateState({
+              loadingType: Global.LoadingTypes.networkRequest,
+            });
+
+            const response = await networkServiceCall(
+              "POST",
+              buttonapi,
+              header,
+              body
+            );
+
+            if (response?.httpstatus === 200) {
+              // Combine face recognition response with QR location data
+              responseRef.current = {
+                ...responseRef.current, // Contains location data from QR scan
+                ...response.data?.data || {},
+                faceRecognition: response.data?.data || null,
+              };
+
+              updateState({
+                employeeData: response.data?.data || null,
+                animationState: Global.AnimationStates.success,
+                isLoading: false,
+                loadingType: Global.LoadingTypes.none,
+              });
+
+              notifyMessage("Identity verified successfully!", "success");
+
+              // Call the callback with combined data
+              safeCallback(responseRef.current);
+
+              if (resetTimeoutRef.current) {
+                clearTimeout(resetTimeoutRef.current);
+              }
+
+              resetTimeoutRef.current = setTimeout(() => {
+                resetState();
+              }, 1200);
+            } else {
+              handleProcessError(
+                response?.data?.message ||
+                "Face not recognized. Please try again."
+              );
+            }
+          } catch (error) {
+            console.error("Network request failed:", error);
+            handleProcessError(
+              "Connection error. Please check your network.",
+              error
+            );
+          }
+        });
+      },
+      [
+        convertImageToBase64,
+        notifyMessage,
         resetState,
         updateState,
         validateApiUrl,
         safeCallback,
-        handleProcessError
+        handleProcessError,
+        state.qrData,
+        apiurl
       ]
     );
 
     // Image capture handler
     const handleImageCapture = useCallback(
       async (capturedData) => {
-        if (state.currentStep === "Identity Verification") {
-          uploadFaceScan(capturedData);
-        } else if (state.currentStep === "Location Verification") {
-          handleQRScanned(capturedData);
+        if (state.currentStep === "Location Verification") {
+          await handleQRScanned(capturedData);
+        } else if (state.currentStep === "Identity Verification") {
+          await uploadFaceScan(capturedData);
         }
       },
       [state.currentStep, uploadFaceScan, handleQRScanned]
     );
 
-    // Start face scan
-    const handleStartFaceScan = useCallback(() => {
+    // Start QR code scan - FIRST STEP
+    const handleStartQRScan = useCallback(() => {
       updateState({
-        currentStep: "Identity Verification",
-        animationState: Global.AnimationStates.faceScan,
+        currentStep: "Location Verification",
+        animationState: Global.AnimationStates.qrScan,
       });
-      setCameraType("front");
+      setCameraType("back");
     }, [updateState]);
 
-    // Start QR code scan
-    const startQRCodeScan = useCallback(() => {
+    // Start face recognition - SECOND STEP
+    const startFaceRecognition = useCallback(() => {
       updateState({
-        currentStep: "Location Verification",
-        animationState: Global.AnimationStates.qrScan,
+        currentStep: "Identity Verification",
+        animationState: Global.AnimationStates.faceScan,
       });
-      setCameraType("back");
+      setCameraType("front");
     }, [updateState]);
 
     // Start the verification process
     const startProcess = useCallback(() => {
       startCountdown(handleCountdownFinish);
-      handleStartFaceScan();
-    }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
+      if (qrscan) {
+        handleStartQRScan();
+      } else {
+        startFaceRecognition();
+      }
+    }, [handleCountdownFinish, handleStartQRScan, startCountdown, startFaceRecognition, qrscan]);
 
     // Open modal when data is received
     useEffect(() => {
@@ -535,7 +568,10 @@ const BiometricModal = React.memo(
           </View>
 
           <View style={styles.topContainerstep}>
-            <StepIndicator currentStep={state.currentStep} qrscan={qrscan} />
+            <StepIndicator
+              currentStep={state.currentStep}
+              qrscan={qrscan}
+            />
           </View>
 
           {state.employeeData && (
@@ -568,6 +604,12 @@ const BiometricModal = React.memo(
   }
 );
 
+// Wrap with memo after forwardRef
+const MemoizedBiometricModal = React.memo(BiometricModal);
+
+// Add display name for debugging
+MemoizedBiometricModal.displayName = 'BiometricModal';
+
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
@@ -662,4 +704,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default BiometricModal;
+export default MemoizedBiometricModal;