react-native-biometric-verifier 0.0.8 → 0.0.10

package/package.json

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

package/src/components/StateIndicator.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, ActivityIndicator, Easing } from 'react-native';
+import { Animated, Easing } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { ANIMATION_STATES, COLORS } from '../utils/constants';
 import { styles } from './styles';
@@ -100,10 +100,7 @@ export const StateIndicator = ({ state, size = 100 }) => {
       {(state === ANIMATION_STATES.PROCESSING ||
         state === ANIMATION_STATES.FACE_SCAN ||
         state === ANIMATION_STATES.QR_SCAN) ? (
-        <ActivityIndicator
-          size="large"
-          color={state === ANIMATION_STATES.PROCESSING ? COLORS.info : COLORS.primary}
-        />
+        null
       ) : (
         getIcon()
       )}

package/src/hooks/useSafeCallback.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+
+/**
+ * Hook to safely execute a callback function with error handling
+ */
+export const useSafeCallback = (callback, notifyMessage) => {
+  return useCallback(
+    (response) => {
+      if (typeof callback === "function") {
+        try {
+          callback(response);
+        } catch (err) {
+          console.error("Callback execution failed:", err);
+          if (typeof notifyMessage === "function") {
+            notifyMessage("Unexpected error while processing callback.", "error");
+          }
+        }
+      } else {
+        console.log("Biometric Verification Response:", response);
+      }
+    },
+    [callback, notifyMessage]
+  );
+};

package/src/index.js

@@ -1,326 +1,374 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+} from "react";
 import {
   View,
   TouchableOpacity,
   Text,
   Modal,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { useCountdown } from './hooks/useCountdown';
-import { useGeolocation } from './hooks/useGeolocation';
-import { useImageProcessing } from './hooks/useImageProcessing';
-import { useNotifyMessage } from './hooks/useNotifyMessage';
-import { getDistanceInMeters } from './utils/distanceCalculator';
+  InteractionManager,
+} from "react-native";
+import Icon from "react-native-vector-icons/MaterialIcons";
+import { useCountdown } from "./hooks/useCountdown";
+import { useGeolocation } from "./hooks/useGeolocation";
+import { useImageProcessing } from "./hooks/useImageProcessing";
+import { useNotifyMessage } from "./hooks/useNotifyMessage";
+import { getDistanceInMeters } from "./utils/distanceCalculator";
 import {
   ANIMATION_STATES,
   COLORS,
   COUNTDOWN_DURATION,
   MAX_DISTANCE_METERS,
-} from './utils/constants';
-import Loader from './components/Loader';
-import { CountdownTimer } from './components/CountdownTimer';
-import { EmployeeCard } from './components/EmployeeCard';
-import { Notification } from './components/Notification';
-import { StateIndicator } from './components/StateIndicator';
-import { styles } from './components/styles';
-import { useNavigation } from '@react-navigation/native';
-import networkServiceCall from './utils/NetworkServiceCall';
-import { getLoaderGif } from './utils/getLoaderGif';
-
-const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback, apiurl }) => {
-  const navigation = useNavigation();
-
-  const { countdown, startCountdown, resetCountdown } = useCountdown();
-  const { requestLocationPermission, getCurrentLocation } = useGeolocation();
-  const { convertImageToBase64 } = useImageProcessing();
-  const { notification, fadeAnim, slideAnim, notifyMessage } = useNotifyMessage();
-
-  const [state, setState] = useState({
-    isLoading: false,
-    currentStep: 'Start',
-    employeeData: null,
-    modalVisible: false,
-    animationState: ANIMATION_STATES.FACE_SCAN,
-  });
-
-  const dataRef = useRef(data);
-  const mountedRef = useRef(true);
-  const responseRef = useRef(null);
-
-  const safeCallback = useCallback(
-    (response) => {
-      if (typeof callback === 'function') {
-        try {
-          callback(response);
-        } catch (err) {
-          console.error('Callback execution failed:', err);
-          notifyMessage('Unexpected error while processing callback.', 'error');
-        }
-      } else {
-        console.log('Biometric Verification Response:', response);
-      }
-    },
-    [callback, notifyMessage]
-  );
-
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    dataRef.current = data;
-  }, [data]);
-
-  const updateState = useCallback((newState) => {
-    if (mountedRef.current) {
-      setState((prev) => ({ ...prev, ...newState }));
-    }
-  }, []);
-
-  const resetState = useCallback(() => {
-    updateState({
-      currentStep: 'Start',
+} from "./utils/constants";
+import Loader from "./components/Loader";
+import { CountdownTimer } from "./components/CountdownTimer";
+import { EmployeeCard } from "./components/EmployeeCard";
+import { Notification } from "./components/Notification";
+import { StateIndicator } from "./components/StateIndicator";
+import { styles } from "./components/styles";
+import { useNavigation } from "@react-navigation/native";
+import networkServiceCall from "./utils/NetworkServiceCall";
+import { getLoaderGif } from "./utils/getLoaderGif";
+import { useSafeCallback } from "./hooks/useSafeCallback";
+
+const BiometricVerificationModal = React.memo(
+  ({ data, qrscan = false, callback, apiurl }) => {
+    const navigation = useNavigation();
+
+    const { countdown, startCountdown, resetCountdown } = useCountdown();
+    const { requestLocationPermission, getCurrentLocation } = useGeolocation();
+    const { convertImageToBase64 } = useImageProcessing();
+    const { notification, fadeAnim, slideAnim, notifyMessage } =
+      useNotifyMessage();
+
+    const [modalVisible, setModalVisible] = useState(false);
+    const [state, setState] = useState({
+      isLoading: false,
+      currentStep: "Start",
       employeeData: null,
       animationState: ANIMATION_STATES.FACE_SCAN,
-      isLoading: false,
     });
-    resetCountdown();
-  }, [resetCountdown, updateState]);
-
-  const handleProcessError = useCallback(
-    (message, errorObj = null) => {
-      if (errorObj) console.error(message, errorObj);
-      notifyMessage(message, 'error');
-      updateState({ animationState: ANIMATION_STATES.ERROR });
-      setTimeout(resetState, 1200);
-    },
-    [notifyMessage, resetState, updateState]
-  );
-
-  const handleCountdownFinish = useCallback(() => {
-    handleProcessError('Time is up! Please try again.');
-    updateState({ modalVisible: false });
-    if (navigation.canGoBack()) navigation.goBack();
-  }, [handleProcessError, navigation, updateState]);
-
-  const validateApiUrl = useCallback(() => {
-    if (!apiurl || typeof apiurl !== 'string') {
-      handleProcessError('Invalid API URL configuration.');
-      return false;
-    }
-    return true;
-  }, [apiurl, handleProcessError]);
-
-  const uploadFaceScan = useCallback(
-    async (selfie) => {
-      if (!validateApiUrl()) return;
-
-      const currentData = dataRef.current;
-      if (!currentData) {
-        handleProcessError('Employee data not found.');
-        return;
-      }
 
-      let base64;
-      try {
-        base64 = await convertImageToBase64(selfie?.uri);
-      } catch (err) {
-        handleProcessError('Image conversion failed.', err);
-        return;
+    const dataRef = useRef(data);
+    const mountedRef = useRef(true);
+    const responseRef = useRef(null);
+    const processedRef = useRef(false);
+
+    const safeCallback = useSafeCallback(callback, notifyMessage);
+
+    /** Cleanup on unmount */
+    useEffect(() => {
+      return () => {
+        mountedRef.current = false;
+      };
+    }, []);
+
+    useEffect(() => {
+      dataRef.current = data;
+    }, [data]);
+
+    const updateState = useCallback((newState) => {
+      if (mountedRef.current) {
+        setState((prev) => {
+          const merged = { ...prev, ...newState };
+          return prev !== merged ? merged : prev;
+        });
       }
-
-      if (!base64) {
-        handleProcessError('Failed to process image.');
-        return;
-      }
-
-      updateState({
-        isLoading: true,
-        animationState: ANIMATION_STATES.PROCESSING,
+    }, []);
+
+    const resetState = useCallback(() => {
+      console.log("🔄 Resetting biometric modal...");
+      setState({
+        isLoading: false,
+        currentStep: "Start",
+        employeeData: null,
+        animationState: ANIMATION_STATES.FACE_SCAN,
       });
-
-      try {
-        const body = { image: base64 };
-        const header = { faceid: currentData };
-        const buttonapi = `${apiurl}python/recognize`;
-        console.log('buttonapi', buttonapi);
-        const response = await networkServiceCall('POST', buttonapi, header, body);
-
-        if (response?.httpstatus === 200) {
-          responseRef.current = response;
-          updateState({
-            employeeData: response.data?.data || null,
-            animationState: ANIMATION_STATES.SUCCESS,
-          });
-          notifyMessage('Identity verified successfully!', 'success');
-
-          if (qrscan) {
-            setTimeout(() => startQRCodeScan(), 1500);
-          } else {
-            setTimeout(() => {
-              safeCallback(responseRef.current);
-              updateState({ modalVisible: false });
-              resetState();
-            }, 1500);
-          }
-        } else {
-          handleProcessError(
-            response?.data?.error?.message || 'Face not recognized. Please try again.'
-          );
-        }
-      } catch (error) {
-        handleProcessError('Connection error. Please check your network.', error);
-      } finally {
-        updateState({ isLoading: false });
+      setModalVisible(false);
+      processedRef.current = false;
+      resetCountdown();
+    }, [resetCountdown]);
+
+    const handleProcessError = useCallback(
+      (message, errorObj = null) => {
+        if (errorObj) console.error(message, errorObj);
+        notifyMessage(message, "error");
+        updateState({
+          animationState: ANIMATION_STATES.ERROR,
+          isLoading: false,
+        });
+        setTimeout(resetState, 1200);
+      },
+      [notifyMessage, resetState, updateState]
+    );
+
+    const handleCountdownFinish = useCallback(() => {
+      handleProcessError("Time is up! Please try again.");
+      resetState();
+      if (navigation.canGoBack()) navigation.goBack();
+    }, [handleProcessError, navigation, resetState]);
+
+    const validateApiUrl = useCallback(() => {
+      if (!apiurl || typeof apiurl !== "string") {
+        handleProcessError("Invalid API URL configuration.");
+        return false;
       }
-    },
-    [convertImageToBase64, notifyMessage, qrscan, resetState, updateState, validateApiUrl, safeCallback]
-  );
+      return true;
+    }, [apiurl, handleProcessError]);
+
+    const uploadFaceScan = useCallback(
+      async (selfie) => {
+        if (!validateApiUrl()) return;
+        const currentData = dataRef.current;
+        if (!currentData) {
+          handleProcessError("Employee data not found.");
+          return;
+        }
 
-  const handleStartFaceScan = useCallback(() => {
-    updateState({
-      currentStep: 'Identity Verification',
-      animationState: ANIMATION_STATES.FACE_SCAN,
-    });
-    navigation.navigate('CCaptureImageWithoutEdit', {
-      facedetection: true,
-      cameratype: 'front',
-      onSelect: uploadFaceScan,
-    });
-  }, [navigation, updateState, uploadFaceScan]);
+        updateState({
+          isLoading: true,
+          animationState: ANIMATION_STATES.PROCESSING,
+        });
+
+        InteractionManager.runAfterInteractions(async () => {
+          let base64;
+          try {
+            base64 = await convertImageToBase64(selfie?.uri);
+          } catch (err) {
+            handleProcessError("Image conversion failed.", err);
+            return;
+          }
 
-  const startQRCodeScan = useCallback(() => {
-    updateState({
-      currentStep: 'Location Verification',
-      animationState: ANIMATION_STATES.QR_SCAN,
-    });
-    navigation.navigate('CCaptureImageWithoutEdit', {
-      hidebuttons: true,
-      cameratype: 'back',
-      cameramoduletype: 2,
-      onSelect: handleQRScanned,
-    });
-  }, [navigation, updateState]);
+          if (!base64) {
+            handleProcessError("Failed to process image.");
+            return;
+          }
 
-  const handleQRScanned = useCallback(
-    async (qrCodeData) => {
-      if (!validateApiUrl()) return;
+          try {
+            const body = { image: base64 };
+            const header = { faceid: currentData };
+            const buttonapi = `${apiurl}python/recognize`;
+            console.log("buttonapi", buttonapi);
+            const response = await networkServiceCall(
+              "POST",
+              buttonapi,
+              header,
+              body
+            );
+
+            if (response?.httpstatus === 200) {
+              responseRef.current = response;
+              updateState({
+                employeeData: response.data?.data || null,
+                animationState: ANIMATION_STATES.SUCCESS,
+                isLoading: false,
+              });
+              notifyMessage("Identity verified successfully!", "success");
+
+              if (qrscan) {
+                setTimeout(() => startQRCodeScan(), 1200);
+              } else {
+                safeCallback(responseRef.current);
+                setTimeout(() => resetState(), 1200);
+              }
+            } else {
+              handleProcessError(
+                response?.data?.error?.message ||
+                  "Face not recognized. Please try again."
+              );
+            }
+          } catch (error) {
+            handleProcessError(
+              "Connection error. Please check your network.",
+              error
+            );
+          }
+        });
+      },
+      [
+        convertImageToBase64,
+        notifyMessage,
+        qrscan,
+        resetState,
+        updateState,
+        validateApiUrl,
+        safeCallback,
+      ]
+    );
+
+    const handleStartFaceScan = useCallback(() => {
+      updateState({
+        currentStep: "Identity Verification",
+        animationState: ANIMATION_STATES.FACE_SCAN,
+      });
+      navigation.navigate("CCaptureImageWithoutEdit", {
+        facedetection: true,
+        cameratype: "front",
+        onSelect: uploadFaceScan,
+      });
+    }, [navigation, updateState, uploadFaceScan]);
 
+    const startQRCodeScan = useCallback(() => {
       updateState({
-        animationState: ANIMATION_STATES.PROCESSING,
-        isLoading: true,
+        currentStep: "Location Verification",
+        animationState: ANIMATION_STATES.QR_SCAN,
+      });
+      navigation.navigate("CCaptureImageWithoutEdit", {
+        hidebuttons: true,
+        cameratype: "back",
+        cameramoduletype: 2,
+        onSelect: handleQRScanned,
       });
+    }, [navigation, updateState]);
 
-      try {
-        const hasPermission = await requestLocationPermission();
-        if (!hasPermission) {
-          handleProcessError('Location permission not granted.');
-          return;
-        }
+    const handleQRScanned = useCallback(
+      async (qrCodeData) => {
+        if (!validateApiUrl()) return;
 
-        const qrString = typeof qrCodeData === 'object' ? qrCodeData?.data : qrCodeData;
-        if (!qrString || typeof qrString !== 'string') {
-          handleProcessError('Invalid QR code. Please try again.');
-          return;
-        }
+        updateState({
+          animationState: ANIMATION_STATES.PROCESSING,
+          isLoading: true,
+        });
+
+        try {
+          const hasPermission = await requestLocationPermission();
+          if (!hasPermission) {
+            handleProcessError("Location permission not granted.");
+            return;
+          }
 
-        const location = await getCurrentLocation();
-        const [latStr, lngStr] = qrString.split(',');
-        const lat = parseFloat(latStr);
-        const lng = parseFloat(lngStr);
+          const qrString =
+            typeof qrCodeData === "object" ? qrCodeData?.data : qrCodeData;
+          if (!qrString || typeof qrString !== "string") {
+            handleProcessError("Invalid QR code. Please try again.");
+            return;
+          }
 
-        const validCoords = !isNaN(lat) && !isNaN(lng);
-        const validDev = !isNaN(location?.latitude) && !isNaN(location?.longitude);
+          const location = await getCurrentLocation();
+          const [latStr, lngStr] = qrString.split(",");
+          const lat = parseFloat(latStr);
+          const lng = parseFloat(lngStr);
 
-        if (validCoords && validDev) {
-          const distance = getDistanceInMeters(lat, lng, location.latitude, location.longitude);
+          const validCoords = !isNaN(lat) && !isNaN(lng);
+          const validDev =
+            !isNaN(location?.latitude) && !isNaN(location?.longitude);
 
-          if (distance <= MAX_DISTANCE_METERS) {
-            safeCallback(responseRef.current);
-            notifyMessage('Location verified successfully!', 'success');
-            updateState({ animationState: ANIMATION_STATES.SUCCESS });
+          if (validCoords && validDev) {
+            const distance = getDistanceInMeters(
+              lat,
+              lng,
+              location.latitude,
+              location.longitude
+            );
 
-            setTimeout(() => {
-              updateState({ modalVisible: false });
-              resetState();
-            }, 1500);
+            if (distance <= MAX_DISTANCE_METERS) {
+              safeCallback(responseRef.current);
+              notifyMessage("Location verified successfully!", "success");
+              updateState({
+                animationState: ANIMATION_STATES.SUCCESS,
+                isLoading: false,
+              });
+              setTimeout(() => resetState(), 1200);
+            } else {
+              handleProcessError(
+                `Location mismatch (${distance.toFixed(0)}m away).`
+              );
+            }
           } else {
-            handleProcessError(`Location mismatch (${distance.toFixed(0)}m away).`);
+            handleProcessError("Invalid coordinates in QR code.");
           }
-        } else {
-          handleProcessError('Invalid coordinates in QR code.');
+        } catch (error) {
+          handleProcessError(
+            "Unable to verify location. Please try again.",
+            error
+          );
         }
-      } catch (error) {
-        handleProcessError('Unable to verify location. Please try again.', error);
-      } finally {
-        updateState({ isLoading: false });
+      },
+      [
+        getCurrentLocation,
+        notifyMessage,
+        requestLocationPermission,
+        resetState,
+        updateState,
+        validateApiUrl,
+        safeCallback,
+      ]
+    );
+
+    const startProcess = useCallback(() => {
+      startCountdown(COUNTDOWN_DURATION, handleCountdownFinish);
+      handleStartFaceScan();
+    }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
+
+    useEffect(() => {
+      if (data) {
+        console.log("📥 New donor data received:", data);
+        setModalVisible(true);
+        startProcess();
       }
-    },
-    [getCurrentLocation, notifyMessage, requestLocationPermission, resetState, updateState, validateApiUrl, safeCallback]
-  );
-
-  const startProcess = useCallback(() => {
-    startCountdown(COUNTDOWN_DURATION, handleCountdownFinish);
-    handleStartFaceScan();
-  }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
-
-  useEffect(() => {
-    if (data) {
-      updateState({ modalVisible: true });
-      startProcess();
-    }
-  }, [data, startProcess, updateState]);
-
-  return (
-    <Modal
-      visible={state.modalVisible}
-      animationType="slide"
-      transparent
-      onRequestClose={() => {
-        updateState({ modalVisible: false });
-        resetState();
-      }}
-      statusBarTranslucent={true}
-    >
-      <View style={styles.modalBg}>
-        <TouchableOpacity
-          style={styles.close}
-          onPress={() => {
-            updateState({ modalVisible: false });
-            resetState();
-          }}
-          accessibilityLabel="Close modal"
-          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-        >
-          <Icon name="close" size={24} color={COLORS.light} />
-        </TouchableOpacity>
-
-        <Text style={styles.title}>Biometric Verification</Text>
-        <Text style={styles.subTitle}>{state.currentStep}</Text>
-
-        <StateIndicator state={state.animationState} size={120} />
-
-        {state.employeeData && (
-          <EmployeeCard employeeData={state.employeeData} apiurl={apiurl} />
+    }, [data, startProcess]);
+
+    const loaderSource = useMemo(
+      () =>
+        state.isLoading &&
+        getLoaderGif(state.animationState, state.currentStep, apiurl),
+      [state.isLoading, state.animationState, state.currentStep, apiurl]
+    );
+
+    return (
+      <>
+        {modalVisible && (
+          <Modal
+            visible={modalVisible}
+            animationType="slide"
+            transparent
+            onRequestClose={resetState}
+            statusBarTranslucent
+          >
+            <View style={styles.modalBg}>
+              <TouchableOpacity
+                style={styles.close}
+                onPress={resetState}
+                accessibilityLabel="Close modal"
+                hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+              >
+                <Icon name="close" size={24} color={COLORS.light} />
+              </TouchableOpacity>
+
+              <Text style={styles.title}>Biometric Verification</Text>
+              <Text style={styles.subTitle}>{state.currentStep}</Text>
+
+              <StateIndicator state={state.animationState} size={120} />
+
+              {state.employeeData && (
+                <EmployeeCard
+                  employeeData={state.employeeData}
+                  apiurl={apiurl}
+                />
+              )}
+
+              <Notification
+                notification={notification}
+                fadeAnim={fadeAnim}
+                slideAnim={slideAnim}
+              />
+
+              <CountdownTimer
+                duration={COUNTDOWN_DURATION}
+                currentTime={countdown}
+              />
+
+              {loaderSource && <Loader source={loaderSource} />}
+            </View>
+          </Modal>
         )}
-
-        <Notification
-          notification={notification}
-          fadeAnim={fadeAnim}
-          slideAnim={slideAnim}
-        />
-
-        <CountdownTimer duration={COUNTDOWN_DURATION} currentTime={countdown} />
-
-        {state.isLoading &&
-          getLoaderGif(state.animationState, state.currentStep, apiurl) && (
-            <Loader source={getLoaderGif(state.animationState, state.currentStep, apiurl)} />
-          )}
-      </View>
-    </Modal>
-  );
-});
+      </>
+    );
+  }
+);
 
 export default BiometricVerificationModal;