react-native-biometric-verifier 0.0.10 → 0.0.11

package/package.json

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

package/src/components/Loader.js

@@ -1,58 +1,113 @@
-import {
-  StyleSheet,
-  Dimensions,
-  View,
-  Modal,
-} from "react-native";
-import { normalize } from "react-native-elements";
-import FastImage from "react-native-fast-image";
-
-export default function Loader({ visible = true,source }) {
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { ANIMATION_STATES, COLORS } from '../utils/constants';
+import { styles } from './styles';
+import FastImage from 'react-native-fast-image';
+
+export const Loader = ({ state, source, isLoading = false }) => {
+  const spinValue = useRef(new Animated.Value(0)).current;
+  const pulseValue = useRef(new Animated.Value(1)).current;
+  const spinAnimation = useRef(null);
+  const pulseAnimation = useRef(null);
+
+  const size = 120; // Define the size constant
+
+  useEffect(() => {
+    // Stop ongoing animations when state changes
+    spinAnimation.current?.stop();
+    pulseAnimation.current?.stop();
+
+    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);
+    }
+
+    return () => {
+      spinAnimation.current?.stop();
+      pulseAnimation.current?.stop();
+    };
+  }, [state, spinValue, pulseValue]);
+
+  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 (
-    <Modal
-      animationType="none"
-      transparent={true}
-      visible={visible}
-      onRequestClose={() => {}}
-    >
-      <View style={styles.container}>
-        <View style={styles.loaderBox}>
+    <View style={styles.indicatorWrapper}>
+      <Animated.View
+        style={[
+          styles.indicatorContainer,
+          {
+            width: size,
+            height: size,
+            transform: [
+              { scale: pulseValue },
+            ],
+          },
+        ]}
+      >
+        {isLoading && source ? (
           <FastImage
-            style={styles.icon}
+            style={[styles.icon, { width: size * 0.8, height: size * 0.8 }]}
             source={source}
+            resizeMode={FastImage.resizeMode.contain}
           />
-        </View>
-      </View>
-    </Modal>
+        ) : (
+          getIcon()
+        )}
+      </Animated.View>
+    </View>
   );
-}
-
-const { width, height } = Dimensions.get("window");
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: "center",
-    alignItems: "center",
-    height,
-    width,
-    backgroundColor: "rgba(0,0,0,0.3)", // semi-transparent backdrop
-  },
-  loaderBox: {
-    borderRadius: normalize(20),
-    padding: 10,
-    backgroundColor: "white",
-    borderWidth: 1,
-    borderColor: "lightblue",
-    elevation: 5, // shadow on Android
-    shadowColor: "#000", // shadow on iOS
-    shadowOpacity: 0.2,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-  },
-  icon: {
-    height: normalize(70),
-    width: normalize(70),
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
+};
+
+export default Loader;

package/src/components/styles.js

@@ -179,4 +179,22 @@ export const styles = StyleSheet.create({
     opacity: 0.8,
     fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
   },
+  capturedImageContainer: {
+  marginVertical: 15,
+  alignItems: 'center',
+  justifyContent: 'center',
+},
+capturedImage: {
+  width: 120,
+  height: 120,
+  borderRadius: 10,
+  borderWidth: 2,
+  borderColor: COLORS.primary,
+},
+capturedImageText: {
+  marginTop: 8,
+  fontSize: 14,
+  color: COLORS.light,
+  textAlign: 'center',
+},
 });

package/src/index.js

@@ -28,7 +28,6 @@ import Loader from "./components/Loader";
 import { CountdownTimer } from "./components/CountdownTimer";
 import { EmployeeCard } from "./components/EmployeeCard";
 import { Notification } from "./components/Notification";
-import { StateIndicator } from "./components/StateIndicator";
 import { styles } from "./components/styles";
 import { useNavigation } from "@react-navigation/native";
 import networkServiceCall from "./utils/NetworkServiceCall";
@@ -342,8 +341,6 @@ const BiometricVerificationModal = React.memo(
               <Text style={styles.title}>Biometric Verification</Text>
               <Text style={styles.subTitle}>{state.currentStep}</Text>
 
-              <StateIndicator state={state.animationState} size={120} />
-
               {state.employeeData && (
                 <EmployeeCard
                   employeeData={state.employeeData}
@@ -361,8 +358,12 @@ const BiometricVerificationModal = React.memo(
                 duration={COUNTDOWN_DURATION}
                 currentTime={countdown}
               />
-
-              {loaderSource && <Loader source={loaderSource} />}
+              
+              <Loader 
+                state={state.animationState} 
+                source={loaderSource}
+                isLoading={state.isLoading}
+              />
             </View>
           </Modal>
         )}
@@ -371,4 +372,4 @@ const BiometricVerificationModal = React.memo(
   }
 );
 
-export default BiometricVerificationModal;
+export default BiometricVerificationModal;

package/src/components/StateIndicator.js

@@ -1,109 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, 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) ? (
-        null
-      ) : (
-        getIcon()
-      )}
-    </Animated.View>
-  );
-};