react-native-biometric-verifier 0.0.20 → 0.0.22

package/package.json

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

package/src/components/Card.js

@@ -4,7 +4,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import PropTypes from 'prop-types';
 import { Global } from '../utils/Global';
 
-export const Card = ({ employeeData, apiurl }) => {
+export const Card = ({ employeeData, apiurl, fileurl = 'file/filedownload/photo/' }) => {
   const [imageError, setImageError] = useState(false);
 
   if (!employeeData || typeof employeeData !== 'object') {
@@ -12,28 +12,34 @@ export const Card = ({ employeeData, apiurl }) => {
     return null;
   }
 
-  const { facename, faceid, imageurl } = employeeData;
+  const { facename, faceid, img } = employeeData;
 
   const employeeName = facename || 'Unknown Employee';
   const employeeId = faceid || 'N/A';
-  const imageSource =
-    !imageError && imageurl
-      ? { uri: `${apiurl}file/filedownload/photo/${imageurl}` }
-      : { uri: `${apiurl}file/getCommonFile/image/camera.png` };
+
+  const imageSource = !imageError && img
+    ? { uri: `${apiurl}${fileurl}${img}` }
+    : null;
 
   return (
     <View style={styles.card}>
-      {/* Employee Image */}
+      {/* Employee Image or Fallback Icon */}
       <View style={styles.imageWrapper}>
-        <Image
-          source={imageSource}
-          style={styles.image}
-          resizeMode="cover"
-          onError={() => {
-            console.error(`Error loading image for employee: ${employeeName}`);
-            setImageError(true);
-          }}
-        />
+        {!imageError && img ? (
+          <Image
+            source={imageSource}
+            style={styles.image}
+            resizeMode="cover"
+            onError={() => {
+              console.error(`Error loading image for employee: ${employeeName}`);
+              setImageError(true);
+            }}
+          />
+        ) : (
+          <View style={styles.iconContainer}>
+            <Icon name="person-outline" size={60} color={Global.AppTheme.primary} />
+          </View>
+        )}
         <View style={styles.imageOverlay} />
       </View>
 
@@ -56,8 +62,10 @@ Card.propTypes = {
   employeeData: PropTypes.shape({
     facename: PropTypes.string,
     faceid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    imageurl: PropTypes.string,
+    img: PropTypes.string,
   }),
+  apiurl: PropTypes.string,
+  fileurl: PropTypes.string,
 };
 
 const styles = StyleSheet.create({
@@ -75,7 +83,6 @@ const styles = StyleSheet.create({
     elevation: 4,
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.2)',
-    backdropFilter: 'blur(10px)', // works only in web, safe to keep
   },
   imageWrapper: {
     width: 110,
@@ -92,6 +99,12 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
   imageOverlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(108, 99, 255, 0.12)',

package/src/components/Loader.js

@@ -16,7 +16,7 @@ export default function Loader({
   overlayColor = 'rgba(0,0,0,0.4)',
   loaderColor = 'lightblue',
   size = 50,
-  gifSource = {uri: `http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
+  gifSource,
   message = '',
   messageStyle = {},
   animationType = 'fade',

package/src/index.js

@@ -40,9 +40,9 @@ import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
 const BiometricModal = React.memo(
-  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel }) => {
+  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl }) => {
     const navigation = useNavigation();
-    
+
     // Custom hooks
     const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown();
     const { requestLocationPermission, getCurrentLocation } = useGeolocation();
@@ -67,7 +67,7 @@ const BiometricModal = React.memo(
     const responseRef = useRef(null);
     const processedRef = useRef(false);
     const resetTimeoutRef = useRef(null);
-    
+
     // Animation values
     const iconScaleAnim = useRef(new Animated.Value(1)).current;
     const iconOpacityAnim = useRef(new Animated.Value(0)).current;
@@ -79,12 +79,12 @@ const BiometricModal = React.memo(
       return () => {
         console.log("🧹 BiometricModal unmounting - cleaning up");
         mountedRef.current = false;
-        
+
         if (resetTimeoutRef.current) {
           clearTimeout(resetTimeoutRef.current);
           console.log("⏹️ Cleared reset timeout");
         }
-        
+
         clearNotification();
       };
     }, []);
@@ -131,7 +131,7 @@ const BiometricModal = React.memo(
       if (mountedRef.current) {
         setState((prev) => {
           const merged = { ...prev, ...newState };
-          
+
           if (JSON.stringify(prev) !== JSON.stringify(merged)) {
             console.log("🔄 State updated:", merged);
 
@@ -153,7 +153,7 @@ const BiometricModal = React.memo(
 
             return merged;
           }
-          
+
           return prev;
         });
       } else {
@@ -165,7 +165,7 @@ const BiometricModal = React.memo(
     const resetState = useCallback(() => {
       console.log("🔄 Resetting biometric modal state");
       onclose(false);
-      
+
       setState({
         isLoading: false,
         loadingType: Global.LoadingTypes.none,
@@ -173,7 +173,7 @@ const BiometricModal = React.memo(
         employeeData: null,
         animationState: Global.AnimationStates.faceScan,
       });
-      
+
       setModalVisible(false);
       processedRef.current = false;
       resetCountdown();
@@ -202,7 +202,7 @@ const BiometricModal = React.memo(
         if (resetTimeoutRef.current) {
           clearTimeout(resetTimeoutRef.current);
         }
-        
+
         resetTimeoutRef.current = setTimeout(() => {
           console.log("⏰ Error timeout completed - resetting state");
           resetState();
@@ -215,7 +215,7 @@ const BiometricModal = React.memo(
     const handleCountdownFinish = useCallback(() => {
       console.log("⏰ Countdown finished");
       handleProcessError("Time is up! Please try again.");
-      
+
       if (navigation.canGoBack()) {
         console.log("↩️ Navigating back due to timeout");
         navigation.goBack();
@@ -229,7 +229,7 @@ const BiometricModal = React.memo(
         handleProcessError("Invalid API URL configuration.");
         return false;
       }
-      
+
       console.log("✅ API URL validated:", apiurl);
       return true;
     }, [apiurl, handleProcessError]);
@@ -256,7 +256,7 @@ const BiometricModal = React.memo(
 
         InteractionManager.runAfterInteractions(async () => {
           let base64;
-          
+
           try {
             console.log("🖼️ Converting image to base64");
             updateState({
@@ -299,7 +299,7 @@ const BiometricModal = React.memo(
             if (response?.httpstatus === 200) {
               console.log("✅ Face recognition successful");
               responseRef.current = response;
-              
+
               updateState({
                 employeeData: response.data?.data || null,
                 animationState: Global.AnimationStates.success,
@@ -315,11 +315,11 @@ const BiometricModal = React.memo(
               } else {
                 console.log("✅ Verification complete - calling callback");
                 safeCallback(responseRef.current);
-                
+
                 if (resetTimeoutRef.current) {
                   clearTimeout(resetTimeoutRef.current);
                 }
-                
+
                 resetTimeoutRef.current = setTimeout(() => {
                   console.log("⏰ Success timeout completed - resetting");
                   resetState();
@@ -436,7 +436,7 @@ const BiometricModal = React.memo(
               console.log("✅ Location verified successfully");
               safeCallback(responseRef.current);
               notifyMessage("Location verified successfully!", "success");
-              
+
               updateState({
                 animationState: Global.AnimationStates.success,
                 isLoading: false,
@@ -446,7 +446,7 @@ const BiometricModal = React.memo(
               if (resetTimeoutRef.current) {
                 clearTimeout(resetTimeoutRef.current);
               }
-              
+
               resetTimeoutRef.current = setTimeout(() => {
                 console.log("⏰ Location success timeout - resetting");
                 resetState();
@@ -547,8 +547,8 @@ const BiometricModal = React.memo(
     const loaderSource = useMemo(
       () =>
         state.isLoading &&
-        getLoaderGif(state.animationState, state.currentStep, apiurl),
-      [state.isLoading, state.animationState, state.currentStep, apiurl]
+        getLoaderGif(state.animationState, state.currentStep, apiurl, imageurl),
+      [state.isLoading, state.animationState, state.currentStep, apiurl, imageurl]
     );
 
     // Determine if camera should be shown
@@ -580,7 +580,7 @@ const BiometricModal = React.memo(
               />
             </View>
           )}
-          
+
           {/* UI elements positioned absolutely on top of camera */}
           <TouchableOpacity
             style={styles.closeButton}
@@ -590,7 +590,7 @@ const BiometricModal = React.memo(
           >
             <Icon name="close" size={24} color={Global.AppTheme.light} />
           </TouchableOpacity>
-          
+
           <View style={styles.topContainer}>
             {!shouldShowCamera && (
               <View style={styles.headerContainer}>
@@ -601,14 +601,14 @@ const BiometricModal = React.memo(
               </View>
             )}
           </View>
-          
+
           <View style={styles.topContainerstep}>
             <StepIndicator currentStep={state.currentStep} qrscan={qrscan} />
           </View>
 
           {state.employeeData && (
             <View style={styles.cardContainer}>
-              <Card employeeData={state.employeeData} apiurl={apiurl} />
+              <Card employeeData={state.employeeData} apiurl={apiurl} fileurl={fileurl} />
             </View>
           )}
 

package/src/utils/getLoaderGif.js

@@ -6,11 +6,11 @@ import { Global } from "./Global";
  * @param {string} currentStep - Current step of verification
  * @returns {any} - Gif image source or null
  */
-export const getLoaderGif = (animationState, currentStep,APIURL) => {
+export const getLoaderGif = (animationState, currentStep,APIURL,imageurl ='file/getCommonFile/image/') => {
   const FaceGifUrl =
-    `${APIURL}file/getCommonFile/image/Face.gif`;
+    `${APIURL}${imageurl}Face.gif`;
   const LocationGifUrl =
-    `${APIURL}file/getCommonFile/image/Location.gif`;
+    `${APIURL}${imageurl}Location.gif`;
 
   if (
     animationState === Global.AnimationStates.faceScan ||