react-native-biometric-verifier 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.1",
+  "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,8 +26,9 @@ 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, callback }) => {
+const BiometricVerificationModal = React.memo(({ data, qrscan = false, callback }) => {
   const navigation = useNavigation();
   
   const { countdown, startCountdown, resetCountdown } = useCountdown();
@@ -114,7 +112,18 @@ const BiometricVerificationModal = React.memo(({ data, callback }) => {
           employeeData: response.data?.data,
           animationState: ANIMATION_STATES.SUCCESS,
         });
-        setTimeout(() => startQRCodeScan(), 1500);
+
+        if (qrscan) {
+          // If QR scanning is required, continue with QR Scan
+          setTimeout(() => startQRCodeScan(), 1500);
+        } else {
+          // If only Face recognition → finish process
+          setTimeout(() => {
+            callback?.(dataRef.current);
+            updateState({ modalVisible: false });
+            resetState();
+          }, 1500);
+        }
       } else {
         updateState({ animationState: ANIMATION_STATES.ERROR });
         notifyMessage(response.data?.error?.message || 'Face not recognized. Please try again.', 'error');
@@ -125,7 +134,7 @@ const BiometricVerificationModal = React.memo(({ data, callback }) => {
     } finally {
       updateState({ isLoading: false });
     }
-  }, [convertImageToBase64, notifyMessage, startQRCodeScan, updateState]);
+  }, [convertImageToBase64, notifyMessage, qrscan, resetState, updateState, callback]);
 
   const handleStartFaceScan = useCallback(() => {
     updateState({
@@ -150,7 +159,7 @@ const BiometricVerificationModal = React.memo(({ data, callback }) => {
       cameramoduletype: 2,
       onSelect: handleQRScanned,
     });
-  }, [navigation, updateState, handleQRScanned]);
+  }, [navigation, updateState]);
 
   const handleQRScanned = useCallback(async (qrCodeData) => {
     updateState({ 
@@ -275,9 +284,13 @@ const BiometricVerificationModal = React.memo(({ data, 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;
+};