react-native-biometric-verifier 0.0.18 → 0.0.19

package/package.json

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

package/src/components/CaptureImageWithoutEdit.js

@@ -18,7 +18,7 @@ import {
   useCameraFormat,
   CameraRuntimeError,
 } from 'react-native-vision-camera';
-import { COLORS } from "../utils/constants";
+import { Global } from '../utils/Global';
 import { useFaceDetectionFrameProcessor } from '../hooks/useFaceDetectionFrameProcessor';
 
 const CaptureImageWithoutEdit = React.memo(
@@ -389,7 +389,7 @@ const CaptureImageWithoutEdit = React.memo(
       <View style={styles.cameraContainer}>
         {cameraError ? (
           <View style={styles.errorContainer}>
-            <Icon name="error-outline" size={40} color={COLORS.error} />
+            <Icon name="error-outline" size={40} color={Global.AppTheme.error} />
             <Text style={styles.errorText}>{cameraError}</Text>
             <TouchableOpacity
               style={styles.retryButton}
@@ -401,7 +401,7 @@ const CaptureImageWithoutEdit = React.memo(
           </View>
         ) : cameraPermission === 'denied' || cameraPermission === 'restricted' ? (
           <View style={styles.placeholderContainer}>
-            <Icon name="camera-off" size={40} color={COLORS.light} />
+            <Icon name="camera-off" size={40} color={Global.AppTheme.light} />
             <Text style={styles.placeholderText}>
               Camera permission required. Please enable in settings.
             </Text>
@@ -415,14 +415,14 @@ const CaptureImageWithoutEdit = React.memo(
           </View>
         ) : cameraPermission === 'not-determined' ? (
           <View style={styles.placeholderContainer}>
-            <ActivityIndicator size="large" color={COLORS.primary} />
+            <ActivityIndicator size="large" color={Global.AppTheme.primary} />
             <Text style={styles.placeholderText}>
               Requesting camera access...
             </Text>
           </View>
         ) : !cameraDevice ? (
           <View style={styles.placeholderContainer}>
-            <Icon name="camera-alt" size={40} color={COLORS.light} />
+            <Icon name="camera-alt" size={40} color={Global.AppTheme.light} />
             <Text style={styles.placeholderText}>Camera not available</Text>
             <TouchableOpacity
               style={styles.retryButton}
@@ -434,7 +434,7 @@ const CaptureImageWithoutEdit = React.memo(
           </View>
         ) : (
           <View style={styles.placeholderContainer}>
-            <ActivityIndicator size="large" color={COLORS.primary} />
+            <ActivityIndicator size="large" color={Global.AppTheme.primary} />
             <Text style={styles.placeholderText}>Initializing camera...</Text>
           </View>
         )}
@@ -545,7 +545,7 @@ const CaptureImageWithoutEdit = React.memo(
               disabled={isLoading || captured.current || livenessStep > 0}
               accessibilityLabel="Flip camera"
             >
-              <Icon name="flip-camera-ios" size={28} color={COLORS.light} />
+              <Icon name="flip-camera-ios" size={28} color={Global.AppTheme.light} />
             </TouchableOpacity>
           )}
         </View>
@@ -562,7 +562,7 @@ const styles = StyleSheet.create({
     width: '100%',
     borderRadius: 12,
     overflow: 'hidden',
-    backgroundColor: COLORS.dark,
+    backgroundColor: Global.AppTheme.dark,
     minHeight: 300,
   },
   camera: {
@@ -582,24 +582,24 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   errorText: {
-    color: COLORS.error,
+    color: Global.AppTheme.error,
     fontSize: 16,
     textAlign: 'center',
     marginVertical: 16,
   },
   retryButton: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
     paddingHorizontal: 20,
     paddingVertical: 10,
     borderRadius: 8,
     marginTop: 10,
   },
   retryButtonText: {
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     fontWeight: 'bold',
   },
   placeholderText: {
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     fontSize: 16,
     textAlign: 'center',
     marginTop: 16,
@@ -689,12 +689,12 @@ const styles = StyleSheet.create({
     borderWidth: 2,
   },
   stepCompleted: {
-    backgroundColor: COLORS.primary,
-    borderColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
+    borderColor: Global.AppTheme.primary,
   },
   stepCurrent: {
-    backgroundColor: COLORS.primary,
-    borderColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
+    borderColor: Global.AppTheme.primary,
     opacity: 0.7,
   },
   stepPending: {
@@ -713,7 +713,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 4,
   },
   connectorCompleted: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
   },
   stepLabelsContainer: {
     flexDirection: 'row',

package/src/components/Card.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, Image, StyleSheet, Platform } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import PropTypes from 'prop-types';
-import { COLORS } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 export const Card = ({ employeeData, apiurl }) => {
   const [imageError, setImageError] = useState(false);
@@ -44,7 +44,7 @@ export const Card = ({ employeeData, apiurl }) => {
       {/* Verified Badge */}
       <View style={styles.badgeWrapper}>
         <View style={styles.badge}>
-          <Icon name="verified-user" size={16} color={COLORS.success} />
+          <Icon name="verified-user" size={16} color={Global.AppTheme.success} />
           <Text style={styles.badgeText}>Identity Verified</Text>
         </View>
       </View>
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
     height: 110,
     borderRadius: 55,
     borderWidth: 3,
-    borderColor: COLORS.primary,
+    borderColor: Global.AppTheme.primary,
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
@@ -100,12 +100,12 @@ const styles = StyleSheet.create({
     fontSize: 20,
     fontWeight: '600',
     marginTop: 15,
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
   },
   id: {
     fontSize: 15,
-    color: COLORS.gray,
+    color: Global.AppTheme.gray,
     marginTop: 5,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
   },
@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
   },
   badgeText: {
     fontSize: 13,
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     marginLeft: 6,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
   },

package/src/components/CountdownTimer.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { View, Text, Animated, StyleSheet, Platform } from 'react-native';
-import { COLORS } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 export const CountdownTimer = ({ duration, currentTime }) => {
   const progress = useRef(new Animated.Value(1)).current;
@@ -45,8 +45,8 @@ export const CountdownTimer = ({ duration, currentTime }) => {
 
   // Change color when < 10 seconds
   const isEnding = currentTime <= 10;
-  const circleColor = isEnding ? 'red' : COLORS.light;
-  const textColor = isEnding ? 'red' : COLORS.light;
+  const circleColor = isEnding ? 'red' : Global.AppTheme.light;
+  const textColor = isEnding ? 'red' : Global.AppTheme.light;
 
   return (
     <View style={styles.container}>

package/src/components/Notification.js

@@ -2,7 +2,7 @@ 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 { COLORS } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 export const Notification = ({ notification, fadeAnim, slideAnim }) => {
   if (!notification || typeof notification !== 'object') {
@@ -15,9 +15,9 @@ export const Notification = ({ notification, fadeAnim, slideAnim }) => {
 
   // Icon and color mapping
   const iconMap = {
-    success: { name: 'check-circle', color: COLORS.success },
-    error: { name: 'error', color: COLORS.error },
-    info: { name: 'info', color: COLORS.info },
+    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;
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: COLORS.dark,
+    backgroundColor: Global.AppTheme.dark,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
@@ -135,7 +135,7 @@ const styles = StyleSheet.create({
   },
   message: {
     fontSize: 14,
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     fontWeight: '500',
     flex: 1,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',

package/src/components/StepIndicator.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 const StepIndicator = ({ currentStep, qrscan }) => {
   return (
@@ -16,8 +16,8 @@ const StepIndicator = ({ currentStep, qrscan }) => {
             currentStep === "Identity Verification" ||
             currentStep === "Location Verification" ||
             currentStep === "Complete"
-              ? COLORS.primary
-              : COLORS.light
+              ? Global.AppTheme.primary
+              : Global.AppTheme.light
           }
           style={styles.statusIcon}
         />
@@ -44,8 +44,8 @@ const StepIndicator = ({ currentStep, qrscan }) => {
               color={
                 currentStep === "Location Verification" ||
                 currentStep === "Complete"
-                  ? COLORS.primary
-                  : COLORS.light
+                  ? Global.AppTheme.primary
+                  : Global.AppTheme.light
               }
               style={styles.statusIcon}
             />
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
   },
   statusText: {
     fontSize: 12,
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     opacity: 0.6,
   },
   statusTextActive: {
@@ -91,7 +91,7 @@ const styles = StyleSheet.create({
   statusSeparator: {
     width: 40,
     height: 1,
-    backgroundColor: COLORS.light,
+    backgroundColor: Global.AppTheme.light,
     opacity: 0.3,
     marginHorizontal: 15,
   },

package/src/hooks/useCountdown.js

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
-import { COUNTDOWN_DURATION } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 /**
  * Custom hook for a countdown timer with pause/resume functionality.
@@ -8,9 +8,9 @@ import { COUNTDOWN_DURATION } from '../utils/constants';
  * @returns {Object} countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown
  */
 export const useCountdown = (onExpire) => {
-  const [countdown, setCountdown] = useState(COUNTDOWN_DURATION);
+  const [countdown, setCountdown] = useState(Global.CountdownDuration);
   const timerRef = useRef(null);
-  const countdownRef = useRef(COUNTDOWN_DURATION);
+  const countdownRef = useRef(Global.CountdownDuration);
   const isPausedRef = useRef(false);
   const onExpireRef = useRef(onExpire);
 
@@ -23,8 +23,8 @@ export const useCountdown = (onExpire) => {
   const startCountdown = useCallback((onExpireCallback) => {
     try {
       // Reset countdown
-      countdownRef.current = COUNTDOWN_DURATION;
-      setCountdown(COUNTDOWN_DURATION);
+      countdownRef.current = Global.CountdownDuration;
+      setCountdown(Global.CountdownDuration);
       isPausedRef.current = false;
 
       // Clear any existing timer
@@ -77,8 +77,8 @@ export const useCountdown = (onExpire) => {
   // Reset countdown to initial duration
   const resetCountdown = useCallback(() => {
     try {
-      countdownRef.current = COUNTDOWN_DURATION;
-      setCountdown(COUNTDOWN_DURATION);
+      countdownRef.current = Global.CountdownDuration;
+      setCountdown(Global.CountdownDuration);
       isPausedRef.current = false;
 
       if (timerRef.current) {

package/src/hooks/useImageProcessing.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import ImageResizer from 'react-native-image-resizer';
 import RNFS from 'react-native-fs';
-import { IMAGE_RESIZE } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 /**
  * Custom hook to process images: resize and convert to Base64.
@@ -38,10 +38,10 @@ export const useImageProcessing = () => {
       try {
         resizedImage = await ImageResizer.createResizedImage(
           uri,
-          IMAGE_RESIZE.width,
-          IMAGE_RESIZE.height,
-          IMAGE_RESIZE.format,  // 'JPEG' or 'PNG'
-          IMAGE_RESIZE.quality, // e.g., 80
+          Global.ImageResize.width,
+          Global.ImageResize.height,
+          Global.ImageResize.format,  // 'JPEG' or 'PNG'
+          Global.ImageResize.quality, // e.g., 80
           0,                    // Rotation
           undefined,            // Output path (let library choose)
           false                 // Keep EXIF metadata
@@ -64,7 +64,7 @@ export const useImageProcessing = () => {
 
       // Optionally prepend MIME type
       if (includeMimeType) {
-        const mimeType = IMAGE_RESIZE.format.toLowerCase() === 'png' ? 'image/png' : 'image/jpeg';
+        const mimeType = Global.ImageResize.format.toLowerCase() === 'png' ? 'image/png' : 'image/jpeg';
         base64Data = `data:${mimeType};base64,${base64Data}`;
       }
 

package/src/hooks/useNotifyMessage.js

@@ -7,7 +7,7 @@ import {
   ToastAndroid,
   Alert,
 } from 'react-native';
-import { COLORS } from '../utils/constants';
+import { Global } from '../utils/Global';
 
 export const useNotifyMessage = () => {
   const [notification, setNotification] = useState({
@@ -22,9 +22,9 @@ export const useNotifyMessage = () => {
 
   // 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;
+    let backgroundColor = Global.AppTheme.info;
+    if (type === 'success') backgroundColor = Global.AppTheme.success;
+    if (type === 'error') backgroundColor = Global.AppTheme.error;
 
     return {
       position: 'absolute',

package/src/index.js

@@ -27,13 +27,7 @@ import { useSafeCallback } from "./hooks/useSafeCallback";
 
 // Utils
 import { getDistanceInMeters } from "./utils/distanceCalculator";
-import {
-  ANIMATION_STATES,
-  COLORS,
-  COUNTDOWN_DURATION,
-  MAX_DISTANCE_METERS,
-  LOADING_TYPES,
-} from "./utils/constants";
+import { Global } from "./utils/Global";
 import networkServiceCall from "./utils/NetworkServiceCall";
 import { getLoaderGif } from "./utils/getLoaderGif";
 
@@ -61,10 +55,10 @@ const BiometricModal = React.memo(
     const [cameraType, setCameraType] = useState("front");
     const [state, setState] = useState({
       isLoading: false,
-      loadingType: LOADING_TYPES.NONE,
+      loadingType: Global.LoadingTypes.none,
       currentStep: "Start",
       employeeData: null,
-      animationState: ANIMATION_STATES.FACE_SCAN,
+      animationState: Global.AnimationStates.faceScan,
     });
 
     // Refs
@@ -174,10 +168,10 @@ const BiometricModal = React.memo(
       
       setState({
         isLoading: false,
-        loadingType: LOADING_TYPES.NONE,
+        loadingType: Global.LoadingTypes.none,
         currentStep: "Start",
         employeeData: null,
-        animationState: ANIMATION_STATES.FACE_SCAN,
+        animationState: Global.AnimationStates.faceScan,
       });
       
       setModalVisible(false);
@@ -200,9 +194,9 @@ const BiometricModal = React.memo(
 
         notifyMessage(message, "error");
         updateState({
-          animationState: ANIMATION_STATES.ERROR,
+          animationState: Global.AnimationStates.error,
           isLoading: false,
-          loadingType: LOADING_TYPES.NONE,
+          loadingType: Global.LoadingTypes.none,
         });
 
         if (resetTimeoutRef.current) {
@@ -256,8 +250,8 @@ const BiometricModal = React.memo(
 
         updateState({
           isLoading: true,
-          loadingType: LOADING_TYPES.FACE_RECOGNITION,
-          animationState: ANIMATION_STATES.PROCESSING,
+          loadingType: Global.LoadingTypes.faceRecognition,
+          animationState: Global.AnimationStates.processing,
         });
 
         InteractionManager.runAfterInteractions(async () => {
@@ -266,7 +260,7 @@ const BiometricModal = React.memo(
           try {
             console.log("🖼️ Converting image to base64");
             updateState({
-              loadingType: LOADING_TYPES.IMAGE_PROCESSING,
+              loadingType: Global.LoadingTypes.imageProcessing,
             });
 
             base64 = await convertImageToBase64(selfie?.uri);
@@ -290,7 +284,7 @@ const BiometricModal = React.memo(
             console.log("🌐 Calling face recognition API:", buttonapi);
 
             updateState({
-              loadingType: LOADING_TYPES.NETWORK_REQUEST,
+              loadingType: Global.LoadingTypes.networkRequest,
             });
 
             const response = await networkServiceCall(
@@ -308,9 +302,9 @@ const BiometricModal = React.memo(
               
               updateState({
                 employeeData: response.data?.data || null,
-                animationState: ANIMATION_STATES.SUCCESS,
+                animationState: Global.AnimationStates.success,
                 isLoading: false,
-                loadingType: LOADING_TYPES.NONE,
+                loadingType: Global.LoadingTypes.none,
               });
 
               notifyMessage("Identity verified successfully!", "success");
@@ -367,15 +361,15 @@ const BiometricModal = React.memo(
         if (!validateApiUrl()) return;
 
         updateState({
-          animationState: ANIMATION_STATES.PROCESSING,
+          animationState: Global.AnimationStates.processing,
           isLoading: true,
-          loadingType: LOADING_TYPES.LOCATION_VERIFICATION,
+          loadingType: Global.LoadingTypes.locationVerification,
         });
 
         try {
           console.log("📍 Requesting location permission");
           updateState({
-            loadingType: LOADING_TYPES.LOCATION_PERMISSION,
+            loadingType: Global.LoadingTypes.locationPermission,
           });
 
           const hasPermission = await requestLocationPermission();
@@ -400,7 +394,7 @@ const BiometricModal = React.memo(
           console.log("📋 QR code content:", qrString);
 
           updateState({
-            loadingType: LOADING_TYPES.GETTING_LOCATION,
+            loadingType: Global.LoadingTypes.gettingLocation,
           });
 
           const location = await getCurrentLocation();
@@ -422,7 +416,7 @@ const BiometricModal = React.memo(
 
           if (validCoords && validDev) {
             updateState({
-              loadingType: LOADING_TYPES.CALCULATING_DISTANCE,
+              loadingType: Global.LoadingTypes.calculateDistance,
             });
 
             const distance = getDistanceInMeters(
@@ -438,15 +432,15 @@ const BiometricModal = React.memo(
               "meters"
             );
 
-            if (distance <= MAX_DISTANCE_METERS) {
+            if (distance <= Global.MaxDistanceMeters) {
               console.log("✅ Location verified successfully");
               safeCallback(responseRef.current);
               notifyMessage("Location verified successfully!", "success");
               
               updateState({
-                animationState: ANIMATION_STATES.SUCCESS,
+                animationState: Global.AnimationStates.success,
                 isLoading: false,
-                loadingType: LOADING_TYPES.NONE,
+                loadingType: Global.LoadingTypes.none,
               });
 
               if (resetTimeoutRef.current) {
@@ -517,7 +511,7 @@ const BiometricModal = React.memo(
       console.log("👤 Starting face scan");
       updateState({
         currentStep: "Identity Verification",
-        animationState: ANIMATION_STATES.FACE_SCAN,
+        animationState: Global.AnimationStates.faceScan,
       });
       setCameraType("front");
     }, [updateState]);
@@ -527,7 +521,7 @@ const BiometricModal = React.memo(
       console.log("📍 Starting QR code scan");
       updateState({
         currentStep: "Location Verification",
-        animationState: ANIMATION_STATES.QR_SCAN,
+        animationState: Global.AnimationStates.qrScan,
       });
       setCameraType("back");
     }, [updateState]);
@@ -571,8 +565,8 @@ const BiometricModal = React.memo(
     const shouldShowCamera =
       (state.currentStep === "Identity Verification" ||
         state.currentStep === "Location Verification") &&
-      state.animationState !== ANIMATION_STATES.SUCCESS &&
-      state.animationState !== ANIMATION_STATES.ERROR;
+      state.animationState !== Global.AnimationStates.success &&
+      state.animationState !== Global.AnimationStates.error;
 
     return (
       <Modal
@@ -605,7 +599,7 @@ const BiometricModal = React.memo(
             accessibilityLabel="Close modal"
             hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
           >
-            <Icon name="close" size={24} color={COLORS.light} />
+            <Icon name="close" size={24} color={Global.AppTheme.light} />
           </TouchableOpacity>
           
           <View style={styles.topContainer}>
@@ -639,7 +633,7 @@ const BiometricModal = React.memo(
 
           <View style={styles.timerContainer}>
             <CountdownTimer
-              duration={COUNTDOWN_DURATION}
+              duration={Global.CountdownDuration}
               currentTime={countdown}
             />
           </View>
@@ -657,7 +651,7 @@ const BiometricModal = React.memo(
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
-    backgroundColor: COLORS.modalBackground || 'rgba(0, 0, 0, 0.85)',
+    backgroundColor: Global.AppTheme.modalBackground || 'rgba(0, 0, 0, 0.85)',
   },
   cameraContainer: {
     position: 'absolute',
@@ -694,7 +688,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 26,
     fontWeight: '700',
-    color: COLORS.textLight || COLORS.light,
+    color: Global.AppTheme.textLight || Global.AppTheme.light,
     marginBottom: 5,
     textAlign: 'left',
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
@@ -704,7 +698,7 @@ const styles = StyleSheet.create({
   },
   subtitle: {
     fontSize: 18,
-    color: COLORS.textLight || COLORS.light,
+    color: Global.AppTheme.textLight || Global.AppTheme.light,
     marginBottom: 0,
     fontWeight: '600',
     textAlign: 'left',

package/src/utils/Global.js

@@ -0,0 +1,48 @@
+export class Global {
+  // ====== APP CONSTANTS ======
+  static AppTheme = {
+    primary: '#6C63FF',
+    primaryLight: '#8A85FF',
+    success: '#4CAF50',
+    error: '#F44336',
+    warning: '#FF9800',
+    info: '#2196F3',
+    dark: '#2D3748',
+    light: '#F7FAFC',
+    gray: '#A0AEC0',
+    background: '#F8F9FA',
+    cardBackground: '#FFFFFF',
+    textLight: '#FFFFFF',
+    shadow: '#00000033', // semi-transparent shadow
+    modalBackground: 'rgba(0, 0, 0, 0.85)',
+  };
+
+  static LoadingTypes = {
+    none: 'none',
+    imageProcessing: 'imageProcessing',
+    faceRecognition: 'faceRecognition',
+    networkRequest: 'networkRequest',
+    locationPermission: 'locationPermission',
+    gettingLocation: 'gettingLocation',
+    calculateDistance: 'calculateDistance',
+    locationVerification: 'locationVerification',
+  };
+
+  static AnimationStates = {
+    faceScan: 'faceScan',
+    qrScan: 'qrScan',
+    processing: 'processing',
+    success: 'success',
+    error: 'error',
+  };
+
+  static ImageResize = {
+    width: 640,
+    height: 640,
+    format: 'JPEG', // 'PNG' or 'JPEG'
+    quality: 85, // 0–100
+  };
+
+  static CountdownDuration = 100; // seconds
+  static MaxDistanceMeters = 100; // Max allowed distance for QR verification
+}

package/src/utils/getLoaderGif.js

@@ -1,4 +1,4 @@
-import { ANIMATION_STATES} from '../utils/constants';
+import { Global } from "./Global";
 
 /**
  * Decides which GIF should be shown based on animationState or currentStep
@@ -13,14 +13,14 @@ export const getLoaderGif = (animationState, currentStep,APIURL) => {
     `${APIURL}file/getCommonFile/image/Location.gif`;
 
   if (
-    animationState === ANIMATION_STATES.FACE_SCAN ||
+    animationState === Global.AnimationStates.faceScan ||
     currentStep === 'Identity Verification'
   ) {
     return { uri: FaceGifUrl };
   }
 
   if (
-    animationState === ANIMATION_STATES.QR_SCAN ||
+    animationState === Global.AnimationStates.qrScan ||
     currentStep === 'Location Verification'
   ) {
     return { uri: LocationGifUrl };

package/src/utils/constants.js

@@ -1,73 +0,0 @@
-// ====== COLORS ======
-export const COLORS = {
-  primary: '#6C63FF',
-  primaryLight: '#8A85FF',
-  success: '#4CAF50',
-  error: '#F44336',
-  warning: '#FF9800',
-  info: '#2196F3',
-  dark: '#2D3748',
-  light: '#F7FAFC',
-  gray: '#A0AEC0',
-  background: '#F8F9FA',
-  cardBackground: '#FFFFFF',
-  textLight: '#FFFFFF',
-  shadow: '#00000033', // semi-transparent shadow
-  modalBackground: 'rgba(0, 0, 0, 0.85)',
-};
-
-// ====== LOADING TYPES ======
-export const LOADING_TYPES = {
-  NONE: 'NONE',
-  CAMERA_INIT: 'CAMERA_INIT',
-  CAPTURING_PHOTO: 'CAPTURING_PHOTO',
-  IMAGE_PROCESSING: 'IMAGE_PROCESSING',
-  FACE_RECOGNITION: 'FACE_RECOGNITION',
-  NETWORK_REQUEST: 'NETWORK_REQUEST',
-  LOCATION_PERMISSION: 'LOCATION_PERMISSION',
-  GETTING_LOCATION: 'GETTING_LOCATION',
-  CALCULATING_DISTANCE: 'CALCULATING_DISTANCE',
-  LOCATION_VERIFICATION: 'LOCATION_VERIFICATION',
-};
-
-// ====== ANIMATION STATES ======
-export const ANIMATION_STATES = {
-  FACE_SCAN: 'faceScan',
-  QR_SCAN: 'qrScan',
-  PROCESSING: 'processing',
-  SUCCESS: 'success',
-  ERROR: 'error',
-};
-
-// ====== IMAGE RESIZE CONFIG ======
-export const IMAGE_RESIZE = {
-  width: 640,
-  height: 640,
-  format: 'JPEG', // 'PNG' or 'JPEG'
-  quality: 85,    // 0-100
-};
-
-// ====== CONSTANTS ======
-export const COUNTDOWN_DURATION = 100; // seconds
-export const MAX_DISTANCE_METERS = 100; // Max allowed distance for QR verification
-
-// ====== NOTIFICATION SETTINGS ======
-export const NOTIFICATION = {
-  DEFAULT_DURATION: 3000, // ms
-  FADE_DURATION: 300,     // ms
-  SLIDE_DISTANCE: 20,     // px
-  VIBRATION_DURATION: 100, // ms
-  TOAST_OFFSET: 80,        // Android Toast vertical offset
-};
-
-// ====== QR VERIFICATION SETTINGS ======
-export const QR_VERIFICATION = {
-  MAX_ATTEMPTS: 3,          // Maximum retries for QR scan
-  TIMEOUT: 10000,           // Timeout in ms per scan
-};
-
-// ====== PLATFORM ======
-export const PLATFORM = {
-  IOS: 'ios',
-  ANDROID: 'android',
-};