react-native-biometric-verifier 0.0.43 → 0.0.44

package/package.json

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

package/src/components/Notification.js

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

@@ -3,7 +3,8 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-  useMemo,
+  useImperativeHandle,
+  forwardRef,
 } from "react";
 import {
   View,
@@ -37,8 +38,21 @@ import { Notification } from "./components/Notification";
 import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
-const BiometricModal = React.memo(
-  ({ data, depkey, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl, navigation, MaxDistanceMeters = 50, duration = 100 }) => {
+const BiometricModal = forwardRef(({
+  data, 
+  depkey, 
+  qrscan = false, 
+  callback, 
+  apiurl, 
+  onclose, 
+  frameProcessorFps, 
+  livenessLevel, 
+  fileurl, 
+  imageurl, 
+  navigation, 
+  MaxDistanceMeters = 50, 
+  duration = 100 
+}, ref) => {
     // Custom hooks
     const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown(duration);
     const { requestLocationPermission, getCurrentLocation } = useGeolocation();
@@ -68,6 +82,14 @@ const BiometricModal = React.memo(
     const iconScaleAnim = useRef(new Animated.Value(1)).current;
     const iconOpacityAnim = useRef(new Animated.Value(0)).current;
 
+    // Expose methods to parent via ref
+    useImperativeHandle(ref, () => ({
+      reset: resetState,
+      start: startProcess,
+      close: resetState,
+      getStatus: () => state,
+    }));
+
     // Cleanup on unmount
     useEffect(() => {
       return () => {
@@ -145,7 +167,9 @@ const BiometricModal = React.memo(
 
     // Reset state helper
     const resetState = useCallback(() => {
-      onclose(false);
+      if (onclose) {
+        onclose(false);
+      }
 
       setState({
         isLoading: false,
@@ -165,7 +189,7 @@ const BiometricModal = React.memo(
         clearTimeout(resetTimeoutRef.current);
         resetTimeoutRef.current = null;
       }
-    }, [resetCountdown, clearNotification]);
+    }, [resetCountdown, clearNotification, onclose]);
 
     // Error handler
     const handleProcessError = useCallback(
@@ -196,7 +220,7 @@ const BiometricModal = React.memo(
     const handleCountdownFinish = useCallback(() => {
       handleProcessError("Time is up! Please try again.");
 
-      if (navigation.canGoBack()) {
+      if (navigation?.canGoBack?.()) {
         navigation.goBack();
       }
     }, [handleProcessError, navigation]);
@@ -322,7 +346,9 @@ const BiometricModal = React.memo(
         requestLocationPermission,
         updateState,
         validateApiUrl,
-        handleProcessError
+        handleProcessError,
+        depkey,
+        MaxDistanceMeters
       ]
     );
 
@@ -436,7 +462,8 @@ const BiometricModal = React.memo(
         validateApiUrl,
         safeCallback,
         handleProcessError,
-        state.qrData
+        state.qrData,
+        apiurl
       ]
     );
 
@@ -444,9 +471,9 @@ const BiometricModal = React.memo(
     const handleImageCapture = useCallback(
       async (capturedData) => {
         if (state.currentStep === "Location Verification") {
-          handleQRScanned(capturedData);
+          await handleQRScanned(capturedData);
         } else if (state.currentStep === "Identity Verification") {
-          uploadFaceScan(capturedData);
+          await uploadFaceScan(capturedData);
         }
       },
       [state.currentStep, uploadFaceScan, handleQRScanned]
@@ -478,7 +505,7 @@ const BiometricModal = React.memo(
       } else {
         startFaceRecognition();
       }
-    }, [handleCountdownFinish, handleStartQRScan, startCountdown, startFaceRecognition]);
+    }, [handleCountdownFinish, handleStartQRScan, startCountdown, startFaceRecognition, qrscan]);
 
     // Open modal when data is received
     useEffect(() => {
@@ -487,7 +514,7 @@ const BiometricModal = React.memo(
         setModalVisible(true);
         startProcess();
       }
-    }, [data, modalVisible, startProcess, qrscan]);
+    }, [data, modalVisible, startProcess]);
 
     // Determine if camera should be shown
     const shouldShowCamera =
@@ -577,6 +604,12 @@ const BiometricModal = React.memo(
   }
 );
 
+// Wrap with memo after forwardRef
+const MemoizedBiometricModal = React.memo(BiometricModal);
+
+// Add display name for debugging
+MemoizedBiometricModal.displayName = 'BiometricModal';
+
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
@@ -671,4 +704,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default BiometricModal;
+export default MemoizedBiometricModal;