@hexar/biometric-identity-sdk-react-native 1.8.0 → 1.10.0

package/dist/components/ProfilePictureCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfilePictureCapture.d.ts","sourceRoot":"","sources":["../../src/components/ProfilePictureCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,cAAc,EAAsB,MAAM,oCAAoC,CAAC;AAGzJ,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,8BAA8B,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA8VtE,CAAC;AAsEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ProfilePictureCapture.d.ts","sourceRoot":"","sources":["../../src/components/ProfilePictureCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAYxE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,cAAc,EAAsB,MAAM,oCAAoC,CAAC;AAGzJ,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,8BAA8B,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAyYtE,CAAC;AA4EF,eAAe,qBAAqB,CAAC"}

package/dist/components/ProfilePictureCapture.js

@@ -46,6 +46,7 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
     const [isValidating, setIsValidating] = (0, react_1.useState)(false);
     const [currentChallenges, setCurrentChallenges] = (0, react_1.useState)([]);
     const [isLoadingChallenges, setIsLoadingChallenges] = (0, react_1.useState)(false);
+    const [loadingTimedOut, setLoadingTimedOut] = (0, react_1.useState)(false);
     const animatedProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const [displayProgress, setDisplayProgress] = (0, react_1.useState)(0);
     const animationRef = (0, react_1.useRef)(null);
@@ -58,6 +59,19 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
             (0, biometric_identity_sdk_core_1.setLanguage)(language);
         }
     }, [language]);
+    // 15-second timeout on initial loading (challenge fetch / SDK init)
+    (0, react_1.useEffect)(() => {
+        const isLoading = !isInitialized || (isUsingBackend && isLoadingChallenges);
+        if (isLoading) {
+            const timer = setTimeout(() => {
+                setLoadingTimedOut(true);
+            }, 15000);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setLoadingTimedOut(false);
+        }
+    }, [isInitialized, isUsingBackend, isLoadingChallenges]);
     (0, react_1.useEffect)(() => {
         if (isInitialized && isUsingBackend) {
             const loadChallenges = async () => {
@@ -151,10 +165,10 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
             hasStartedAnimation.current = true;
             animatedProgress.setValue(0);
             setDisplayProgress(0);
-            // Start animation to 90% over 60 seconds
+            // Start animation to 90% over 25 seconds
             animationRef.current = react_native_1.Animated.timing(animatedProgress, {
                 toValue: 90,
-                duration: 60000, // 60 seconds
+                duration: 25000, // 25 seconds
                 useNativeDriver: false,
             });
             animationRef.current.start();
@@ -284,6 +298,7 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
                 react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#4f46e5' }),
                 react_1.default.createElement(react_native_1.Text, { style: [styles.progressTitle, { color: theme?.textColor || '#1e1b4b' }] }, strings.validation.title || strings.liveness.processing || strings.validation.checkingLiveness || 'Validating Profile Picture'),
                 react_1.default.createElement(react_native_1.Text, { style: [styles.progressStatusText, { color: theme?.secondaryTextColor || '#64748b' }] }, strings.validation.validatingFace || strings.liveness.processing || 'Validando rostro...'),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.progressDoNotLockText, { color: theme?.secondaryTextColor || '#64748b' }] }, strings.validation.doNotLockScreen || 'No bloquees la pantalla'),
                 react_1.default.createElement(react_native_1.View, { style: styles.progressBarContainer },
                     react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
                         react_1.default.createElement(react_native_1.Animated.View, { style: [
@@ -300,6 +315,15 @@ const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language,
     }
     // Wait for initialization and challenge loading before showing guide or VideoRecorder
     if (!isInitialized || (isUsingBackend && isLoadingChallenges)) {
+        if (loadingTimedOut) {
+            return (react_1.default.createElement(react_native_1.SafeAreaView, { style: [styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }] },
+                react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
+                    react_1.default.createElement(react_native_1.Text, { style: { fontSize: 48, marginBottom: 16 } }, "\u23F3"),
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.loadingText, { color: theme?.textColor || '#1e1b4b', fontSize: 20, fontWeight: 'bold' }] }, strings.errors.systemBusy),
+                    react_1.default.createElement(react_native_1.Text, { style: { fontSize: 15, color: theme?.secondaryTextColor || '#64748b', textAlign: 'center', marginTop: 12, paddingHorizontal: 24, lineHeight: 22 } }, strings.errors.systemBusyMessage),
+                    onCancel && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: { backgroundColor: theme?.primaryColor || '#4f46e5', paddingVertical: 14, paddingHorizontal: 32, borderRadius: 12, marginTop: 32 }, onPress: onCancel },
+                        react_1.default.createElement(react_native_1.Text, { style: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' } }, strings.common?.back || 'Go back'))))));
+        }
         return (react_1.default.createElement(react_native_1.SafeAreaView, { style: [styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }] },
             react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
                 react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#4f46e5' }),
@@ -348,6 +372,12 @@ const styles = react_native_1.StyleSheet.create({
     },
     progressStatusText: {
         fontSize: 16,
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    progressDoNotLockText: {
+        fontSize: 14,
+        fontWeight: '600',
         marginBottom: 32,
         textAlign: 'center',
     },

package/dist/components/ValidationProgress.js

@@ -55,10 +55,10 @@ const ValidationProgress = ({ progress, theme, language = 'en', }) => {
         // Start animation from 0 to 90% over 60 seconds (1 minute) - only once
         if (!hasStartedAnimation.current) {
             hasStartedAnimation.current = true;
-            // Start animation to 90% over 70 seconds, regardless of backend progress
+            // Start animation to 90% over 35 seconds, regardless of backend progress
             animationRef.current = react_native_1.Animated.timing(animatedProgress, {
                 toValue: 90,
-                duration: 70000, // 70 seconds
+                duration: 35000, // 35 seconds
                 useNativeDriver: false,
             });
             animationRef.current.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "@hexar/biometric-identity-sdk-core": ">=1.4.0",
+    "@hexar/biometric-identity-sdk-core": ">=1.7.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-permissions": ">=4.0.0",

package/src/components/ProfilePictureCapture.tsx

@@ -6,6 +6,7 @@ import {
   ActivityIndicator,
   SafeAreaView,
   Animated,
+  TouchableOpacity,
 } from 'react-native';
 import { VideoRecorder, VideoRecordingResult } from './VideoRecorder';
 import { FacePositioningGuide } from './FacePositioningGuide';
@@ -47,6 +48,7 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
   const [isValidating, setIsValidating] = useState(false);
   const [currentChallenges, setCurrentChallenges] = useState<any[]>([]);
   const [isLoadingChallenges, setIsLoadingChallenges] = useState(false);
+  const [loadingTimedOut, setLoadingTimedOut] = useState(false);
   const animatedProgress = useRef(new Animated.Value(0)).current;
   const [displayProgress, setDisplayProgress] = useState(0);
   const animationRef = useRef<Animated.CompositeAnimation | null>(null);
@@ -62,6 +64,19 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
     }
   }, [language]);
 
+  // 15-second timeout on initial loading (challenge fetch / SDK init)
+  useEffect(() => {
+    const isLoading = !isInitialized || (isUsingBackend && isLoadingChallenges);
+    if (isLoading) {
+      const timer = setTimeout(() => {
+        setLoadingTimedOut(true);
+      }, 15000);
+      return () => clearTimeout(timer);
+    } else {
+      setLoadingTimedOut(false);
+    }
+  }, [isInitialized, isUsingBackend, isLoadingChallenges]);
+
   useEffect(() => {
     if (isInitialized && isUsingBackend) {
       const loadChallenges = async () => {
@@ -163,10 +178,10 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
       animatedProgress.setValue(0);
       setDisplayProgress(0);
       
-      // Start animation to 90% over 60 seconds
+      // Start animation to 90% over 25 seconds
       animationRef.current = Animated.timing(animatedProgress, {
         toValue: 90,
-        duration: 60000, // 60 seconds
+        duration: 25000, // 25 seconds
         useNativeDriver: false,
       });
       
@@ -315,6 +330,10 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
             {(strings.validation as any).validatingFace || strings.liveness.processing || 'Validando rostro...'}
           </Text>
 
+          <Text style={[styles.progressDoNotLockText, { color: theme?.secondaryTextColor || '#64748b' }]}>
+            {strings.validation.doNotLockScreen || 'No bloquees la pantalla'}
+          </Text>
+
           {/* Progress Bar */}
           <View style={styles.progressBarContainer}>
             <View style={styles.progressBar}>
@@ -343,6 +362,31 @@ export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
 
   // Wait for initialization and challenge loading before showing guide or VideoRecorder
   if (!isInitialized || (isUsingBackend && isLoadingChallenges)) {
+    if (loadingTimedOut) {
+      return (
+        <SafeAreaView style={[styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }]}>
+          <View style={styles.loadingContainer}>
+            <Text style={{ fontSize: 48, marginBottom: 16 }}>⏳</Text>
+            <Text style={[styles.loadingText, { color: theme?.textColor || '#1e1b4b', fontSize: 20, fontWeight: 'bold' }]}>
+              {strings.errors.systemBusy}
+            </Text>
+            <Text style={{ fontSize: 15, color: theme?.secondaryTextColor || '#64748b', textAlign: 'center', marginTop: 12, paddingHorizontal: 24, lineHeight: 22 }}>
+              {strings.errors.systemBusyMessage}
+            </Text>
+            {onCancel && (
+              <TouchableOpacity
+                style={{ backgroundColor: theme?.primaryColor || '#4f46e5', paddingVertical: 14, paddingHorizontal: 32, borderRadius: 12, marginTop: 32 }}
+                onPress={onCancel}
+              >
+                <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: '600' }}>
+                  {strings.common?.back || 'Go back'}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </SafeAreaView>
+      );
+    }
     return (
       <SafeAreaView style={[styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }]}>
         <View style={styles.loadingContainer}>
@@ -417,6 +461,12 @@ const styles = StyleSheet.create({
   },
   progressStatusText: {
     fontSize: 16,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  progressDoNotLockText: {
+    fontSize: 14,
+    fontWeight: '600',
     marginBottom: 32,
     textAlign: 'center',
   },

package/src/components/ValidationProgress.tsx

@@ -40,10 +40,10 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
     if (!hasStartedAnimation.current) {
       hasStartedAnimation.current = true;
       
-      // Start animation to 90% over 70 seconds, regardless of backend progress
+      // Start animation to 90% over 35 seconds, regardless of backend progress
       animationRef.current = Animated.timing(animatedProgress, {
         toValue: 90,
-        duration: 70000, // 70 seconds
+        duration: 35000, // 35 seconds
         useNativeDriver: false,
       });