@hexar/biometric-identity-sdk-react-native 1.0.34 → 1.0.36

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,KAAmD,MAAM,OAAO,CAAC;AASxE,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,CAuMtE,CAAC;AAuCF,eAAe,qBAAqB,CAAC"}

package/dist/components/ProfilePictureCapture.js

@@ -0,0 +1,225 @@
+"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);
+    (0, react_1.useEffect)(() => {
+        if (language) {
+            (0, biometric_identity_sdk_core_1.setLanguage)(language);
+        }
+    }, [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()) {
+                biometric_identity_sdk_core_1.logger.error('Backend not available - SDK not configured with backend');
+                throw new Error('NETWORK_ERROR');
+            }
+            const sessionId = videoResult.sessionId;
+            if (!sessionId) {
+                biometric_identity_sdk_core_1.logger.error('Session ID not available');
+                throw new Error('VALIDATION_ERROR');
+            }
+            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,
+                apiEndpoint,
+            });
+            const fullUrl = `${apiEndpoint}/profile/validate-face`;
+            biometric_identity_sdk_core_1.logger.info('Making request to biometry backend', { url: fullUrl });
+            const response = await fetch(fullUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': apiKey,
+                },
+                body: JSON.stringify(requestBody),
+            });
+            biometric_identity_sdk_core_1.logger.info('Backend response received', { status: response.status, ok: response.ok });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                biometric_identity_sdk_core_1.logger.error('Backend validation failed', { status: response.status, error: errorData });
+                throw new Error('VALIDATION_ERROR');
+            }
+            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;
+            const getErrorMessage = (code) => {
+                const messages = {
+                    NETWORK_ERROR: {
+                        en: 'Connection error. Please check your internet connection.',
+                        es: 'Error de conexión. Verifica tu conexión a internet.',
+                    },
+                    VALIDATION_TIMEOUT: {
+                        en: 'Validation took too long. Please try again.',
+                        es: 'La validación tardó demasiado. Intenta nuevamente.',
+                    },
+                    LIVENESS_CHECK_FAILED: {
+                        en: 'Liveness verification failed. Please try again.',
+                        es: 'La verificación de presencia vital falló. Por favor intenta de nuevo.',
+                    },
+                    UNKNOWN_ERROR: {
+                        en: 'An unexpected error occurred. Please try again.',
+                        es: 'Ocurrió un error inesperado. Por favor intenta de nuevo.',
+                    },
+                };
+                const message = messages[code] || messages.UNKNOWN_ERROR;
+                return language === 'es' || language === 'es-AR' ? message.es : message.en;
+            };
+            if (error.message === 'NETWORK_ERROR' || (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: getErrorMessage(errorCode),
+                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/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.34",
+  "version": "1.0.36",
   "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,267 @@
+import React, { useState, useCallback, useRef, useEffect } 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);
+
+  useEffect(() => {
+    if (language) {
+      setLanguage(language);
+    }
+  }, [language]);
+
+  const strings = getStrings();
+
+  const validateWithBackend = useCallback(async (videoResult: VideoRecordingResult): Promise<ProfilePictureValidationResult> => {
+    try {
+      const sdk = BiometricIdentitySDK.getInstance();
+      
+      if (!sdk.isUsingBackend()) {
+        logger.error('Backend not available - SDK not configured with backend');
+        throw new Error('NETWORK_ERROR');
+      }
+
+      const sessionId = videoResult.sessionId;
+      if (!sessionId) {
+        logger.error('Session ID not available');
+        throw new Error('VALIDATION_ERROR');
+      }
+
+      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,
+        apiEndpoint,
+      });
+
+      const fullUrl = `${apiEndpoint}/profile/validate-face`;
+      logger.info('Making request to biometry backend', { url: fullUrl });
+
+      const response = await fetch(fullUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': apiKey,
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      logger.info('Backend response received', { status: response.status, ok: response.ok });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        logger.error('Backend validation failed', { status: response.status, error: errorData });
+        throw new Error('VALIDATION_ERROR');
+      }
+
+      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;
+      
+      const getErrorMessage = (code: BiometricErrorCode): string => {
+        const messages: Record<string, { en: string; es: string }> = {
+          NETWORK_ERROR: {
+            en: 'Connection error. Please check your internet connection.',
+            es: 'Error de conexión. Verifica tu conexión a internet.',
+          },
+          VALIDATION_TIMEOUT: {
+            en: 'Validation took too long. Please try again.',
+            es: 'La validación tardó demasiado. Intenta nuevamente.',
+          },
+          LIVENESS_CHECK_FAILED: {
+            en: 'Liveness verification failed. Please try again.',
+            es: 'La verificación de presencia vital falló. Por favor intenta de nuevo.',
+          },
+          UNKNOWN_ERROR: {
+            en: 'An unexpected error occurred. Please try again.',
+            es: 'Ocurrió un error inesperado. Por favor intenta de nuevo.',
+          },
+        };
+
+        const message = messages[code] || messages.UNKNOWN_ERROR;
+        return language === 'es' || language === 'es-AR' ? message.es : message.en;
+      };
+      
+      if (error.message === 'NETWORK_ERROR' || (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: getErrorMessage(errorCode),
+        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/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';