react-native-biometric-verifier 0.0.12 → 0.0.13

package/src/components/Loader.js

@@ -1,113 +1,175 @@
-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 React, { useState, useEffect } from "react";
+import {
+  StyleSheet,
+  Dimensions,
+  View,
+  Modal,
+  Animated,
+  Easing,
+  Text
+} from "react-native";
 import FastImage from 'react-native-fast-image';
+import { normalize } from "react-native-elements";
 
-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
+export default function Loader({
+  visible = false,
+  overlayColor = 'rgba(0,0,0,0.4)',
+  loaderColor = 'lightblue',
+  size = 50,
+  gifSource = {uri:`http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
+  message = '',
+  messageStyle = {},
+  animationType = 'fade',
+  hasBackground = true,
+  borderRadius = 20,
+  shadow = true
+}) {
+  const [rotation] = useState(new Animated.Value(0));
+  const [pulse] = useState(new Animated.Value(1));
+  const [fade] = useState(new Animated.Value(0));
 
+  // Rotation animation
   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, {
+    if (!gifSource) { // Only animate if not using a GIF
+      Animated.loop(
+        Animated.timing(rotation, {
           toValue: 1,
           duration: 1500,
           easing: Easing.linear,
-          useNativeDriver: true,
+          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);
+      ).start();
     }
 
-    return () => {
-      spinAnimation.current?.stop();
-      pulseAnimation.current?.stop();
-    };
-  }, [state, spinValue, pulseValue]);
+    // Pulse animation
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1.1,
+          duration: 800,
+          useNativeDriver: true
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true
+        })
+      ])
+    ).start();
+
+    // Fade in animation
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true
+    }).start();
+  }, []);
 
-  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} />;
-    }
-  };
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+
+  const loaderContent = gifSource ? (
+    <FastImage
+      style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
+      source={gifSource}
+    />
+  ) : (
+    <Animated.View style={[
+      styles.defaultLoader, 
+      { 
+        borderColor: loaderColor,
+        transform: [{ rotate: spin }, { scale: pulse }],
+        width: normalize(size),
+        height: normalize(size),
+        borderWidth: normalize(size / 10)
+      }
+    ]}>
+      <View style={[
+        styles.innerCircle, 
+        { 
+          backgroundColor: loaderColor,
+          width: normalize(size / 2),
+          height: normalize(size / 2)
+        }
+      ]} />
+    </Animated.View>
+  );
 
   return (
-    <View style={styles.indicatorWrapper}>
-      <Animated.View
-        style={[
-          styles.indicatorContainer,
-          {
-            width: size,
-            height: size,
-            transform: [
-              { scale: pulseValue },
-            ],
-          },
-        ]}
-      >
-        {isLoading && source ? (
-          <FastImage
-            style={[styles.icon, { width: size * 0.8, height: size * 0.8 }]}
-            source={source}
-            resizeMode={FastImage.resizeMode.contain}
-          />
-        ) : (
-          getIcon()
-        )}
+    <Modal
+      animationType={animationType}
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => {}}
+    >
+      <Animated.View style={[
+        styles.modalContainer,
+        { 
+          backgroundColor: overlayColor,
+          opacity: fade
+        }
+      ]}>
+        <Animated.View style={[
+          styles.loaderContainer,
+          { 
+            backgroundColor: hasBackground ? 'white' : 'transparent',
+            borderRadius: normalize(borderRadius),
+            transform: [{ scale: pulse }],
+            ...(shadow && styles.shadowStyle)
+          }
+        ]}>
+          {console.log('loadersource--------------------',JSON.stringify(gifSource))}
+          {loaderContent}
+          {message ? (
+            <Text style={[styles.messageText, messageStyle]}>
+              {message}
+            </Text>
+          ) : null}
+        </Animated.View>
       </Animated.View>
-    </View>
+    </Modal>
   );
-};
+}
 
-export default Loader;
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loaderContainer: {
+    padding: normalize(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon_style: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  defaultLoader: {
+    borderRadius: normalize(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  innerCircle: {
+    borderRadius: normalize(100),
+  },
+  messageText: {
+    marginTop: normalize(15),
+    fontSize: normalize(14),
+    color: '#555',
+    textAlign: 'center'
+  },
+  shadowStyle: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  }
+});

package/src/components/Notification.js

@@ -1,21 +1,19 @@
 import React from 'react';
-import { Animated, Text } from 'react-native';
+import { Animated, Text, Platform } 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
-  ) {
+  // Defensive checks
+  if (!notification || typeof notification !== 'object') {
+    console.warn('Notification: Invalid or missing notification object');
     return null;
   }
 
-  const { type = 'info', message = '' } = notification;
+  const { visible, type = 'info', message = '' } = notification;
+
+  if (!visible) return null;
 
   // Icon and color mapping
   const iconMap = {
@@ -29,8 +27,20 @@ export const Notification = ({ notification, fadeAnim, slideAnim }) => {
   return (
     <Animated.View
       style={[
-        styles.notificationBox,
-        styles[type] || {}, // Prevent undefined style
+        {
+          padding: 15,
+          borderRadius: 12,
+          marginVertical: 10,
+          width: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: COLORS.dark, // Added for visibility
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
+          elevation: 2,
+        },
         {
           opacity: fadeAnim instanceof Animated.Value ? fadeAnim : 1,
           transform: [
@@ -45,9 +55,19 @@ export const Notification = ({ notification, fadeAnim, slideAnim }) => {
         name={iconName}
         size={20}
         color={iconColor}
-        style={styles.notificationIcon}
+        style={{ marginRight: 10 }}
       />
-      <Text style={styles.notificationText}>{message}</Text>
+      <Text
+        style={{
+          fontSize: 14,
+          color: COLORS.light,
+          fontWeight: '500',
+          flex: 1,
+          fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+        }}
+      >
+        {message || 'No message provided'}
+      </Text>
     </Animated.View>
   );
 };
@@ -58,6 +78,14 @@ Notification.propTypes = {
     type: PropTypes.oneOf(['success', 'error', 'info']),
     message: PropTypes.string,
   }),
-  fadeAnim: PropTypes.any, // Animated.Value expected
-  slideAnim: PropTypes.any, // Animated.Value expected
+  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/components/StepIcon.js

@@ -0,0 +1,71 @@
+// components/StepIcon.js
+import React from 'react';
+import { Animated } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../utils/constants';
+
+const StepIcon = ({ 
+  currentStep, 
+  animationState, 
+  scaleAnim, 
+  opacityAnim 
+}) => {
+  // Get appropriate icon for current step
+  const getStepIcon = () => {
+    switch (currentStep) {
+      case "Start":
+        return "play-arrow";
+      case "Identity Verification":
+        return animationState === "success" 
+          ? "check-circle" 
+          : "face";
+      case "Location Verification":
+        return animationState === "success" 
+          ? "check-circle" 
+          : "location-on";
+      default:
+        return "info";
+    }
+  };
+
+  // Get appropriate icon color for current state
+  const getIconColor = () => {
+    switch (animationState) {
+      case "success":
+        return COLORS.success;
+      case "error":
+        return COLORS.error;
+      default:
+        return COLORS.primary;
+    }
+  };
+
+  return (
+    <Animated.View 
+      style={[
+        styles.iconContainer,
+        {
+          transform: [{ scale: scaleAnim }],
+          opacity: opacityAnim
+        }
+      ]}
+    >
+      <Icon 
+        name={getStepIcon()} 
+        size={40} 
+        color={getIconColor()} 
+      />
+    </Animated.View>
+  );
+};
+
+const styles = {
+  iconContainer: {
+    marginRight: 15,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: 30,
+    padding: 10,
+  },
+};
+
+export default StepIcon;

package/src/components/StepIndicator.js

@@ -0,0 +1,91 @@
+// components/StepIndicator.js
+import React from 'react';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../utils/constants';
+
+const StepIndicator = ({ currentStep }) => {
+  return (
+    <View style={styles.statusContainer}>
+      <View style={styles.statusItem}>
+        <Icon 
+          name="face" 
+          size={20} 
+          color={
+            currentStep === "Identity Verification" || 
+            currentStep === "Location Verification" || 
+            currentStep === "Complete"
+              ? COLORS.primary 
+              : COLORS.light
+          } 
+          style={styles.statusIcon}
+        />
+        <Text style={[
+          styles.statusText,
+          (currentStep === "Identity Verification" || 
+           currentStep === "Location Verification" || 
+           currentStep === "Complete") && styles.statusTextActive
+        ]}>
+          Identity
+        </Text>
+      </View>
+      
+      <View style={styles.statusSeparator} />
+      
+      <View style={styles.statusItem}>
+        <Icon 
+          name="location-on" 
+          size={20} 
+          color={
+            currentStep === "Location Verification" || 
+            currentStep === "Complete"
+              ? COLORS.primary 
+              : COLORS.light
+          } 
+          style={styles.statusIcon}
+        />
+        <Text style={[
+          styles.statusText,
+          (currentStep === "Location Verification" || 
+           currentStep === "Complete") && styles.statusTextActive
+        ]}>
+          Location
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  statusContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+    paddingHorizontal: 20,
+  },
+  statusItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statusIcon: {
+    marginBottom: 5,
+  },
+  statusText: {
+    fontSize: 12,
+    color: COLORS.light,
+    opacity: 0.6,
+  },
+  statusTextActive: {
+    opacity: 1,
+    fontWeight: '600',
+  },
+  statusSeparator: {
+    width: 40,
+    height: 1,
+    backgroundColor: COLORS.light,
+    opacity: 0.3,
+    marginHorizontal: 15,
+  },
+});
+
+export default StepIndicator;

package/src/hooks/useNotifyMessage.js

@@ -18,6 +18,7 @@ export const useNotifyMessage = () => {
 
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const slideAnim = useRef(new Animated.Value(-20)).current;
+  const timeoutRef = useRef(null);
 
   // Styles for notification container based on type
   const getNotificationStyle = useCallback((type) => {
@@ -51,7 +52,25 @@ export const useNotifyMessage = () => {
     textAlign: 'center',
   }), []);
 
+  const clearNotification = useCallback(() => {
+    // Clear any pending timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    
+    // Reset animations
+    fadeAnim.setValue(0);
+    slideAnim.setValue(-20);
+    
+    // Hide notification
+    setNotification({ visible: false, message: '', type: 'info' });
+  }, [fadeAnim, slideAnim]);
+
   const showNotification = useCallback((message, type = 'info') => {
+    // Clear any existing notification first
+    clearNotification();
+
     setNotification({ visible: true, message, type });
 
     fadeAnim.setValue(0);
@@ -69,7 +88,8 @@ export const useNotifyMessage = () => {
         useNativeDriver: false,
       }),
     ]).start(() => {
-      setTimeout(() => {
+      // Store timeout reference so we can clear it later
+      timeoutRef.current = setTimeout(() => {
         Animated.parallel([
           Animated.timing(fadeAnim, {
             toValue: 0,
@@ -81,12 +101,13 @@ export const useNotifyMessage = () => {
             duration: 300,
             useNativeDriver: false,
           }),
-        ]).start(() =>
-          setNotification({ visible: false, message: '', type: 'info' })
-        );
+        ]).start(() => {
+          timeoutRef.current = null;
+          setNotification({ visible: false, message: '', type: 'info' });
+        });
       }, 3000);
     });
-  }, [fadeAnim, slideAnim]);
+  }, [fadeAnim, slideAnim, clearNotification]);
 
   const notifyMessage = useCallback(
     (msg, type = 'info') => {
@@ -125,7 +146,8 @@ export const useNotifyMessage = () => {
     fadeAnim,
     slideAnim,
     notifyMessage,
+    clearNotification,
     getNotificationStyle,
     notificationTextStyle,
   };
-};
+};