react-native-biometric-verifier 0.0.12 → 0.0.13

package/package.json

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

package/src/components/CCard.js

@@ -0,0 +1,136 @@
+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';
+
+export const CCard = ({ employeeData, apiurl }) => {
+  const [imageError, setImageError] = useState(false);
+
+  if (!employeeData || typeof employeeData !== 'object') {
+    console.warn('CCard: Invalid or missing employeeData');
+    return null;
+  }
+
+  const { facename, faceid, imageurl } = 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` };
+
+  return (
+    <View style={styles.card}>
+      {/* Employee Image */}
+      <View style={styles.imageWrapper}>
+        <Image
+          source={imageSource}
+          style={styles.image}
+          resizeMode="cover"
+          onError={() => {
+            console.error(`Error loading image for employee: ${employeeName}`);
+            setImageError(true);
+          }}
+        />
+        <View style={styles.imageOverlay} />
+      </View>
+
+      {/* Employee Info */}
+      <Text style={styles.name}>{employeeName}</Text>
+      <Text style={styles.id}>ID: {employeeId}</Text>
+
+      {/* Verified Badge */}
+      <View style={styles.badgeWrapper}>
+        <View style={styles.badge}>
+          <Icon name="verified-user" size={16} color={COLORS.success} />
+          <Text style={styles.badgeText}>Identity Verified</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+CCard.propTypes = {
+  employeeData: PropTypes.shape({
+    facename: PropTypes.string,
+    faceid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    imageurl: PropTypes.string,
+  }),
+};
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    marginVertical: 20,
+    width: '100%',
+    padding: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+    borderRadius: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.15,
+    shadowRadius: 10,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+    backdropFilter: 'blur(10px)', // works only in web, safe to keep
+  },
+  imageWrapper: {
+    width: 110,
+    height: 110,
+    borderRadius: 55,
+    borderWidth: 3,
+    borderColor: COLORS.primary,
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  imageOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(108, 99, 255, 0.12)',
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginTop: 15,
+    color: COLORS.light,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
+  },
+  id: {
+    fontSize: 15,
+    color: COLORS.gray,
+    marginTop: 5,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+  badgeWrapper: {
+    flexDirection: 'row',
+    marginTop: 15,
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.25)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+  },
+  badgeText: {
+    fontSize: 13,
+    color: COLORS.light,
+    marginLeft: 6,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+});
+
+export default CCard;

package/src/components/CaptureImageWithoutEdit.js

@@ -0,0 +1,457 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import {
+    View,
+    TouchableOpacity,
+    Text,
+    StyleSheet,
+    ActivityIndicator,
+    Platform,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {
+    Camera,
+    getCameraDevice,
+    useCodeScanner,
+    useCameraFormat,
+    useFrameProcessor,
+    CameraRuntimeError,
+} from 'react-native-vision-camera';
+import { Worklets } from 'react-native-worklets-core';
+import { useFaceDetector } from 'react-native-vision-camera-face-detector';
+import { COLORS } from "../utils/constants";
+
+// Constants for configuration
+const FACE_STABILITY_THRESHOLD = 5; // Number of stable frames required
+const FACE_MOVEMENT_THRESHOLD = 15; // Pixel movement threshold for stability
+const FRAME_PROCESSOR_FPS = 3; // Frames per second for face detection
+const MIN_FACE_SIZE = 0.2; // Minimum face size for detection
+
+const CaptureImageWithoutEdit = React.memo(
+    ({
+        cameraType = 'front',
+        onCapture,
+        onToggleCamera,
+        showCodeScanner = false,
+        isLoading = false,
+        currentStep = '',
+    }) => {
+        const cameraRef = useRef(null);
+        const [cameraDevice, setCameraDevice] = useState(null);
+        const [cameraPermission, setCameraPermission] = useState('not-determined');
+        const [showCamera, setShowCamera] = useState(false);
+        const [cameraInitialized, setCameraInitialized] = useState(false);
+        
+        // Face detection states
+        const [faces, setFaces] = useState([]);
+        const [singleFaceDetected, setSingleFaceDetected] = useState(false);
+        const [cameraError, setCameraError] = useState(null);
+        
+        // Stability tracking refs
+        const stableCounter = useRef(0);
+        const lastBounds = useRef(null);
+        const captured = useRef(false);
+        const faceDetectionTimeout = useRef(null);
+        const processingFrame = useRef(false); // To prevent concurrent frame processing
+
+        const faceDetectionOptions = {
+            performanceMode: 'accurate',
+            landmarkMode: 'all',
+            contourMode: 'all',
+            classificationMode: 'all',
+            minFaceSize: MIN_FACE_SIZE,
+        };
+
+        const { detectFaces } = useFaceDetector(faceDetectionOptions);
+
+        const codeScanner = useCodeScanner({
+            codeTypes: ['qr', 'ean-13', 'code-128', 'code-39', 'code-93'],
+            onCodeScanned: (codes) => {
+                if (showCodeScanner && codes && codes[0]?.value && !isLoading) {
+                    console.log('🔍 QR Code scanned:', codes[0].value);
+                    onCapture(codes[0].value);
+                }
+            },
+        });
+
+        // Safe callback to JS for face detection results
+        const onFacesDetected = Worklets.createRunOnJS((detectedFaces) => {
+            // Only process if we have exactly one face
+            if (detectedFaces.length === 1 && !showCodeScanner && !captured.current) {
+                setFaces(detectedFaces);
+                setSingleFaceDetected(true);
+                
+                const face = detectedFaces[0];
+                const { bounds } = face;
+
+                if (lastBounds.current) {
+                    const dx = Math.abs(bounds.x - lastBounds.current.x);
+                    const dy = Math.abs(bounds.y - lastBounds.current.y);
+
+                    // small movement = stable
+                    if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
+                        stableCounter.current += 1;
+                    } else {
+                        stableCounter.current = 0;
+                    }
+                }
+
+                lastBounds.current = bounds;
+
+                // if face stable for required frames → capture
+                if (stableCounter.current >= FACE_STABILITY_THRESHOLD && cameraRef.current) {
+                    captured.current = true; // lock to avoid multiple shots
+                    setSingleFaceDetected(false); // Reset UI state
+                    
+                    (async () => {
+                        try {
+                            const photo = await cameraRef.current.takePhoto({
+                                flash: 'off',
+                                qualityPrioritization: 'balanced',
+                                enableShutterSound: false,
+                            });
+                            
+                            console.log('Photo captured:', photo.path);
+                            const photopath = `file://${photo.path}`;                            
+                            const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
+                            const photoData = {
+                                uri: photopath,
+                                filename: fileName,
+                                filetype: 'image/jpeg',
+                            };
+                            
+                            onCapture(photoData);
+                            
+                        } catch (e) {
+                            console.error('Capture error:', e);
+                            captured.current = false; // Reset capture lock on error
+                            setCameraError('Failed to capture image. Please try again.');
+                        }
+                    })();
+                }
+            } else {
+                // Reset if no face or multiple faces detected
+                setFaces(detectedFaces);
+                setSingleFaceDetected(detectedFaces.length === 1);
+                stableCounter.current = 0;
+                lastBounds.current = null;
+                
+                // Clear any pending timeout
+                if (faceDetectionTimeout.current) {
+                    clearTimeout(faceDetectionTimeout.current);
+                }
+            }
+            
+            processingFrame.current = false;
+        });
+
+        // Frame processor runs on UI thread
+        const frameProcessor = useFrameProcessor((frame) => {
+            'worklet';
+            if (showCodeScanner || captured.current || processingFrame.current) return;
+            
+            processingFrame.current = true;
+            try {
+                const detected = detectFaces(frame); // run detection
+                
+                // Only proceed if exactly one face is detected
+                if (detected.length === 1) {
+                    onFacesDetected(detected); // send results back to JS
+                } else {
+                    onFacesDetected(detected); // send results (could be empty or multiple)
+                }
+            } catch (error) {
+                console.error('Frame processor error:', error);
+                processingFrame.current = false;
+            }
+        }, [detectFaces, showCodeScanner]);
+
+        // Initialize camera
+        useEffect(() => {
+            let isMounted = true;
+            
+            const initializeCamera = async () => {
+                try {
+                    if (!isMounted) return;
+                    
+                    const permission = await Camera.requestCameraPermission();
+                    setCameraPermission(permission);
+
+                    if (permission === 'granted') {
+                        const devices = await Camera.getAvailableCameraDevices();
+                        const device = getCameraDevice(devices, cameraType);
+
+                        if (device) {
+                            setCameraDevice(device);
+                            setShowCamera(true);
+                        } else {
+                            console.error('❌ No camera device found for type:', cameraType);
+                            setCameraError('Camera not available on this device');
+                        }
+                    } else {
+                        setCameraError('Camera permission denied');
+                    }
+                } catch (error) {
+                    console.error('❌ Camera initialization failed:', error);
+                    if (isMounted) {
+                        setCameraError('Failed to initialize camera');
+                    }
+                }
+            };
+
+            initializeCamera();
+
+            return () => {
+                isMounted = false;
+                setShowCamera(false);
+                // Clean up timeout on unmount
+                if (faceDetectionTimeout.current) {
+                    clearTimeout(faceDetectionTimeout.current);
+                }
+            };
+        }, [cameraType]);
+        
+        const format = useCameraFormat(cameraDevice, [
+            { photoResolution: { width: 640, height: 640 } },
+        ]);
+
+        const handleCameraError = useCallback((error) => {
+            console.error('Camera error:', error);
+            let errorMessage = 'Camera error occurred';
+            
+            if (error instanceof CameraRuntimeError) {
+                switch (error.code) {
+                    case 'session/configuration-failed':
+                        errorMessage = 'Camera configuration failed';
+                        break;
+                    case 'device/not-available':
+                        errorMessage = 'Camera not available';
+                        break;
+                    case 'permission/microphone-not-granted':
+                        errorMessage = 'Microphone permission required';
+                        break;
+                    default:
+                        errorMessage = `Camera error: ${error.message}`;
+                }
+            }
+            
+            setCameraError(errorMessage);
+        }, []);
+
+        const handleCameraInitialized = useCallback(() => {
+            console.log('Camera initialized successfully');
+            setCameraInitialized(true);
+            setCameraError(null);
+        }, []);
+
+        const renderCameraPlaceholder = () => (
+            <View style={styles.cameraContainer}>
+                {cameraError ? (
+                    <View style={styles.errorContainer}>
+                        <Icon name="error-outline" size={40} color={COLORS.error} />
+                        <Text style={styles.errorText}>{cameraError}</Text>
+                        <TouchableOpacity 
+                            style={styles.retryButton}
+                            onPress={() => {
+                                setCameraError(null);
+                                setShowCamera(false);
+                                setTimeout(() => setShowCamera(true), 100);
+                            }}
+                        >
+                            <Text style={styles.retryButtonText}>Retry</Text>
+                        </TouchableOpacity>
+                    </View>
+                ) : cameraPermission === 'denied' ? (
+                    <Text style={styles.placeholderText}>
+                        Camera permission required. Please enable in settings.
+                    </Text>
+                ) : cameraPermission === 'not-determined' ? (
+                    <Text style={styles.placeholderText}>
+                        Requesting camera access...
+                    </Text>
+                ) : !cameraDevice ? (
+                    <Text style={styles.placeholderText}>Camera not available</Text>
+                ) : (
+                    <ActivityIndicator size="large" color={COLORS.primary} />
+                )}
+            </View>
+        );
+
+        const shouldRenderCamera = showCamera && 
+                                 cameraPermission === 'granted' && 
+                                 cameraDevice && 
+                                 !cameraError;
+
+        return (
+            <View style={styles.cameraContainer}>
+                {shouldRenderCamera ? (
+                    <Camera
+                        ref={cameraRef}
+                        style={styles.camera}
+                        device={cameraDevice}
+                        isActive={showCamera && !isLoading}
+                        photo={true}
+                        format={format}
+                        codeScanner={showCodeScanner ? codeScanner : undefined}
+                        frameProcessor={!showCodeScanner && cameraInitialized ? frameProcessor : undefined}
+                        frameProcessorFps={FRAME_PROCESSOR_FPS}
+                        onInitialized={handleCameraInitialized}
+                        onError={handleCameraError}
+                        enableZoomGesture={true}
+                        exposure={!showCodeScanner ? 0.5 : 0}
+                        pixelFormat="yuv"
+                        preset="high"
+                    />
+                ) : (
+                    renderCameraPlaceholder()
+                )}
+
+                {/* Face detection status text */}
+                {!showCodeScanner && shouldRenderCamera && (
+                    <View style={styles.faceDetectionStatus}>
+                        {faces.length === 0 && (
+                            <Text style={styles.faceDetectionText}>
+                                Position your face in the frame
+                            </Text>
+                        )}
+                        {faces.length > 1 && (
+                            <Text style={[styles.faceDetectionText, styles.multipleFacesText]}>
+                                Multiple faces detected. Please ensure only one person is in the frame.
+                            </Text>
+                        )}
+                        {singleFaceDetected && !captured.current && (
+                            <Text style={[styles.faceDetectionText, styles.singleFaceText]}>
+                                Face detected. Hold still...
+                            </Text>
+                        )}
+                        {captured.current && (
+                            <Text style={[styles.faceDetectionText, styles.capturingText]}>
+                                Capturing...
+                            </Text>
+                        )}
+                    </View>
+                )}
+
+                {/* Controls */}
+                <View style={styles.cameraControls}>
+                    {onToggleCamera && currentStep === 'Identity Verification' && shouldRenderCamera && (
+                        <TouchableOpacity
+                            style={[
+                                styles.flipButton,
+                                (isLoading || captured.current) && styles.flipButtonDisabled,
+                            ]}
+                            onPress={onToggleCamera}
+                            disabled={isLoading || captured.current}
+                            accessibilityLabel="Flip camera"
+                        >
+                            <Icon name="flip-camera-ios" size={28} color={COLORS.light} />
+                        </TouchableOpacity>
+                    )}
+                </View>                
+            </View>
+        );
+    }
+);
+
+// Add display name for better debugging
+CaptureImageWithoutEdit.displayName = 'CaptureImageWithoutEdit';
+
+const styles = StyleSheet.create({
+    cameraContainer: {
+        flex: 1,
+        width: '100%',
+        borderRadius: 12,
+        overflow: 'hidden',
+        backgroundColor: COLORS.dark,
+        minHeight: 300,
+    },
+    camera: {
+        flex: 1,
+        width: '100%',
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    errorText: {
+        color: COLORS.error,
+        fontSize: 16,
+        textAlign: 'center',
+        marginVertical: 16,
+    },
+    retryButton: {
+        backgroundColor: COLORS.primary,
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        borderRadius: 8,
+    },
+    retryButtonText: {
+        color: COLORS.light,
+        fontWeight: 'bold',
+    },
+    placeholderText: {
+        color: COLORS.light,
+        fontSize: 16,
+        textAlign: 'center',
+        opacity: 0.8,
+        padding: 20,
+    },
+    cameraControls: {
+        position: 'absolute',
+        bottom: 30,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    flipButton: {
+        position: 'absolute',
+        right: 30,
+        bottom: 40,
+        width: 55,
+        height: 55,
+        borderRadius: 27.5,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOpacity: 0.3,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 5,
+        elevation: 6,
+    },
+    flipButtonDisabled: {
+        opacity: 0.5,
+    },
+    faceDetectionStatus: {
+        position: 'absolute',
+        top: 40,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    },
+    faceDetectionText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 8,
+        textAlign: 'center',
+        marginHorizontal: 20,
+    },
+    multipleFacesText: {
+        backgroundColor: 'rgba(255,0,0,0.7)',
+    },
+    singleFaceText: {
+        backgroundColor: 'rgba(0,255,0,0.7)',
+    },
+    capturingText: {
+        backgroundColor: 'rgba(0,100,255,0.7)',
+    },
+});
+
+export default CaptureImageWithoutEdit;

package/src/components/CountdownTimer.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View, Text, Animated, StyleSheet } from 'react-native';
 import { COLORS } from '../utils/constants';
-import { styles } from './styles';
 
 export const CountdownTimer = ({ duration, currentTime }) => {
   const progress = React.useRef(new Animated.Value(1)).current;
@@ -21,22 +20,54 @@ export const CountdownTimer = ({ duration, currentTime }) => {
   });
 
   return (
-    <View style={styles.timerContainer}>
-      <View style={styles.timerCircle}>
-        <Animated.View style={styles.timerProgressContainer}>
+    <View style={{
+      marginTop: 20,
+      alignItems: 'center',
+    }}>
+      <View style={{
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+      }}>
+        <Animated.View style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+        }}>
           <Animated.View
-            style={[
-              styles.timerProgress,
+            style={
               {
                 strokeDashoffset,
                 transform: [{ rotate: '-90deg' }],
+                width: 76,
+                height: 76,
+                borderRadius: 38,
+                borderWidth: 3,
+                borderColor: COLORS.light,
+                borderLeftColor: 'transparent',
+                borderBottomColor: 'transparent',
               }
-            ]}
+            }
           />
         </Animated.View>
-        <Text style={styles.timerText}>{currentTime}s</Text>
+        <Text style={{
+          fontSize: 20,
+          fontWeight: '700',
+          color: COLORS.light,
+          fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
+        }}>{currentTime}s</Text>
       </View>
-      <Text style={styles.timerLabel}>Remaining</Text>
+      <Text style={{
+        fontSize: 14,
+        color: COLORS.light,
+        marginTop: 5,
+        opacity: 0.8,
+        fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+      }}>Remaining</Text>
     </View>
   );
 };