@hexar/biometric-identity-sdk-react-native 1.0.33 → 1.0.35

package/dist/components/ProfilePictureCapture.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ThemeConfig, SupportedLanguage, BiometricError } from '@hexar/biometric-identity-sdk-core';
+export interface ProfilePictureValidationResult {
+    isValid: boolean;
+    profilePicture: string;
+    livenessScore: number;
+    faceDetected: boolean;
+    warnings: string[];
+}
+export interface ProfilePictureCaptureProps {
+    onComplete: (result: ProfilePictureValidationResult) => void;
+    onError: (error: BiometricError) => void;
+    onCancel?: () => void;
+    theme?: ThemeConfig;
+    language?: SupportedLanguage;
+}
+export declare const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps>;
+export default ProfilePictureCapture;
+//# sourceMappingURL=ProfilePictureCapture.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePictureCapture.d.ts","sourceRoot":"","sources":["../../src/components/ProfilePictureCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAS7D,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,CAmKtE,CAAC;AAuCF,eAAe,qBAAqB,CAAC"}

package/dist/components/ProfilePictureCapture.js

@@ -0,0 +1,194 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfilePictureCapture = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const VideoRecorder_1 = require("./VideoRecorder");
+const biometric_identity_sdk_core_1 = require("@hexar/biometric-identity-sdk-core");
+const biometric_identity_sdk_core_2 = require("@hexar/biometric-identity-sdk-core");
+const ProfilePictureCapture = ({ onComplete, onError, onCancel, theme, language, }) => {
+    const [isValidating, setIsValidating] = (0, react_1.useState)(false);
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    if (language) {
+        (0, biometric_identity_sdk_core_1.setLanguage)(language);
+    }
+    const strings = (0, biometric_identity_sdk_core_1.getStrings)();
+    const validateWithBackend = (0, react_1.useCallback)(async (videoResult) => {
+        try {
+            const sdk = biometric_identity_sdk_core_2.BiometricIdentitySDK.getInstance();
+            if (!sdk.isUsingBackend()) {
+                throw new Error('Backend not available');
+            }
+            const sessionId = videoResult.sessionId;
+            if (!sessionId) {
+                throw new Error('Session ID not available');
+            }
+            const backendClient = sdk.backendClient;
+            const apiEndpoint = backendClient.config.apiEndpoint;
+            const apiKey = backendClient.config.apiKey;
+            const requestBody = {
+                session_id: sessionId,
+                video_frames: videoResult.frames,
+                video_duration_ms: videoResult.duration,
+                challenges_completed: videoResult.challengesCompleted || [],
+            };
+            biometric_identity_sdk_core_1.logger.info('Validating profile picture with backend', {
+                sessionId,
+                framesCount: videoResult.frames.length,
+                duration: videoResult.duration,
+            });
+            const response = await fetch(`${apiEndpoint}/profile/validate-face`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': apiKey,
+                },
+                body: JSON.stringify(requestBody),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.detail || `Backend validation failed: ${response.status}`);
+            }
+            const data = await response.json();
+            biometric_identity_sdk_core_1.logger.info('Profile picture validation result', {
+                isValid: data.is_valid,
+                livenessScore: data.liveness_score,
+                faceDetected: data.face_detected,
+            });
+            return {
+                isValid: data.is_valid,
+                profilePicture: data.profile_picture,
+                livenessScore: data.liveness_score,
+                faceDetected: data.face_detected,
+                warnings: data.warnings || [],
+            };
+        }
+        catch (error) {
+            biometric_identity_sdk_core_1.logger.error('Profile picture validation error', error);
+            throw error;
+        }
+    }, []);
+    const handleVideoComplete = (0, react_1.useCallback)(async (videoResult) => {
+        setIsValidating(true);
+        setValidationError(null);
+        try {
+            const result = await validateWithBackend(videoResult);
+            if (!result.isValid) {
+                setValidationError('La validación de liveness falló. Por favor, intenta nuevamente.');
+                setIsValidating(false);
+                return;
+            }
+            setIsValidating(false);
+            onComplete(result);
+        }
+        catch (error) {
+            setIsValidating(false);
+            let errorCode = biometric_identity_sdk_core_1.BiometricErrorCode.UNKNOWN_ERROR;
+            if (error.message && error.message.toLowerCase().includes('network')) {
+                errorCode = biometric_identity_sdk_core_1.BiometricErrorCode.NETWORK_ERROR;
+            }
+            else if (error.message && error.message.toLowerCase().includes('timeout')) {
+                errorCode = biometric_identity_sdk_core_1.BiometricErrorCode.VALIDATION_TIMEOUT;
+            }
+            else if (error.message && error.message.toLowerCase().includes('liveness')) {
+                errorCode = biometric_identity_sdk_core_1.BiometricErrorCode.LIVENESS_CHECK_FAILED;
+            }
+            const biometricError = {
+                name: 'BiometricError',
+                message: error.message || 'Error al validar la foto de perfil',
+                code: errorCode,
+            };
+            onError(biometricError);
+        }
+    }, [validateWithBackend, onComplete, onError]);
+    const handleVideoCancel = (0, react_1.useCallback)(() => {
+        if (onCancel) {
+            onCancel();
+        }
+    }, [onCancel]);
+    if (isValidating) {
+        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' }),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.loadingText, { color: theme?.textColor || '#1e1b4b' }] }, strings.liveness.processing || 'Validando foto de perfil...'),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.loadingSubtext, { color: theme?.secondaryTextColor || '#64748b' }] }, "Esto puede tardar unos segundos"))));
+    }
+    if (validationError) {
+        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.errorContainer },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.errorTitle, { color: theme?.errorColor || '#EF4444' }] }, "Error de validaci\u00F3n"),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.errorText, { color: theme?.textColor || '#1e1b4b' }] }, validationError))));
+    }
+    return (react_1.default.createElement(VideoRecorder_1.VideoRecorder, { theme: theme, language: language, duration: 8000, smartMode: true, onComplete: handleVideoComplete, onCancel: handleVideoCancel }));
+};
+exports.ProfilePictureCapture = ProfilePictureCapture;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    loadingText: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginTop: 24,
+    },
+    loadingSubtext: {
+        fontSize: 14,
+        marginTop: 8,
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    errorTitle: {
+        fontSize: 20,
+        fontWeight: '600',
+        marginBottom: 12,
+    },
+    errorText: {
+        fontSize: 16,
+        textAlign: 'center',
+        lineHeight: 24,
+    },
+});
+exports.default = exports.ProfilePictureCapture;

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8GhE,CAAC;AAqDF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqGhE,CAAC;AAqDF,eAAe,kBAAkB,CAAC"}

package/dist/components/ValidationProgress.js

@@ -45,38 +45,29 @@ const ValidationProgress = ({ progress, theme, language = 'en', }) => {
     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);
+    const hasStartedAnimation = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         if (language) {
             (0, biometric_identity_sdk_core_1.setLanguage)(language);
         }
     }, [language]);
     (0, react_1.useEffect)(() => {
-        // Start animation from 0 to 90% over 60 seconds (1 minute)
-        if (progress < 90) {
-            // If we have real progress from backend, use it; otherwise animate to 90% over 60s
-            if (progress > 0 && progress < 90) {
-                // Use actual progress
-                react_native_1.Animated.timing(animatedProgress, {
-                    toValue: progress,
-                    duration: 500,
-                    useNativeDriver: false,
-                }).start();
-            }
-            else if (progress === 0) {
-                // Start animation to 90% over 60 seconds
-                if (animationRef.current) {
-                    animationRef.current.stop();
-                }
-                animationRef.current = react_native_1.Animated.timing(animatedProgress, {
-                    toValue: 90,
-                    duration: 60000, // 60 seconds
-                    useNativeDriver: false,
-                });
-                animationRef.current.start();
-            }
+        // Start animation from 0 to 90% over 60 seconds (1 minute) - only once
+        if (!hasStartedAnimation.current) {
+            hasStartedAnimation.current = true;
+            // Start animation to 90% over 60 seconds, regardless of backend progress
+            animationRef.current = react_native_1.Animated.timing(animatedProgress, {
+                toValue: 90,
+                duration: 60000, // 60 seconds
+                useNativeDriver: false,
+            });
+            animationRef.current.start();
         }
-        else {
-            // If progress is 90% or more, animate to actual progress
+        // Only update to actual progress if it's 90% or more (validation complete)
+        if (progress >= 90) {
+            if (animationRef.current) {
+                animationRef.current.stop();
+            }
             react_native_1.Animated.timing(animatedProgress, {
                 toValue: progress,
                 duration: 500,
@@ -89,9 +80,6 @@ const ValidationProgress = ({ progress, theme, language = 'en', }) => {
         });
         return () => {
             animatedProgress.removeListener(listener);
-            if (animationRef.current) {
-                animationRef.current.stop();
-            }
         };
     }, [progress, animatedProgress]);
     const strings = (0, biometric_identity_sdk_core_1.getStrings)();

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { BiometricIdentityFlow } from './components/BiometricIdentityFlow';
 export { default } from './components/BiometricIdentityFlow';
 export { CameraCapture } from './components/CameraCapture';
 export { VideoRecorder } from './components/VideoRecorder';
+export { ProfilePictureCapture } from './components/ProfilePictureCapture';
+export type { ProfilePictureValidationResult } from './components/ProfilePictureCapture';
 export { ValidationProgress } from './components/ValidationProgress';
 export { ResultScreen } from './components/ResultScreen';
 export { ErrorScreen } from './components/ErrorScreen';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,8BAA8B,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,cAAc,oCAAoC,CAAC"}

package/dist/index.js

@@ -21,7 +21,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBiometricSDK = exports.InstructionsScreen = exports.ErrorScreen = exports.ResultScreen = exports.ValidationProgress = exports.VideoRecorder = exports.CameraCapture = exports.default = exports.BiometricIdentityFlow = void 0;
+exports.useBiometricSDK = exports.InstructionsScreen = exports.ErrorScreen = exports.ResultScreen = exports.ValidationProgress = exports.ProfilePictureCapture = exports.VideoRecorder = exports.CameraCapture = exports.default = exports.BiometricIdentityFlow = void 0;
 // Main component
 var BiometricIdentityFlow_1 = require("./components/BiometricIdentityFlow");
 Object.defineProperty(exports, "BiometricIdentityFlow", { enumerable: true, get: function () { return BiometricIdentityFlow_1.BiometricIdentityFlow; } });
@@ -32,6 +32,8 @@ var CameraCapture_1 = require("./components/CameraCapture");
 Object.defineProperty(exports, "CameraCapture", { enumerable: true, get: function () { return CameraCapture_1.CameraCapture; } });
 var VideoRecorder_1 = require("./components/VideoRecorder");
 Object.defineProperty(exports, "VideoRecorder", { enumerable: true, get: function () { return VideoRecorder_1.VideoRecorder; } });
+var ProfilePictureCapture_1 = require("./components/ProfilePictureCapture");
+Object.defineProperty(exports, "ProfilePictureCapture", { enumerable: true, get: function () { return ProfilePictureCapture_1.ProfilePictureCapture; } });
 var ValidationProgress_1 = require("./components/ValidationProgress");
 Object.defineProperty(exports, "ValidationProgress", { enumerable: true, get: function () { return ValidationProgress_1.ValidationProgress; } });
 var ResultScreen_1 = require("./components/ResultScreen");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ProfilePictureCapture.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  SafeAreaView,
+} from 'react-native';
+import { VideoRecorder, VideoRecordingResult } from './VideoRecorder';
+import { ThemeConfig, SupportedLanguage, getStrings, setLanguage, logger, BiometricError, BiometricErrorCode } from '@hexar/biometric-identity-sdk-core';
+import { BiometricIdentitySDK } from '@hexar/biometric-identity-sdk-core';
+
+export interface ProfilePictureValidationResult {
+  isValid: boolean;
+  profilePicture: string;
+  livenessScore: number;
+  faceDetected: boolean;
+  warnings: string[];
+}
+
+export interface ProfilePictureCaptureProps {
+  onComplete: (result: ProfilePictureValidationResult) => void;
+  onError: (error: BiometricError) => void;
+  onCancel?: () => void;
+  theme?: ThemeConfig;
+  language?: SupportedLanguage;
+}
+
+export const ProfilePictureCapture: React.FC<ProfilePictureCaptureProps> = ({
+  onComplete,
+  onError,
+  onCancel,
+  theme,
+  language,
+}) => {
+  const [isValidating, setIsValidating] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  if (language) {
+    setLanguage(language);
+  }
+  const strings = getStrings();
+
+  const validateWithBackend = useCallback(async (videoResult: VideoRecordingResult): Promise<ProfilePictureValidationResult> => {
+    try {
+      const sdk = BiometricIdentitySDK.getInstance();
+      
+      if (!sdk.isUsingBackend()) {
+        throw new Error('Backend not available');
+      }
+
+      const sessionId = videoResult.sessionId;
+      if (!sessionId) {
+        throw new Error('Session ID not available');
+      }
+
+      const backendClient = (sdk as any).backendClient;
+      const apiEndpoint = backendClient.config.apiEndpoint;
+      const apiKey = backendClient.config.apiKey;
+
+      const requestBody = {
+        session_id: sessionId,
+        video_frames: videoResult.frames,
+        video_duration_ms: videoResult.duration,
+        challenges_completed: videoResult.challengesCompleted || [],
+      };
+
+      logger.info('Validating profile picture with backend', {
+        sessionId,
+        framesCount: videoResult.frames.length,
+        duration: videoResult.duration,
+      });
+
+      const response = await fetch(`${apiEndpoint}/profile/validate-face`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': apiKey,
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.detail || `Backend validation failed: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      logger.info('Profile picture validation result', {
+        isValid: data.is_valid,
+        livenessScore: data.liveness_score,
+        faceDetected: data.face_detected,
+      });
+
+      return {
+        isValid: data.is_valid,
+        profilePicture: data.profile_picture,
+        livenessScore: data.liveness_score,
+        faceDetected: data.face_detected,
+        warnings: data.warnings || [],
+      };
+    } catch (error: any) {
+      logger.error('Profile picture validation error', error);
+      throw error;
+    }
+  }, []);
+
+  const handleVideoComplete = useCallback(async (videoResult: VideoRecordingResult) => {
+    setIsValidating(true);
+    setValidationError(null);
+
+    try {
+      const result = await validateWithBackend(videoResult);
+      
+      if (!result.isValid) {
+        setValidationError('La validación de liveness falló. Por favor, intenta nuevamente.');
+        setIsValidating(false);
+        return;
+      }
+
+      setIsValidating(false);
+      onComplete(result);
+    } catch (error: any) {
+      setIsValidating(false);
+      let errorCode = BiometricErrorCode.UNKNOWN_ERROR;
+      
+      if (error.message && error.message.toLowerCase().includes('network')) {
+        errorCode = BiometricErrorCode.NETWORK_ERROR;
+      } else if (error.message && error.message.toLowerCase().includes('timeout')) {
+        errorCode = BiometricErrorCode.VALIDATION_TIMEOUT;
+      } else if (error.message && error.message.toLowerCase().includes('liveness')) {
+        errorCode = BiometricErrorCode.LIVENESS_CHECK_FAILED;
+      }
+
+      const biometricError: BiometricError = {
+        name: 'BiometricError',
+        message: error.message || 'Error al validar la foto de perfil',
+        code: errorCode,
+      } as BiometricError;
+      onError(biometricError);
+    }
+  }, [validateWithBackend, onComplete, onError]);
+
+  const handleVideoCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+
+  if (isValidating) {
+    return (
+      <SafeAreaView style={[styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }]}>
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={theme?.primaryColor || '#4f46e5'} />
+          <Text style={[styles.loadingText, { color: theme?.textColor || '#1e1b4b' }]}>
+            {strings.liveness.processing || 'Validando foto de perfil...'}
+          </Text>
+          <Text style={[styles.loadingSubtext, { color: theme?.secondaryTextColor || '#64748b' }]}>
+            Esto puede tardar unos segundos
+          </Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  if (validationError) {
+    return (
+      <SafeAreaView style={[styles.container, { backgroundColor: theme?.backgroundColor || '#FFFFFF' }]}>
+        <View style={styles.errorContainer}>
+          <Text style={[styles.errorTitle, { color: theme?.errorColor || '#EF4444' }]}>
+            Error de validación
+          </Text>
+          <Text style={[styles.errorText, { color: theme?.textColor || '#1e1b4b' }]}>
+            {validationError}
+          </Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <VideoRecorder
+      theme={theme}
+      language={language}
+      duration={8000}
+      smartMode={true}
+      onComplete={handleVideoComplete}
+      onCancel={handleVideoCancel}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  loadingText: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginTop: 24,
+  },
+  loadingSubtext: {
+    fontSize: 14,
+    marginTop: 8,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  errorTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+});
+
+export default ProfilePictureCapture;

package/src/components/ValidationProgress.tsx

@@ -27,6 +27,7 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
   const animatedProgress = useRef(new Animated.Value(0)).current;
   const [displayProgress, setDisplayProgress] = useState(0);
   const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+  const hasStartedAnimation = useRef(false);
 
   useEffect(() => {
     if (language) {
@@ -35,32 +36,25 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
   }, [language]);
 
   useEffect(() => {
-    // Start animation from 0 to 90% over 60 seconds (1 minute)
-    if (progress < 90) {
-      // If we have real progress from backend, use it; otherwise animate to 90% over 60s
-      if (progress > 0 && progress < 90) {
-        // Use actual progress
-        Animated.timing(animatedProgress, {
-          toValue: progress,
-          duration: 500,
-          useNativeDriver: false,
-        }).start();
-      } else if (progress === 0) {
-        // Start animation to 90% over 60 seconds
-        if (animationRef.current) {
-          animationRef.current.stop();
-        }
-        
-        animationRef.current = Animated.timing(animatedProgress, {
-          toValue: 90,
-          duration: 60000, // 60 seconds
-          useNativeDriver: false,
-        });
-        
-        animationRef.current.start();
+    // Start animation from 0 to 90% over 60 seconds (1 minute) - only once
+    if (!hasStartedAnimation.current) {
+      hasStartedAnimation.current = true;
+      
+      // Start animation to 90% over 60 seconds, regardless of backend progress
+      animationRef.current = Animated.timing(animatedProgress, {
+        toValue: 90,
+        duration: 60000, // 60 seconds
+        useNativeDriver: false,
+      });
+      
+      animationRef.current.start();
+    }
+    
+    // Only update to actual progress if it's 90% or more (validation complete)
+    if (progress >= 90) {
+      if (animationRef.current) {
+        animationRef.current.stop();
       }
-    } else {
-      // If progress is 90% or more, animate to actual progress
       Animated.timing(animatedProgress, {
         toValue: progress,
         duration: 500,
@@ -75,9 +69,6 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
 
     return () => {
       animatedProgress.removeListener(listener);
-      if (animationRef.current) {
-        animationRef.current.stop();
-      }
     };
   }, [progress, animatedProgress]);
 

package/src/index.ts

@@ -10,6 +10,8 @@ export { default } from './components/BiometricIdentityFlow';
 // Individual components (for custom implementations)
 export { CameraCapture } from './components/CameraCapture';
 export { VideoRecorder } from './components/VideoRecorder';
+export { ProfilePictureCapture } from './components/ProfilePictureCapture';
+export type { ProfilePictureValidationResult } from './components/ProfilePictureCapture';
 export { ValidationProgress } from './components/ValidationProgress';
 export { ResultScreen } from './components/ResultScreen';
 export { ErrorScreen } from './components/ErrorScreen';