react-native-biometric-verifier 0.0.55 → 0.0.57

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "A React Native module for biometric verification with face recognition and QR code scanning",
   "main": "src/index.js",
-  "private": false,
-  "license": "JESCON TECHNOLOGIES PVT LMT ,THRISSUR,KERALA",
-  "author": "PRAFUL DAS M M",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,24 +13,15 @@
     "face-recognition",
     "qr-code"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jescon-technologies/react-native-biometric-verifier"
-  },
-  "bugs": {
-    "url": "https://github.com/jescon-technologies/react-native-biometric-verifier/issues"
-  },
-  "homepage": "https://github.com/jescon-technologies/react-native-biometric-verifier#readme",
-  "files": [
-    "src",
-    "README.md"
-  ],
+  "author": "PRAFULDAS M M",
+  "license": "JESCON TECHNOLOGIES PVT LTD",
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": ">=0.60.0",
     "react-native-vector-icons": "^9.0.0",
     "react-native-geolocation-service": "^5.0.0",
     "react-native-image-resizer": "^1.0.0",
+    "@react-navigation/native": "^6.0.0",
     "prop-types": "^15.8.0",
     "react-native-fs": "^2.20.0"
   },

package/src/components/CaptureImageWithoutEdit.js

@@ -24,7 +24,7 @@ const CaptureImageWithoutEdit = React.memo(
     showCodeScanner = false,
     isLoading = false,
     frameProcessorFps = 1,
-    livenessLevel = 0, // 0 = anti-spoof only, 1 = anti-spoof + blinking
+    livenessLevel = 0,
     antispooflevel,
   }) => {
     const cameraRef = useRef(null);
@@ -119,7 +119,6 @@ const CaptureImageWithoutEdit = React.memo(
     );
 
     const onFacesUpdate = useCallback((payload) => {
-      console.log('qqqqqq',JSON.stringify(payload))
       if (!isMounted.current) return;
       try {
         const { count, progress, antiSpoofState } = payload;
@@ -204,7 +203,7 @@ const CaptureImageWithoutEdit = React.memo(
       isLoading,
       isActive: showCamera && cameraInitialized,
       livenessLevel: livenessLevel,
-      antispooflevel:antispooflevel,
+      antispooflevel,
     });
 
     useEffect(() => {
@@ -436,7 +435,7 @@ const CaptureImageWithoutEdit = React.memo(
               isActive={showCamera && !isLoading}
               photo={true}
               format={format}
-              codeScanner={showCodeScanner ? codeScanner : undefined}
+              codeScanner={showCodeScanner && cameraInitialized ? codeScanner : undefined}
               enableZoomGesture={false}
               lowLightBoost={cameraDevice.supportsLowLightBoost}
               frameProcessor={

package/src/components/Loader.js

@@ -5,30 +5,23 @@ import {
   Modal,
   Animated,
   Easing,
-  Text,
-  Image,
-  Dimensions,
+  Text
 } from "react-native";
+import FastImage from 'react-native-fast-image';
+import { normalize } from "react-native-elements";
 import { getLoaderGif } from "../utils/getLoaderGif";
 
-const { width, height } = Dimensions.get("window");
-
-// Helper: convert percentage of screen width to px
-const wp = (percent) => (width * percent) / 100;
-
 export default function Loader({
   state,
-  overlayColor = "rgba(0,0,0,0.4)",
-  loaderColor = "lightblue",
-  size = 12, // % of screen width
-  gifSource = {
-    uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/Face.gif",
-  },
-  message = "",
+  overlayColor = 'rgba(0,0,0,0.4)',
+  loaderColor = 'lightblue',
+  size = 50,
+  gifSource = { uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/Face.gif" },
+  message = '',
   messageStyle = {},
-  animationType = "fade",
+  animationType = 'fade',
   hasBackground = true,
-  borderRadius = 4, // %
+  borderRadius = 20,
   shadow = true,
   imageurl,
 }) {
@@ -37,29 +30,30 @@ export default function Loader({
   const [fade] = useState(new Animated.Value(0));
   const [imageSource, setImageSource] = useState(gifSource);
 
-  const error = getLoaderGif(
-    state.animationState,
-    state.currentStep,
-    "http://emr.amalaims.org:9393/",
-    imageurl
-  );
+  const error = getLoaderGif(state.animationState, state.currentStep, "http://emr.amalaims.org:9393/", imageurl);
 
+  // Reset imageSource whenever gifSource prop changes
   useEffect(() => {
     setImageSource(gifSource);
   }, [gifSource]);
 
   const handleImageError = () => {
-    setImageSource(error);
+    try {
+      setImageSource(error);
+    } catch (err) {
+      console.error("Loader image error:", err);
+    }
   };
 
+  // Rotation, pulse, and fade-in animations
   useEffect(() => {
-    if (!gifSource) {
+    if (!gifSource) { // Only animate if not using a GIF
       Animated.loop(
         Animated.timing(rotation, {
           toValue: 1,
           duration: 1500,
           easing: Easing.linear,
-          useNativeDriver: true,
+          useNativeDriver: true
         })
       ).start();
     }
@@ -69,90 +63,80 @@ export default function Loader({
         Animated.timing(pulse, {
           toValue: 1.1,
           duration: 800,
-          useNativeDriver: true,
+          useNativeDriver: true
         }),
         Animated.timing(pulse, {
           toValue: 1,
           duration: 800,
-          useNativeDriver: true,
-        }),
+          useNativeDriver: true
+        })
       ])
     ).start();
 
     Animated.timing(fade, {
       toValue: 1,
       duration: 300,
-      useNativeDriver: true,
+      useNativeDriver: true
     }).start();
   }, []);
 
   const spin = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"],
+    outputRange: ['0deg', '360deg']
   });
 
-  const loaderSize = wp(size);
-  const borderSize = loaderSize * 0.12;
-
   const loaderContent = gifSource ? (
-    <Image
-      style={[
-        styles.icon,
-        { width: loaderSize, height: loaderSize },
-      ]}
+    <FastImage
+      style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
       source={imageSource}
+      resizeMode={FastImage.resizeMode.contain}
       onError={handleImageError}
     />
   ) : (
-    <Animated.View
-      style={[
-        styles.defaultLoader,
+    <Animated.View style={[
+      styles.defaultLoader,
+      {
+        borderColor: loaderColor,
+        transform: [{ rotate: spin }, { scale: pulse }],
+        width: normalize(size),
+        height: normalize(size),
+        borderWidth: normalize(size / 10)
+      }
+    ]}>
+      <View style={[
+        styles.innerCircle,
         {
-          width: loaderSize,
-          height: loaderSize,
-          borderWidth: borderSize,
-          borderColor: loaderColor,
-          transform: [{ rotate: spin }, { scale: pulse }],
-        },
-      ]}
-    >
-      <View
-        style={[
-          styles.innerCircle,
-          {
-            width: loaderSize / 2,
-            height: loaderSize / 2,
-            backgroundColor: loaderColor,
-          },
-        ]}
-      />
+          backgroundColor: loaderColor,
+          width: normalize(size / 2),
+          height: normalize(size / 2)
+        }
+      ]} />
     </Animated.View>
   );
 
   return (
     <Modal
       animationType={animationType}
-      transparent
+      transparent={true}
       visible={state.isLoading}
-      onRequestClose={() => {}}
+      onRequestClose={() => { }}
     >
-      <Animated.View
-        style={[
-          styles.modalContainer,
-          { backgroundColor: overlayColor, opacity: fade },
-        ]}
-      >
-        <Animated.View
-          style={[
-            styles.loaderContainer,
-            {
-              backgroundColor: hasBackground ? "white" : "transparent",
-              borderRadius: wp(borderRadius),
-              transform: [{ scale: pulse }],
-            },
-            shadow && styles.shadowStyle,
-          ]}
-        >
+      <Animated.View style={[
+        styles.modalContainer,
+        {
+          backgroundColor: overlayColor,
+          opacity: fade
+        }
+      ]}>
+        <Animated.View style={[
+          styles.loaderContainer,
+          {
+            backgroundColor: hasBackground ? 'white' : 'transparent',
+            borderRadius: normalize(borderRadius),
+            transform: [{ scale: pulse }],
+            ...(shadow && styles.shadowStyle)
+          }
+        ]}>
           {loaderContent}
           {message ? (
             <Text style={[styles.messageText, messageStyle]}>
@@ -168,36 +152,40 @@ export default function Loader({
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   loaderContainer: {
-    padding: wp(5),
-    justifyContent: "center",
-    alignItems: "center",
+    padding: normalize(20),
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  icon: {
-    resizeMode: "contain",
+  icon_style: {
+    justifyContent: "center",
+    alignItems: "center"
   },
   defaultLoader: {
-    borderRadius: 1000,
-    justifyContent: "center",
-    alignItems: "center",
+    borderRadius: normalize(100),
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   innerCircle: {
-    borderRadius: 1000,
+    borderRadius: normalize(100),
   },
   messageText: {
-    marginTop: wp(3),
-    fontSize: wp(3.5),
-    color: "#555",
-    textAlign: "center",
+    marginTop: normalize(15),
+    fontSize: normalize(14),
+    color: '#555',
+    textAlign: 'center'
   },
   shadowStyle: {
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
-  },
+  }
 });

package/src/components/Notification.js

@@ -1,23 +1,32 @@
 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 { Global } from '../utils/Global';
 
-export const Notification = ({ notification = {}, fadeAnim, slideAnim }) => {
-  const { visible = false, type = 'info', message = '' } = notification;
+export const Notification = ({ notification, fadeAnim, slideAnim }) => {
+  if (!notification || typeof notification !== 'object') {
+    console.warn('Notification: Invalid or missing notification object');
+    return null;
+  }
 
-  // Animations (must ALWAYS exist)
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-  const shakeAnim = useRef(new Animated.Value(0)).current;
+  const { visible, type = 'info', message = '' } = notification;
+  if (!visible) return null;
 
+  // Icon and color mapping
   const iconMap = {
     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;
+  const { name: iconName, color: iconColor } = iconMap[type] || iconMap.info;
+
+  // Heartbeat animation (scale in/out)
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  // Shake animation (rotation wiggle)
+  const shakeAnim = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     const heartbeat = Animated.loop(
@@ -69,20 +78,20 @@ export const Notification = ({ notification = {}, fadeAnim, slideAnim }) => {
       heartbeat.stop();
       shake.stop();
     };
-  }, [visible, type]);
+  }, [visible, type, scaleAnim, shakeAnim]);
 
-  const shakeRotate = shakeAnim.interpolate({
+  // Shake rotation mapping (small wiggle)
+  const shakeInterpolate = shakeAnim.interpolate({
     inputRange: [-1, 1],
     outputRange: ['-10deg', '10deg'],
   });
 
   return (
     <Animated.View
-      pointerEvents={visible ? 'auto' : 'none'}
       style={[
         styles.container,
         {
-          opacity: visible ? 1 : 0,
+          opacity: fadeAnim instanceof Animated.Value ? fadeAnim : 1,
           transform: [
             { translateY: slideAnim instanceof Animated.Value ? slideAnim : 0 },
           ],
@@ -93,13 +102,12 @@ export const Notification = ({ notification = {}, fadeAnim, slideAnim }) => {
         style={{
           transform: [
             { scale: scaleAnim },
-            ...(type === 'error' ? [{ rotate: shakeRotate }] : []),
+            ...(type === 'error' ? [{ rotate: shakeInterpolate }] : []),
           ],
         }}
       >
-        <Icon name={iconName} size={50} color={iconColor} />
+        <Icon name={iconName} size={50} color={iconColor} style={styles.icon} />
       </Animated.View>
-
       <Text style={styles.message}>
         {message || 'No message provided'}
       </Text>
@@ -134,4 +142,20 @@ const styles = StyleSheet.create({
   },
 });
 
+Notification.propTypes = {
+  notification: PropTypes.shape({
+    visible: PropTypes.bool.isRequired,
+    type: PropTypes.oneOf(['success', 'error', 'info']),
+    message: PropTypes.string,
+  }),
+  fadeAnim: PropTypes.instanceOf(Animated.Value),
+  slideAnim: PropTypes.instanceOf(Animated.Value),
+};
+
+Notification.defaultProps = {
+  notification: { visible: false, type: 'info', message: '' },
+  fadeAnim: new Animated.Value(1),
+  slideAnim: new Animated.Value(0),
+};
+
 export default Notification;

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -38,8 +38,8 @@ export const useFaceDetectionFrameProcessor = ({
   showCodeScanner = false,
   isLoading = false,
   isActive = true,
-  livenessLevel = 0,
-  antispooflevel = 7,
+  livenessLevel,
+  antispooflevel = 0.7,
 }) => {
   const { detectFaces } = useFaceDetector({
     performanceMode: 'fast',
@@ -56,7 +56,7 @@ export const useFaceDetectionFrameProcessor = ({
   // Initialize anti-spoofing with memoization
   const initializeAntiSpoof = useCallback(async () => {
     if (antiSpoofInitialized.current) return true;
-    
+
     try {
       const available = isFaceAntiSpoofAvailable?.();
       if (!available) return false;
@@ -82,10 +82,10 @@ export const useFaceDetectionFrameProcessor = ({
       Worklets.createSharedValue({
         // Core timing
         lastProcessedTime: 0,
-        
+
         // Face tracking - packed for memory efficiency
         faceTracking: { lastX: 0, lastY: 0, lastW: 0, lastH: 0, stableCount: 0 },
-        
+
         // State flags - packed together
         flags: {
           captured: false,
@@ -95,14 +95,14 @@ export const useFaceDetectionFrameProcessor = ({
           isFaceCentered: false,
           eyeClosed: false,
         },
-        
+
         // Liveness state
         liveness: {
           level: livenessLevel,
           step: 0,
           blinkCount: 0,
         },
-        
+
         // Anti-spoof state
         antiSpoof: {
           consecutiveLiveFrames: 0,
@@ -110,14 +110,14 @@ export const useFaceDetectionFrameProcessor = ({
           isLive: false,
           confidence: 0,
         },
-        
+
         // Face centering
         centering: {
           centeredFrames: 0,
           frameWidth: 0,
           frameHeight: 0,
         },
-        
+
         // Performance tracking
         performance: {
           batchCounter: 0,
@@ -181,7 +181,7 @@ export const useFaceDetectionFrameProcessor = ({
       Worklets.createRunOnJS((count, progress, step, isCentered, antiSpoofState) => {
         const now = Date.now();
         const callbacks = callbacksRef.current;
-        
+
         if (now - callbacks.lastFacesEventTime > FACES_EVENT_INTERVAL_MS) {
           callbacks.lastFacesEventTime = now;
           onFacesUpdate?.({ count, progress, step, isCentered, antiSpoofState });
@@ -195,7 +195,7 @@ export const useFaceDetectionFrameProcessor = ({
       Worklets.createRunOnJS((step, extra) => {
         const now = Date.now();
         const callbacks = callbacksRef.current;
-        
+
         if (now - callbacks.lastLivenessEventTime > LIVENESS_EVENT_INTERVAL_MS) {
           callbacks.lastLivenessEventTime = now;
           onLivenessUpdate?.(step, extra);
@@ -209,7 +209,7 @@ export const useFaceDetectionFrameProcessor = ({
       Worklets.createRunOnJS((result) => {
         const now = Date.now();
         const callbacks = callbacksRef.current;
-        
+
         if (now - callbacks.lastAntiSpoofEventTime > ANTI_SPOOF_EVENT_INTERVAL_MS) {
           callbacks.lastAntiSpoofEventTime = now;
           onAntiSpoofUpdate?.(result);
@@ -221,7 +221,7 @@ export const useFaceDetectionFrameProcessor = ({
   // Optimized face centering check - inlined for performance
   const isFaceCenteredInFrame = Worklets.createRunOnJS((faceBounds, frameWidth, frameHeight) => {
     'worklet';
-    
+
     if (!faceBounds || frameWidth === 0 || frameHeight === 0) return false;
 
     const faceCenterX = faceBounds.x + faceBounds.width / 2;
@@ -251,10 +251,10 @@ export const useFaceDetectionFrameProcessor = ({
   const frameProcessor = useFrameProcessor(
     (frame) => {
       'worklet';
-      
+
       // Performance monitoring
       const processingStart = Date.now();
-      
+
       const state = sharedState.value;
       const now = frame?.timestamp ? frame.timestamp / 1e6 : Date.now();
 
@@ -269,7 +269,7 @@ export const useFaceDetectionFrameProcessor = ({
         frame.release?.();
         return;
       }
-      
+
       frameProcessingStartTime.current = processingStart;
 
       let detected = null;
@@ -293,7 +293,7 @@ export const useFaceDetectionFrameProcessor = ({
           state.centering.centeredFrames = 0;
           state.flags.isFaceCentered = false;
           state.lastProcessedTime = now;
-          
+
           runOnFaces(0, 0, state.liveness.step, false, {
             isLive: false,
             confidence: 0,
@@ -341,8 +341,8 @@ export const useFaceDetectionFrameProcessor = ({
 
           // Face centering check
           const centered = isFaceCenteredInFrame(
-            bounds, 
-            state.centering.frameWidth, 
+            bounds,
+            state.centering.frameWidth,
             state.centering.frameHeight
           );
 
@@ -434,8 +434,8 @@ export const useFaceDetectionFrameProcessor = ({
           } else {
             const dx = Math.abs(x - state.faceTracking.lastX);
             const dy = Math.abs(y - state.faceTracking.lastY);
-            newStableCount = (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) 
-              ? state.faceTracking.stableCount + 1 
+            newStableCount = (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD)
+              ? state.faceTracking.stableCount + 1
               : 1;
           }
 
@@ -452,7 +452,7 @@ export const useFaceDetectionFrameProcessor = ({
           state.performance.batchCounter++;
 
           const progress = Math.min(100, (newStableCount / FACE_STABILITY_THRESHOLD) * 100);
-          
+
           // Batch face updates
           if (state.performance.batchCounter % BATCH_UPDATE_THRESHOLD === 0) {
             runOnFaces(1, progress, newLivenessStep, state.flags.isFaceCentered, {
@@ -471,8 +471,8 @@ export const useFaceDetectionFrameProcessor = ({
             state.antiSpoof.consecutiveLiveFrames >= REQUIRED_CONSECUTIVE_LIVE_FRAMES &&
             state.flags.isFaceCentered &&
             (localState.livenessLevel === 0 || (
-              localState.livenessLevel === 1 && 
-              newLivenessStep === 2 && 
+              localState.livenessLevel === 1 &&
+              newLivenessStep === 2 &&
               newBlinkCount >= REQUIRED_BLINKS
             ))
           );
@@ -492,7 +492,7 @@ export const useFaceDetectionFrameProcessor = ({
           state.flags.hasSingleFace = false;
           state.centering.centeredFrames = 0;
           state.flags.isFaceCentered = false;
-          
+
           runOnFaces(detected.length, 0, state.liveness.step, false, {
             isLive: false,
             confidence: 0,
@@ -537,7 +537,7 @@ export const useFaceDetectionFrameProcessor = ({
 
   const forceResetCaptureState = useCallback(() => {
     const current = sharedState.value;
-    
+
     sharedState.value = {
       lastProcessedTime: 0,
       faceTracking: {