react-native-biometric-verifier 0.0.1

package/src/hooks/useCountdown.js

@@ -0,0 +1,72 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { COUNTDOWN_DURATION } from '../utils/constants';
+
+/**
+ * Custom hook for a countdown timer.
+ *
+ * @param {Function} onExpire - Callback fired when countdown reaches zero.
+ * @returns {Object} countdown, startCountdown, resetCountdown
+ */
+export const useCountdown = (onExpire) => {
+  const [countdown, setCountdown] = useState(COUNTDOWN_DURATION);
+  const timerRef = useRef(null);
+  const countdownRef = useRef(COUNTDOWN_DURATION);
+
+  // Start or restart the countdown
+  const startCountdown = useCallback(() => {
+    try {
+      // Reset countdown
+      countdownRef.current = COUNTDOWN_DURATION;
+      setCountdown(COUNTDOWN_DURATION);
+
+      // Clear any existing timer
+      if (timerRef.current) clearInterval(timerRef.current);
+
+      // Start new timer
+      timerRef.current = setInterval(() => {
+        countdownRef.current -= 1;
+
+        if (countdownRef.current <= 0) {
+          clearInterval(timerRef.current);
+          timerRef.current = null;
+
+          // Safely call onExpire if it's a function
+          if (typeof onExpire === 'function') {
+            onExpire();
+          }
+        } else {
+          setCountdown(countdownRef.current);
+        }
+      }, 1000);
+    } catch (error) {
+      console.error('Error in startCountdown:', error);
+    }
+  }, [onExpire]);
+
+  // Reset countdown to initial duration
+  const resetCountdown = useCallback(() => {
+    try {
+      countdownRef.current = COUNTDOWN_DURATION;
+      setCountdown(COUNTDOWN_DURATION);
+
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    } catch (error) {
+      console.error('Error in resetCountdown:', error);
+    }
+  }, []);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+
+  return { countdown, startCountdown, resetCountdown };
+};

package/src/hooks/useGeolocation.js

@@ -0,0 +1,72 @@
+import { useCallback } from 'react';
+import { Platform, PermissionsAndroid } from 'react-native';
+import Geolocation from 'react-native-geolocation-service';
+
+/**
+ * Custom hook for requesting location permission and fetching current location.
+ *
+ * @param {Function} notifyMessage - Callback to show notifications (message, type).
+ * @returns {Object} { requestLocationPermission, getCurrentLocation }
+ */
+export const useGeolocation = (notifyMessage) => {
+  /**
+   * Requests location permission (Android only).
+   * @returns {Promise<boolean>} - True if permission granted, else false.
+   */
+  const requestLocationPermission = useCallback(async () => {
+    if (Platform.OS !== 'android') return true;
+
+    try {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+        {
+          title: 'Location Permission Required',
+          message: 'This app needs your location to verify QR code scans.',
+          buttonPositive: 'OK',
+          buttonNegative: 'Cancel',
+        }
+      );
+
+      const hasPermission = granted === PermissionsAndroid.RESULTS.GRANTED;
+
+      if (!hasPermission) {
+        notifyMessage?.('Cannot get location without permission.', 'error');
+      }
+
+      return hasPermission;
+    } catch (error) {
+      console.error('Location permission error:', error);
+      notifyMessage?.('Location permission error.', 'error');
+      return false;
+    }
+  }, [notifyMessage]);
+
+  /**
+   * Fetches the current location of the device.
+   * @returns {Promise<GeolocationCoordinates>}
+   */
+  const getCurrentLocation = useCallback(
+    () =>
+      new Promise((resolve, reject) => {
+        Geolocation.getCurrentPosition(
+          (position) => {
+            resolve(position.coords);
+          },
+          (error) => {
+            console.error('Error getting location:', error);
+            notifyMessage?.('Unable to fetch current location.', 'error');
+            reject(error);
+          },
+          {
+            enableHighAccuracy: true,
+            timeout: 15000,
+            maximumAge: 10000,
+            distanceFilter: 1,
+          }
+        );
+      }),
+    [notifyMessage]
+  );
+
+  return { requestLocationPermission, getCurrentLocation };
+};

package/src/hooks/useImageProcessing.js

@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+import ImageResizer from 'react-native-image-resizer';
+import RNFS from 'react-native-fs';
+import { IMAGE_RESIZE } from '../utils/constants';
+
+/**
+ * Custom hook to process images: resize and convert to Base64.
+ *
+ * @returns {Object} { convertImageToBase64 }
+ */
+export const useImageProcessing = () => {
+  /**
+   * Converts an image URI to a Base64 string after resizing.
+   *
+   * @param {string} uri - Image file URI.
+   * @param {boolean} includeMimeType - Whether to include MIME type in the result.
+   * @returns {Promise<string>} Base64 string of the image.
+   */
+  const convertImageToBase64 = useCallback(async (uri, includeMimeType = false) => {
+    try {
+      // Validate input
+      if (!uri || typeof uri !== 'string') {
+        throw new Error('Invalid image URI provided.');
+      }
+
+      // Optional: Check file info (skip if unable to fetch)
+      try {
+        const fileInfo = await RNFS.stat(uri);
+        if (!fileInfo) {
+          console.warn('Unable to fetch file info. Proceeding with resize.');
+        }
+      } catch {
+        console.warn('Could not check file info; skipping original size check.');
+      }
+
+      // Resize image
+      let resizedImage;
+      try {
+        resizedImage = await ImageResizer.createResizedImage(
+          uri,
+          IMAGE_RESIZE.width,
+          IMAGE_RESIZE.height,
+          IMAGE_RESIZE.format,  // 'JPEG' or 'PNG'
+          IMAGE_RESIZE.quality, // e.g., 80
+          0,                    // Rotation
+          undefined,            // Output path (let library choose)
+          false                 // Keep EXIF metadata
+        );
+      } catch (resizeError) {
+        throw new Error(`Failed to resize image: ${resizeError.message}`);
+      }
+
+      if (!resizedImage?.uri) {
+        throw new Error('Image resizing returned an invalid result.');
+      }
+
+      // Convert resized image to Base64
+      let base64Data;
+      try {
+        base64Data = await RNFS.readFile(resizedImage.uri, 'base64');
+      } catch (readError) {
+        throw new Error(`Failed to read resized image file: ${readError.message}`);
+      }
+
+      // Optionally prepend MIME type
+      if (includeMimeType) {
+        const mimeType = IMAGE_RESIZE.format.toLowerCase() === 'png' ? 'image/png' : 'image/jpeg';
+        base64Data = `data:${mimeType};base64,${base64Data}`;
+      }
+
+      return base64Data;
+    } catch (error) {
+      console.error('Error in convertImageToBase64:', error.message || error);
+      throw error; // Rethrow for caller handling
+    }
+  }, []);
+
+  return { convertImageToBase64 };
+};

package/src/hooks/useNotifyMessage.js

@@ -0,0 +1,131 @@
+import { useState, useRef, useCallback } from 'react';
+import {
+  Animated,
+  Vibration,
+  DeviceEventEmitter,
+  Platform,
+  ToastAndroid,
+  Alert,
+} from 'react-native';
+import { COLORS } from '../utils/constants';
+
+export const useNotifyMessage = () => {
+  const [notification, setNotification] = useState({
+    visible: false,
+    message: '',
+    type: 'info',
+  });
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(-20)).current;
+
+  // Styles for notification container based on type
+  const getNotificationStyle = useCallback((type) => {
+    let backgroundColor = COLORS.info;
+    if (type === 'success') backgroundColor = COLORS.success;
+    if (type === 'error') backgroundColor = COLORS.error;
+
+    return {
+      position: 'absolute',
+      top: 20,
+      alignSelf: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor,
+      borderRadius: 10,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+      minWidth: 200,
+      maxWidth: '90%',
+    };
+  }, []);
+
+  // Styles for notification text
+  const notificationTextStyle = useCallback(() => ({
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  }), []);
+
+  const showNotification = useCallback((message, type = 'info') => {
+    setNotification({ visible: true, message, type });
+
+    fadeAnim.setValue(0);
+    slideAnim.setValue(-20);
+
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: false,
+      }),
+    ]).start(() => {
+      setTimeout(() => {
+        Animated.parallel([
+          Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: false,
+          }),
+          Animated.timing(slideAnim, {
+            toValue: 20,
+            duration: 300,
+            useNativeDriver: false,
+          }),
+        ]).start(() =>
+          setNotification({ visible: false, message: '', type: 'info' })
+        );
+      }, 3000);
+    });
+  }, [fadeAnim, slideAnim]);
+
+  const notifyMessage = useCallback(
+    (msg, type = 'info') => {
+      try {
+        if (type === 'error' || type === 'success') {
+          Vibration.vibrate(100);
+        }
+
+        showNotification(msg, type);
+
+        DeviceEventEmitter.emit('event.testToast', {
+          displaytext: msg,
+          datavalue: type,
+        });
+
+        if (Platform.OS === 'android') {
+          ToastAndroid.showWithGravityAndOffset(
+            msg,
+            ToastAndroid.LONG,
+            ToastAndroid.BOTTOM,
+            0,
+            80
+          );
+        } else {
+          Alert.alert(type.toUpperCase(), msg);
+        }
+      } catch (error) {
+        console.error('Error in notifyMessage:', error);
+      }
+    },
+    [showNotification]
+  );
+
+  return {
+    notification,
+    fadeAnim,
+    slideAnim,
+    notifyMessage,
+    getNotificationStyle,
+    notificationTextStyle,
+  };
+};

package/src/index.js

@@ -0,0 +1,283 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  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,
+  COLORS,
+  COUNTDOWN_DURATION,
+  MAX_DISTANCE_METERS,
+  RECOGNIZE_URL,
+} from './utils/constants';
+
+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';
+
+const BiometricVerificationModal = React.memo(({ data, callback }) => {
+  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);
+
+  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',
+      employeeData: null,
+      animationState: ANIMATION_STATES.FACE_SCAN,
+      isLoading: false,
+    });
+    resetCountdown();
+  }, [resetCountdown, updateState]);
+
+  const handleCountdownFinish = useCallback(() => {
+    notifyMessage('Time is up! Please try again.', 'error');
+    updateState({
+      modalVisible: false,
+      animationState: ANIMATION_STATES.ERROR,
+    });
+    resetState();
+    navigation.goBack();
+  }, [navigation, notifyMessage, resetState, updateState]);
+
+  const uploadFaceScan = useCallback(async (selfie) => {
+    const currentData = dataRef.current?.data?.userdata?.hrenemp;
+    const base64 = await convertImageToBase64(selfie.uri);
+    if (!currentData) {
+      notifyMessage('Employee data not found.', 'error');
+      updateState({ animationState: ANIMATION_STATES.ERROR });
+      return;
+    }
+    if (!base64) {
+      notifyMessage('convert Image To Base64 Failed.', 'error');
+      updateState({ animationState: ANIMATION_STATES.ERROR });
+      return;
+    }
+
+    updateState({
+      isLoading: true,
+      animationState: ANIMATION_STATES.PROCESSING,
+    });
+
+    try {
+      const body = { image: base64 }
+      const header = { hrenemp: currentData }
+      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,
+        });
+        setTimeout(() => startQRCodeScan(), 1500);
+      } else {
+        updateState({ animationState: ANIMATION_STATES.ERROR });
+        notifyMessage(response.data?.error?.message || 'Face not recognized. Please try again.', 'error');
+      }
+    } catch (error) {
+      updateState({ animationState: ANIMATION_STATES.ERROR });
+      notifyMessage('Connection error. Please check your network.', 'error');
+    } finally {
+      updateState({ isLoading: false });
+    }
+  }, [convertImageToBase64, notifyMessage, startQRCodeScan, updateState]);
+
+  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({
+      currentStep: 'Location Verification',
+      animationState: ANIMATION_STATES.QR_SCAN,
+    });
+    navigation.navigate('CCaptureImageWithoutEdit', {
+      hidebuttons: true,
+      cameratype: 'back',
+      cameramoduletype: 2,
+      onSelect: handleQRScanned,
+    });
+  }, [navigation, updateState, handleQRScanned]);
+
+  const handleQRScanned = useCallback(async (qrCodeData) => {
+    updateState({ 
+      animationState: ANIMATION_STATES.PROCESSING,
+      isLoading: true 
+    });
+
+    try {
+      const hasPermission = await requestLocationPermission();
+      if (!hasPermission) {
+        notifyMessage('Location permission not granted.', 'error');
+        updateState({ animationState: ANIMATION_STATES.ERROR });
+        return;
+      }
+
+      const qrString = typeof qrCodeData === 'object' ? qrCodeData.data : qrCodeData;
+      if (!qrString || typeof qrString !== 'string') {
+        notifyMessage('Invalid QR code. Please try again.', 'error');
+        updateState({ animationState: ANIMATION_STATES.ERROR });
+        return;
+      }
+
+      const location = await getCurrentLocation();
+      const [latStr, lngStr] = 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 distance = getDistanceInMeters(
+          lat,
+          lng,
+          location.latitude,
+          location.longitude
+        );
+
+        if (distance <= MAX_DISTANCE_METERS) {
+          callback?.(dataRef.current);
+          notifyMessage('Location verified successfully!', 'success');
+          updateState({ animationState: ANIMATION_STATES.SUCCESS });
+
+          setTimeout(() => {
+            updateState({ modalVisible: false });
+            resetState();
+          }, 1500);
+        } else {
+          notifyMessage(`Location mismatch (${distance.toFixed(0)}m away).`, 'error');
+          updateState({ animationState: ANIMATION_STATES.ERROR });
+          resetState();
+        }
+      } else {
+        notifyMessage('Invalid coordinates in QR code.', 'error');
+        updateState({ animationState: ANIMATION_STATES.ERROR });
+        resetState();
+      }
+    } catch (error) {
+      notifyMessage('Unable to verify location. Please try again.', 'error');
+      updateState({ animationState: ANIMATION_STATES.ERROR });
+      resetState();
+    } finally {
+      updateState({ isLoading: false });
+    }
+  }, [callback, getCurrentLocation, notifyMessage, requestLocationPermission, resetState, updateState]);
+
+  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}
+            hrenemp={dataRef.current?.data?.userdata?.hrenemp}
+          />
+        )}
+
+        <Notification
+          notification={notification}
+          fadeAnim={fadeAnim}
+          slideAnim={slideAnim}
+        />
+
+        <CountdownTimer
+          duration={COUNTDOWN_DURATION}
+          currentTime={countdown}
+        />
+      </View>
+    </Modal>
+  );
+});
+
+export default BiometricVerificationModal;

package/src/utils/Global.js

@@ -0,0 +1,6 @@
+export class Global {
+    static ipAddress = "api.amalaplus.org";
+    static port = "9090";
+
+}
+

package/src/utils/NetworkServiceCall.js

@@ -0,0 +1,35 @@
+// networkServiceCall.js
+const networkServiceCall = async (method, url, extraHeaders = {}, body = {}) => {
+  try {
+    const dataset = {
+      method: method.toUpperCase(),
+      headers: {
+        'Content-Type': 'application/json',
+        ...extraHeaders,
+      },
+    };
+
+    if (method.toUpperCase() !== 'GET') {
+      dataset.body = JSON.stringify(body);
+    }
+
+    console.log("🌐 NetworkServiceCall Request:");
+    console.log("➡️ URL:", url);
+    console.log("➡️ Headers:", dataset.headers);
+    if (dataset.body) console.log("➡️ Body:", dataset.body);
+
+    const response = await fetch(url, dataset);
+
+    console.log("🌐 Response Status:", response);
+
+    const result = await response.json();
+    console.log("✅ API Success:", result);
+    return result;
+
+  } catch (error) {
+    console.error("🚨 NetworkServiceCall Error:", error.message);
+    throw error;
+  }
+};
+
+export default networkServiceCall;