react-native-biometric-verifier 0.0.2 → 0.0.3

package/package.json

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

package/src/components/Loader.js

@@ -0,0 +1,58 @@
+import {
+  StyleSheet,
+  Dimensions,
+  View,
+  Modal,
+} from "react-native";
+import { normalize } from "react-native-elements";
+import FastImage from "react-native-fast-image";
+
+export default function Loader({ visible = true,source }) {
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => {}}
+    >
+      <View style={styles.container}>
+        <View style={styles.loaderBox}>
+          <FastImage
+            style={styles.icon}
+            source={source}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const { width, height } = Dimensions.get("window");
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+    height,
+    width,
+    backgroundColor: "rgba(0,0,0,0.3)", // semi-transparent backdrop
+  },
+  loaderBox: {
+    borderRadius: normalize(20),
+    padding: 10,
+    backgroundColor: "white",
+    borderWidth: 1,
+    borderColor: "lightblue",
+    elevation: 5, // shadow on Android
+    shadowColor: "#000", // shadow on iOS
+    shadowOpacity: 0.2,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+  },
+  icon: {
+    height: normalize(70),
+    width: normalize(70),
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/src/index.js

@@ -4,15 +4,12 @@ import {
   TouchableOpacity,
   Text,
   Modal,
-  Dimensions,
 } 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 { createLogger } from './utils/logger';
 import { getDistanceInMeters } from './utils/distanceCalculator';
 import {
   ANIMATION_STATES,
@@ -21,7 +18,7 @@ import {
   MAX_DISTANCE_METERS,
   RECOGNIZE_URL,
 } from './utils/constants';
-
+import Loader from './components/Loader';
 import { CountdownTimer } from './components/CountdownTimer';
 import { EmployeeCard } from './components/EmployeeCard';
 import { Notification } from './components/Notification';
@@ -29,6 +26,7 @@ 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 }) => {
   const navigation = useNavigation();
@@ -48,7 +46,6 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
 
   const dataRef = useRef(data);
   const mountedRef = useRef(true);
-  const qrscanRef = useRef(qrscan);
 
   useEffect(() => {
     return () => {
@@ -58,8 +55,7 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
 
   useEffect(() => {
     dataRef.current = data;
-    qrscanRef.current = qrscan;
-  }, [data, qrscan]);
+  }, [data]);
 
   const updateState = useCallback((newState) => {
     if (mountedRef.current) {
@@ -109,19 +105,19 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
     try {
       const body = { image: base64 }
       const header = { hrenemp: currentData }
-      const response = await networkServiceCall("POST", RECOGNIZE_URL, header, body);
+      const response = await networkServiceCall("POST",RECOGNIZE_URL,header,body);
       if (response.httpstatus === 200) {
         notifyMessage('Identity verified successfully!', 'success');
         updateState({
           employeeData: response.data?.data,
           animationState: ANIMATION_STATES.SUCCESS,
         });
-        
-        // If QR scanning is enabled, proceed to QR scan
-        if (qrscanRef.current) {
+
+        if (qrscan) {
+          // If QR scanning is required, continue with QR Scan
           setTimeout(() => startQRCodeScan(), 1500);
         } else {
-          // If only face recognition, complete the process
+          // If only Face recognition → finish process
           setTimeout(() => {
             callback?.(dataRef.current);
             updateState({ modalVisible: false });
@@ -138,7 +134,7 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
     } finally {
       updateState({ isLoading: false });
     }
-  }, [convertImageToBase64, notifyMessage, startQRCodeScan, updateState, callback]);
+  }, [convertImageToBase64, notifyMessage, qrscan, resetState, updateState, callback]);
 
   const handleStartFaceScan = useCallback(() => {
     updateState({
@@ -163,7 +159,7 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
       cameramoduletype: 2,
       onSelect: handleQRScanned,
     });
-  }, [navigation, updateState, handleQRScanned]);
+  }, [navigation, updateState]);
 
   const handleQRScanned = useCallback(async (qrCodeData) => {
     updateState({ 
@@ -232,14 +228,7 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
 
   const startProcess = useCallback(() => {
     startCountdown(COUNTDOWN_DURATION, handleCountdownFinish);
-    
-    if (qrscanRef.current) {
-      // Start with face scan if QR scanning is enabled
-      handleStartFaceScan();
-    } else {
-      // If only face recognition is needed, start directly with face scan
-      handleStartFaceScan();
-    }
+    handleStartFaceScan();
   }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
 
   useEffect(() => {
@@ -295,9 +284,13 @@ const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback
           duration={COUNTDOWN_DURATION}
           currentTime={countdown}
         />
+
+        {state.isLoading && getLoaderGif(state.animationState, state.currentStep) && (
+          <Loader source={getLoaderGif(state.animationState, state.currentStep)} />
+        )}
       </View>
     </Modal>
   );
 });
 
-export default BiometricVerificationModal;
+export default BiometricVerificationModal;

package/src/utils/getLoaderGif.js

@@ -0,0 +1,27 @@
+import FaceGif from '../Asset/gif/Face.gif';
+import LocationGif from '../Asset/gif/Location.gif';
+import { ANIMATION_STATES } from '../utils/constants';
+
+/**
+ * Decides which GIF should be shown based on animationState or currentStep
+ * @param {string} animationState - Current animation state
+ * @param {string} currentStep - Current step of verification
+ * @returns {any} - Gif image source or null
+ */
+export const getLoaderGif = (animationState, currentStep) => {
+  if (
+    animationState === ANIMATION_STATES.FACE_SCAN ||
+    currentStep === 'Identity Verification'
+  ) {
+    return FaceGif;
+  }
+
+  if (
+    animationState === ANIMATION_STATES.QR_SCAN ||
+    currentStep === 'Location Verification'
+  ) {
+    return LocationGif;
+  }
+
+  return null;
+};