react-native-biometric-verifier 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "A React Native module for biometric verification with face recognition and QR code scanning",
   "main": "src/index.js",
   "scripts": {
@@ -14,7 +14,7 @@
     "qr-code"
   ],
   "author": "PRAFULDAS M M",
-  "license": "JESCON TECHNOLOGIES PVT",
+  "license": "JESCON TECHNOLOGIES PVT LTD",
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": ">=0.60.0",

package/src/components/CaptureImageWithoutEdit.js

@@ -6,8 +6,8 @@ import {
   StyleSheet,
   ActivityIndicator,
   Animated,
+  Dimensions,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 import {
   Camera,
   getCameraDevice,
@@ -24,7 +24,7 @@ const CaptureImageWithoutEdit = React.memo(
     showCodeScanner = false,
     isLoading = false,
     frameProcessorFps = 1,
-    livenessLevel,
+    livenessLevel = 0, // 0 = anti-spoof only, 1 = anti-spoof + blinking
   }) => {
     const cameraRef = useRef(null);
     const [cameraDevice, setCameraDevice] = useState(null);
@@ -38,11 +38,16 @@ const CaptureImageWithoutEdit = React.memo(
     const [blinkCount, setBlinkCount] = useState(0);
     const [progress, setProgress] = useState(0);
     const [faceCount, setFaceCount] = useState(0);
+    const [isFaceLive, setIsFaceLive] = useState(false);
+    const [antiSpoofConfidence, setAntiSpoofConfidence] = useState(0);
+    const [isFaceCentered, setIsFaceCentered] = useState(false);
+    const [hasSingleFace, setHasSingleFace] = useState(false);
 
     const captured = useRef(false);
     const isMounted = useRef(true);
 
     const instructionAnim = useRef(new Animated.Value(1)).current;
+    const liveIndicatorAnim = useRef(new Animated.Value(0)).current;
 
     const resetCaptureState = useCallback(() => {
       captured.current = false;
@@ -51,6 +56,10 @@ const CaptureImageWithoutEdit = React.memo(
       setBlinkCount(0);
       setProgress(0);
       setFaceCount(0);
+      setIsFaceLive(false);
+      setAntiSpoofConfidence(0);
+      setIsFaceCentered(false);
+      setHasSingleFace(false);
     }, []);
 
     const codeScanner = useCodeScanner({
@@ -112,10 +121,18 @@ const CaptureImageWithoutEdit = React.memo(
     const onFacesUpdate = useCallback((payload) => {
       if (!isMounted.current) return;
       try {
-        const { count, progress } = payload;
+        const { count, progress, antiSpoofState } = payload;
         setFaceCount(count);
         setProgress(progress);
 
+        // Update anti-spoof related states
+        if (antiSpoofState) {
+          setIsFaceLive(antiSpoofState.isLive || false);
+          setAntiSpoofConfidence(antiSpoofState.confidence || 0);
+          setIsFaceCentered(antiSpoofState.isFaceCentered || false);
+          setHasSingleFace(antiSpoofState.hasSingleFace || false);
+        }
+
         if (count === 1) {
           setFaces((prev) => {
             if (prev.length === 1) return prev;
@@ -144,6 +161,33 @@ const CaptureImageWithoutEdit = React.memo(
       [instructionAnim]
     );
 
+    const onAntiSpoofUpdate = useCallback((result) => {
+      if (!isMounted.current) return;
+      try {
+        // Animate live indicator when face becomes live
+        if (result?.isLive && !isFaceLive) {
+          Animated.spring(liveIndicatorAnim, {
+            toValue: 1,
+            tension: 50,
+            friction: 7,
+            useNativeDriver: true,
+          }).start();
+        } else if (!result?.isLive && isFaceLive) {
+          Animated.timing(liveIndicatorAnim, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+          }).start();
+        }
+
+        setIsFaceLive(result?.isLive || false);
+        setAntiSpoofConfidence(result?.confidence || 0);
+        setIsFaceCentered(result?.isFaceCentered || false);
+      } catch (error) {
+        console.error('Error updating anti-spoof:', error);
+      }
+    }, [isFaceLive, liveIndicatorAnim]);
+
     const {
       frameProcessor,
       forceResetCaptureState,
@@ -154,10 +198,11 @@ const CaptureImageWithoutEdit = React.memo(
       onStableFaceDetected,
       onFacesUpdate,
       onLivenessUpdate,
+      onAntiSpoofUpdate,
       showCodeScanner,
       isLoading,
       isActive: showCamera && cameraInitialized,
-      livenessLevel: livenessLevel || 0, // Ensure livenessLevel is never null/undefined
+      livenessLevel: livenessLevel,
     });
 
     useEffect(() => {
@@ -197,6 +242,7 @@ const CaptureImageWithoutEdit = React.memo(
           setShowCamera(true);
           console.log('Camera device set successfully');
         } else {
+          console.warn('Camera permission not granted');
         }
       } catch (error) {
         console.error('Camera permission error:', error);
@@ -208,7 +254,6 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, [currentCameraType]);
 
-
     const initializeCamera = useCallback(async () => {
       await getPermission();
     }, [getPermission]);
@@ -245,7 +290,6 @@ const CaptureImageWithoutEdit = React.memo(
     }, [cameraType, currentCameraType, initializeCamera]);
 
     const format = useCameraFormat(cameraDevice, [
-      { videoResolution: { width: 640, height: 640 } },
       { fps: 30 },
     ]);
 
@@ -283,54 +327,31 @@ const CaptureImageWithoutEdit = React.memo(
         return 'Multiple faces detected';
       }
 
-      const currentLevel = livenessLevel || 0;
-
-      if (currentLevel === 0) {
-        if (faces.length === 0) return 'Position your face in the frame';
-        if (progress < 100) return 'Hold still...';
-        return 'Perfect! Capturing...';
+      if (!hasSingleFace) {
+        return 'Position your face in the frame';
       }
 
-      if (currentLevel === 1) {
-        switch (livenessStep) {
-          case 0:
-            return 'Face the camera straight';
-          case 1:
-            return `Blink your eyes ${blinkCount} of 3 times`;
-          case 2:
-            return 'Perfect! Hold still — capturing...';
-          default:
-            return 'Align your face in frame';
-        }
+      if (!isFaceCentered) {
+        return 'Center your face in the frame';
       }
 
-      if (currentLevel === 2) {
-        switch (livenessStep) {
-          case 0:
-            return 'Face the camera straight';
-          case 1:
-            return 'Turn your head to the RIGHT';
-          case 2:
-            return 'Turn your head to the LEFT';
-          case 3:
-            return 'Perfect! Hold still — capturing...';
-          default:
-            return 'Align your face in frame';
-        }
+      if (livenessLevel === 0) {
+        if (!isFaceLive) return 'Verifying liveness...';
+        if (progress < 100) return 'Hold still...';
+        return 'Perfect! Capturing...';
       }
 
-      if (currentLevel === 3) {
+      if (livenessLevel === 1) {
         switch (livenessStep) {
           case 0:
             return 'Face the camera straight';
           case 1:
-            return 'Turn your head to the RIGHT';
-          case 2:
-            return 'Turn your head to the LEFT';
-          case 3:
+            if (!isFaceLive) return 'Verifying liveness...';
             return `Blink your eyes ${blinkCount} of 3 times`;
-          case 4:
-            return 'Perfect! Hold still — capturing...';
+          case 2:
+            if (!isFaceLive) return 'Verifying liveness...';
+            if (progress < 100) return 'Hold still...';
+            return 'Perfect! Capturing...';
           default:
             return 'Align your face in frame';
         }
@@ -341,23 +362,62 @@ const CaptureImageWithoutEdit = React.memo(
       livenessLevel,
       livenessStep,
       blinkCount,
-      faces.length,
       progress,
       faceCount,
+      hasSingleFace,
+      isFaceCentered,
+      isFaceLive,
     ]);
 
-    const getStepConfig = useCallback(() => {
-      const currentLevel = livenessLevel || 0;
+    const getInstructionContainerStyle = useCallback(() => {
+      const baseStyle = [
+        styles.instructionContainer,
+        {
+          opacity: instructionAnim,
+          transform: [
+            {
+              translateY: instructionAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [10, 0],
+              }),
+            },
+          ],
+        },
+      ];
+
+      if (faceCount > 1) {
+        return [...baseStyle, styles.errorInstructionContainer];
+      }
+
+      if (isFaceLive) {
+        return [...baseStyle, styles.liveInstructionContainer];
+      }
+
+      if (hasSingleFace && isFaceCentered) {
+        return [...baseStyle, styles.verifyingInstructionContainer];
+      }
+
+      return baseStyle;
+    }, [faceCount, isFaceLive, hasSingleFace, isFaceCentered, instructionAnim]);
+
+    const getInstructionStyle = useCallback(() => {
+      if (faceCount > 1) {
+        return [styles.instructionText, styles.errorInstructionText];
+      }
+
+      if (isFaceLive) {
+        return [styles.instructionText, styles.liveInstructionText];
+      }
+
+      return styles.instructionText;
+    }, [faceCount, isFaceLive]);
 
-      switch (currentLevel) {
+    const getStepConfig = useCallback(() => {
+      switch (livenessLevel) {
         case 0:
           return { totalSteps: 0, showSteps: false };
         case 1:
           return { totalSteps: 1, showSteps: true };
-        case 2:
-          return { totalSteps: 2, showSteps: true };
-        case 3:
-          return { totalSteps: 3, showSteps: true };
         default:
           return { totalSteps: 0, showSteps: false };
       }
@@ -365,13 +425,6 @@ const CaptureImageWithoutEdit = React.memo(
 
     const stepConfig = getStepConfig();
 
-    const getInstructionStyle = useCallback(() => {
-      if (faceCount > 1) {
-        return [styles.instructionText, { color: Global.AppTheme.error }];
-      }
-      return styles.instructionText;
-    }, [faceCount]);
-
     return (
       <View style={styles.container}>
         <View style={styles.cameraContainer}>
@@ -420,41 +473,25 @@ const CaptureImageWithoutEdit = React.memo(
             </View>
           )}
 
-          {!showCodeScanner && showCamera && cameraDevice && (livenessLevel || 0) > 0 && (
+          {!showCodeScanner && showCamera && cameraDevice && livenessLevel === 1 && (
             <View style={styles.livenessContainer}>
-              <Animated.View
-                style={[
-                  styles.instructionContainer,
-                  {
-                    opacity: instructionAnim,
-                    transform: [
-                      {
-                        translateY: instructionAnim.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [10, 0],
-                        }),
-                      },
-                    ],
-                  },
-                ]}
-              >
+              <Animated.View style={getInstructionContainerStyle()}>
                 <Text style={getInstructionStyle()}>{getInstruction()}</Text>
               </Animated.View>
 
-              {(livenessLevel === 1 || livenessLevel === 3) &&
-                livenessStep === (livenessLevel === 1 ? 1 : 3) && (
-                  <View style={styles.blinkProgressContainer}>
-                    {[1, 2, 3].map((i) => (
-                      <View
-                        key={i}
-                        style={[
-                          styles.blinkDot,
-                          blinkCount >= i && styles.blinkDotActive,
-                        ]}
-                      />
-                    ))}
-                  </View>
-                )}
+              {livenessStep === 1 && (
+                <View style={styles.blinkProgressContainer}>
+                  {[1, 2, 3].map((i) => (
+                    <View
+                      key={i}
+                      style={[
+                        styles.blinkDot,
+                        blinkCount >= i && styles.blinkDotActive,
+                      ]}
+                    />
+                  ))}
+                </View>
+              )}
 
               {stepConfig.showSteps && faceCount <= 1 && (
                 <>
@@ -496,47 +533,34 @@ const CaptureImageWithoutEdit = React.memo(
                         <Text style={styles.stepLabel}>Blink</Text>
                       </>
                     )}
-                    {livenessLevel === 2 && (
-                      <>
-                        <Text style={styles.stepLabel}>Center</Text>
-                        <Text style={styles.stepLabel}>Right</Text>
-                        <Text style={styles.stepLabel}>Left</Text>
-                      </>
-                    )}
-                    {livenessLevel === 3 && (
-                      <>
-                        <Text style={styles.stepLabel}>Center</Text>
-                        <Text style={styles.stepLabel}>Right</Text>
-                        <Text style={styles.stepLabel}>Left</Text>
-                        <Text style={styles.stepLabel}>Blink</Text>
-                      </>
-                    )}
                   </View>
                 </>
               )}
             </View>
           )}
 
-          {!showCodeScanner && showCamera && cameraDevice && (livenessLevel || 0) === 0 && (
+          {!showCodeScanner && showCamera && cameraDevice && livenessLevel === 0 && (
             <View style={styles.livenessContainer}>
-              <Animated.View
-                style={[
-                  styles.instructionContainer,
-                  {
-                    opacity: instructionAnim,
-                  },
-                ]}
-              >
+              <Animated.View style={getInstructionContainerStyle()}>
                 <Text style={getInstructionStyle()}>{getInstruction()}</Text>
               </Animated.View>
-
-              {faceCount === 1 && (
-                <View style={styles.stabilityContainer}>
-                  <View style={styles.stabilityBar}>
+              {isFaceCentered && (
+                <View style={styles.confidenceContainer}>
+                  <Text style={styles.confidenceText}>
+                    Confidence: {Math.round(antiSpoofConfidence * 100)}%
+                  </Text>
+                  <View style={styles.confidenceBar}>
                     <View
                       style={[
-                        styles.stabilityProgress,
-                        { width: `${progress}%` },
+                        styles.confidenceProgress,
+                        {
+                          width: `${antiSpoofConfidence * 100}%`,
+                          backgroundColor: antiSpoofConfidence > 0.7
+                            ? Global.AppTheme.success
+                            : antiSpoofConfidence > 0.4
+                              ? Global.AppTheme.warning
+                              : Global.AppTheme.error
+                        }
                       ]}
                     />
                   </View>
@@ -613,12 +637,130 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginBottom: 10,
   },
+  liveInstructionContainer: {
+    backgroundColor: Global.AppTheme.success,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    marginBottom: 10,
+  },
+  verifyingInstructionContainer: {
+    backgroundColor: Global.AppTheme.warning,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    marginBottom: 10,
+  },
+  errorInstructionContainer: {
+    backgroundColor: Global.AppTheme.error,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    marginBottom: 10,
+  },
   instructionText: {
     color: 'white',
     fontSize: 16,
     fontWeight: 'bold',
     textAlign: 'center',
   },
+  liveInstructionText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  errorInstructionText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  // Live Indicator
+  liveIndicator: {
+    position: 'absolute',
+    top: 20,
+    right: 20,
+    backgroundColor: Global.AppTheme.success,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  liveIndicatorInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  livePulse: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: 'white',
+    marginRight: 6,
+  },
+  liveIndicatorText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  // Status Overview
+  statusOverview: {
+    position: 'absolute',
+    bottom: 20,
+    left: 20,
+    right: 20,
+    backgroundColor: 'rgba(0,0,0,0.8)',
+    borderRadius: 12,
+    padding: 16,
+  },
+  statusRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  statusItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statusDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginRight: 6,
+  },
+  statusGood: {
+    backgroundColor: Global.AppTheme.success,
+  },
+  statusPending: {
+    backgroundColor: '#666',
+  },
+  statusText: {
+    color: 'white',
+    fontSize: 12,
+  },
+  confidenceContainer: {
+    marginTop: 8,
+  },
+  confidenceText: {
+    color: 'white',
+    fontSize: 12,
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  confidenceBar: {
+    height: 4,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  confidenceProgress: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  // Existing styles
   blinkProgressContainer: {
     flexDirection: 'row',
     marginVertical: 8,
@@ -631,7 +773,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 4,
   },
   blinkDotActive: {
-    backgroundColor: '#00ff88',
+    backgroundColor: Global.AppTheme.success,
   },
   stepsContainer: {
     flexDirection: 'row',