react-native-biometric-verifier 0.0.1

package/README.md

@@ -0,0 +1,20 @@
+# React Native Biometric Verifier
+
+A comprehensive biometric verification module for React Native that combines face recognition and QR code scanning with location verification.
+
+## Features
+
+- Face recognition verification
+- QR code scanning
+- Location verification
+- Animated UI with state indicators
+- Countdown timer
+- Customizable notification system
+- Comprehensive error handling
+
+## Installation
+
+```bash
+npm install react-native-biometric-verifier
+# or
+yarn add react-native-biometric-verifier

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-native-biometric-verifier",
+  "version": "0.0.1",
+  "description": "A React Native module for biometric verification with face recognition and QR code scanning",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "biometric",
+    "verification",
+    "face-recognition",
+    "qr-code"
+  ],
+  "author": "JESCON",
+  "license": "MIT",
+  "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"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "react-native": "^0.69.0"
+  }
+}

package/src/components/CountdownTimer.js

@@ -0,0 +1,42 @@
+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;
+
+  React.useEffect(() => {
+    Animated.timing(progress, {
+      toValue: currentTime / duration,
+      duration: 1000,
+      useNativeDriver: false,
+    }).start();
+  }, [currentTime, duration, progress]);
+
+  const circumference = 2 * Math.PI * 40;
+  const strokeDashoffset = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [circumference, 0],
+  });
+
+  return (
+    <View style={styles.timerContainer}>
+      <View style={styles.timerCircle}>
+        <Animated.View style={styles.timerProgressContainer}>
+          <Animated.View
+            style={[
+              styles.timerProgress,
+              {
+                strokeDashoffset,
+                transform: [{ rotate: '-90deg' }],
+              }
+            ]}
+          />
+        </Animated.View>
+        <Text style={styles.timerText}>{currentTime}s</Text>
+      </View>
+      <Text style={styles.timerLabel}>Remaining</Text>
+    </View>
+  );
+};

package/src/components/EmployeeCard.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { View, Text, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import PropTypes from 'prop-types';
+import { COLORS ,IMAGE_URL} from '../utils/constants';
+import { styles } from './styles';
+
+export const EmployeeCard = ({ employeeData }) => {
+  const [imageError, setImageError] = useState(false);
+
+  if (!employeeData || typeof employeeData !== 'object') {
+    console.warn('EmployeeCard: Invalid or missing employeeData');
+    return null;
+  }
+
+  const { employeename, employeeid, imageurl } = employeeData;
+
+  const employeeName = employeename || 'Unknown Employee';
+  const employeeId = employeeid || 'N/A';
+  const imageSource = !imageError && imageurl
+    ? { uri: `${IMAGE_URL}${imageurl}` }
+    : require('../Asset/images/camera.png'); // Add a local fallback image in assets
+
+  return (
+    <View style={styles.employeeCard}>
+      {/* Employee Image */}
+      <View style={styles.employeeImageContainer}>
+        <Image
+          source={imageSource}
+          style={styles.employeeImage}
+          resizeMode="cover"
+          onError={() => {
+            console.error(`Error loading image for employee: ${employeeName}`);
+            setImageError(true);
+          }}
+        />
+        <View style={styles.employeeImageOverlay} />
+      </View>
+
+      {/* Employee Info */}
+      <Text style={styles.empName}>{employeeName}</Text>
+      <Text style={styles.empId}>Employee ID: {employeeId}</Text>
+
+      {/* Verified Badge */}
+      <View style={styles.employeeDetails}>
+        <View style={styles.detailItem}>
+          <Icon name="verified-user" size={16} color={COLORS.success} />
+          <Text style={styles.detailText}>Identity Verified</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+EmployeeCard.propTypes = {
+  employeeData: PropTypes.shape({
+    employeename: PropTypes.string,
+    employeeid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    imageurl: PropTypes.string,
+  }),
+};

package/src/components/Notification.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Animated, Text } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import PropTypes from 'prop-types';
+import { COLORS } from '../utils/constants';
+import { styles } from './styles';
+
+export const Notification = ({ notification, fadeAnim, slideAnim }) => {
+  // Defensive check for null or malformed props
+  if (
+    !notification ||
+    typeof notification !== 'object' ||
+    !notification.visible
+  ) {
+    return null;
+  }
+
+  const { type = 'info', message = '' } = notification;
+
+  // 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 },
+  };
+
+  const { name: iconName, color: iconColor } = iconMap[type] || iconMap.info;
+
+  return (
+    <Animated.View
+      style={[
+        styles.notificationBox,
+        styles[type] || {}, // Prevent undefined style
+        {
+          opacity: fadeAnim instanceof Animated.Value ? fadeAnim : 1,
+          transform: [
+            {
+              translateY: slideAnim instanceof Animated.Value ? slideAnim : 0,
+            },
+          ],
+        },
+      ]}
+    >
+      <Icon
+        name={iconName}
+        size={20}
+        color={iconColor}
+        style={styles.notificationIcon}
+      />
+      <Text style={styles.notificationText}>{message}</Text>
+    </Animated.View>
+  );
+};
+
+Notification.propTypes = {
+  notification: PropTypes.shape({
+    visible: PropTypes.bool.isRequired,
+    type: PropTypes.oneOf(['success', 'error', 'info']),
+    message: PropTypes.string,
+  }),
+  fadeAnim: PropTypes.any, // Animated.Value expected
+  slideAnim: PropTypes.any, // Animated.Value expected
+};

package/src/components/StateIndicator.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, ActivityIndicator, Easing } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { ANIMATION_STATES, COLORS } from '../utils/constants';
+import { styles } from './styles';
+
+export const StateIndicator = ({ state, size = 100 }) => {
+  const spinValue = useRef(new Animated.Value(0)).current;
+  const pulseValue = useRef(new Animated.Value(1)).current;
+  const spinAnimation = useRef(null);
+  const pulseAnimation = useRef(null);
+
+  useEffect(() => {
+    // Stop ongoing animations when state changes
+    spinValue.stopAnimation();
+    pulseValue.stopAnimation();
+
+    if (
+      state === ANIMATION_STATES.PROCESSING ||
+      state === ANIMATION_STATES.FACE_SCAN ||
+      state === ANIMATION_STATES.QR_SCAN
+    ) {
+      spinAnimation.current = Animated.loop(
+        Animated.timing(spinValue, {
+          toValue: 1,
+          duration: 1500,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      );
+      spinAnimation.current.start();
+    } 
+    else if (
+      state === ANIMATION_STATES.SUCCESS || 
+      state === ANIMATION_STATES.ERROR
+    ) {
+      pulseAnimation.current = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseValue, {
+            toValue: 1.1,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseValue, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: true,
+          }),
+        ]),
+        { iterations: 2 }
+      );
+      pulseAnimation.current.start();
+    } 
+    else {
+      spinValue.setValue(0);
+      pulseValue.setValue(1);
+    }
+  }, [state, spinValue, pulseValue]);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const getIcon = () => {
+    switch (state) {
+      case ANIMATION_STATES.FACE_SCAN:
+        return <Icon name="face" size={size * 0.5} color={COLORS.primary} />;
+      case ANIMATION_STATES.QR_SCAN:
+        return <Icon name="qr-code-scanner" size={size * 0.5} color={COLORS.primary} />;
+      case ANIMATION_STATES.PROCESSING:
+        return <Icon name="settings" size={size * 0.5} color={COLORS.info} />;
+      case ANIMATION_STATES.SUCCESS:
+        return <Icon name="check-circle" size={size * 0.5} color={COLORS.success} />;
+      case ANIMATION_STATES.ERROR:
+        return <Icon name="error" size={size * 0.5} color={COLORS.error} />;
+      default:
+        return <Icon name="hourglass-empty" size={size * 0.5} color={COLORS.gray} />;
+    }
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.indicatorContainer,
+        {
+          width: size,
+          height: size,
+          transform: [
+            { scale: pulseValue },
+            ...(state === ANIMATION_STATES.PROCESSING ||
+              state === ANIMATION_STATES.FACE_SCAN ||
+              state === ANIMATION_STATES.QR_SCAN
+              ? [{ rotate: spin }]
+              : []),
+          ],
+        },
+      ]}
+    >
+      {(state === ANIMATION_STATES.PROCESSING ||
+        state === ANIMATION_STATES.FACE_SCAN ||
+        state === ANIMATION_STATES.QR_SCAN) ? (
+        <ActivityIndicator
+          size="large"
+          color={state === ANIMATION_STATES.PROCESSING ? COLORS.info : COLORS.primary}
+        />
+      ) : (
+        getIcon()
+      )}
+    </Animated.View>
+  );
+};

package/src/components/styles.js

@@ -0,0 +1,182 @@
+import { StyleSheet, Platform } from 'react-native';
+import { COLORS } from '../utils/constants';
+
+export const styles = StyleSheet.create({
+  modalBg: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  close: {
+    position: 'absolute',
+    top: 20,
+    right: 20,
+    zIndex: 10,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: 20,
+    padding: 5,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: '700',
+    color: COLORS.light,
+    marginBottom: 5,
+    textAlign: 'center',
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+  subTitle: {
+    fontSize: 18,
+    color: COLORS.light,
+    marginBottom: 25,
+    fontWeight: '600',
+    textAlign: 'center',
+    opacity: 0.9,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
+  },
+  indicatorContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 25,
+  },
+  employeeCard: {
+    alignItems: 'center',
+    marginVertical: 20,
+    width: '100%',
+    padding: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  employeeImageContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    borderWidth: 3,
+    borderColor: COLORS.primary,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  employeeImage: {
+    width: '100%',
+    height: '100%',
+  },
+  employeeImageOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(108, 99, 255, 0.1)',
+  },
+  empName: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginTop: 15,
+    color: COLORS.dark,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
+  },
+  empId: {
+    fontSize: 15,
+    color: COLORS.gray,
+    marginTop: 5,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+  employeeDetails: {
+    flexDirection: 'row',
+    marginTop: 15,
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  detailItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 8,
+    marginVertical: 4,
+  },
+  detailText: {
+    fontSize: 13,
+    color: COLORS.gray,
+    marginLeft: 5,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+  notificationBox: {
+    padding: 15,
+    borderRadius: 12,
+    marginVertical: 10,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  info: {
+    backgroundColor: 'rgba(33, 150, 243, 0.15)',
+    borderLeftWidth: 4,
+    borderLeftColor: COLORS.light,
+  },
+  success: {
+    backgroundColor: 'rgba(76, 175, 80, 0.15)',
+    borderLeftWidth: 4,
+    borderLeftColor: COLORS.success,
+  },
+  error: {
+    backgroundColor: 'rgba(244, 67, 54, 0.15)',
+    borderLeftWidth: 4,
+    borderLeftColor: COLORS.error,
+  },
+  notificationIcon: {
+    marginRight: 10,
+  },
+  notificationText: {
+    fontSize: 14,
+    color: COLORS.light,
+    fontWeight: '500',
+    flex: 1,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+  timerContainer: {
+    marginTop: 20,
+    alignItems: 'center',
+  },
+  timerCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  timerProgressContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  timerProgress: {
+    width: 76,
+    height: 76,
+    borderRadius: 38,
+    borderWidth: 3,
+    borderColor: COLORS.light,
+    borderLeftColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  timerText: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: COLORS.light,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
+  },
+  timerLabel: {
+    fontSize: 14,
+    color: COLORS.light,
+    marginTop: 5,
+    opacity: 0.8,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+  },
+});