@hexar/biometric-identity-sdk-react-native 1.0.0

package/src/components/CameraCapture.tsx

@@ -0,0 +1,262 @@
+/**
+ * Camera Capture Component for React Native
+ * Handles ID document photo capture
+ */
+
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { ThemeConfig } from '@hexar/biometric-identity-sdk-core';
+
+const { width, height } = Dimensions.get('window');
+
+export interface CameraCaptureProps {
+  mode: 'front' | 'back';
+  theme?: ThemeConfig;
+  onCapture: (imageData: string) => void;
+  onCancel: () => void;
+}
+
+export const CameraCapture: React.FC<CameraCaptureProps> = ({
+  mode,
+  theme,
+  onCapture,
+  onCancel,
+}) => {
+  const [isCapturing, setIsCapturing] = useState(false);
+  const cameraRef = useRef<any>(null);
+
+  const handleCapture = async () => {
+    if (isCapturing) return;
+
+    try {
+      setIsCapturing(true);
+
+      // In real implementation, this would use react-native-vision-camera
+      // For now, simulate capture
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      // Mock captured image data
+      const mockImageData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...';
+      
+      onCapture(mockImageData);
+    } catch (error) {
+      console.error('Capture error:', error);
+      setIsCapturing(false);
+    }
+  };
+
+  const instructions = mode === 'front'
+    ? 'Position the front of your ID within the frame'
+    : 'Position the back of your ID within the frame';
+
+  return (
+    <View style={styles.container}>
+      {/* Camera View - In real implementation, use react-native-vision-camera */}
+      <View style={styles.cameraContainer}>
+        <View style={styles.mockCamera}>
+          <Text style={styles.mockCameraText}>Camera View</Text>
+          <Text style={styles.mockCameraSubtext}>
+            (In production, this uses react-native-vision-camera)
+          </Text>
+        </View>
+
+        {/* Document Frame Overlay */}
+        <View style={styles.overlay}>
+          <View style={styles.frameContainer}>
+            <View style={styles.frame}>
+              <View style={[styles.corner, styles.cornerTopLeft]} />
+              <View style={[styles.corner, styles.cornerTopRight]} />
+              <View style={[styles.corner, styles.cornerBottomLeft]} />
+              <View style={[styles.corner, styles.cornerBottomRight]} />
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* Instructions */}
+      <View style={styles.instructionsContainer}>
+        <Text style={styles.instructionsText}>{instructions}</Text>
+        <Text style={styles.tipsText}>
+          • Ensure good lighting{'\n'}
+          • Avoid glare and shadows{'\n'}
+          • Keep document flat and complete
+        </Text>
+      </View>
+
+      {/* Controls */}
+      <View style={styles.controls}>
+        <TouchableOpacity
+          style={[styles.button, styles.cancelButton]}
+          onPress={onCancel}
+        >
+          <Text style={styles.buttonText}>Cancel</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.button,
+            styles.captureButton,
+            { backgroundColor: theme?.primaryColor || '#6366F1' },
+            isCapturing && styles.captureButtonDisabled,
+          ]}
+          onPress={handleCapture}
+          disabled={isCapturing}
+        >
+          <View style={styles.captureButtonInner} />
+        </TouchableOpacity>
+
+        <View style={styles.buttonPlaceholder} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  cameraContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  mockCamera: {
+    flex: 1,
+    backgroundColor: '#1F2937',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  mockCameraText: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  mockCameraSubtext: {
+    color: '#9CA3AF',
+    fontSize: 12,
+    textAlign: 'center',
+    paddingHorizontal: 32,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  frameContainer: {
+    width: width * 0.85,
+    height: width * 0.85 * 0.63, // ID card aspect ratio
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  frame: {
+    width: '100%',
+    height: '100%',
+    borderWidth: 2,
+    borderColor: '#FFFFFF',
+    borderRadius: 8,
+    borderStyle: 'dashed',
+  },
+  corner: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    borderColor: '#FFFFFF',
+  },
+  cornerTopLeft: {
+    top: -2,
+    left: -2,
+    borderTopWidth: 4,
+    borderLeftWidth: 4,
+    borderTopLeftRadius: 8,
+  },
+  cornerTopRight: {
+    top: -2,
+    right: -2,
+    borderTopWidth: 4,
+    borderRightWidth: 4,
+    borderTopRightRadius: 8,
+  },
+  cornerBottomLeft: {
+    bottom: -2,
+    left: -2,
+    borderBottomWidth: 4,
+    borderLeftWidth: 4,
+    borderBottomLeftRadius: 8,
+  },
+  cornerBottomRight: {
+    bottom: -2,
+    right: -2,
+    borderBottomWidth: 4,
+    borderRightWidth: 4,
+    borderBottomRightRadius: 8,
+  },
+  instructionsContainer: {
+    paddingVertical: 24,
+    paddingHorizontal: 32,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  instructionsText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  tipsText: {
+    color: '#D1D5DB',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  controls: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 32,
+    paddingHorizontal: 32,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+  },
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+  cancelButton: {
+    backgroundColor: '#374151',
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  captureButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captureButtonInner: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#FFFFFF',
+  },
+  captureButtonDisabled: {
+    opacity: 0.5,
+  },
+  buttonPlaceholder: {
+    width: 80,
+  },
+});
+
+export default CameraCapture;
+
+

package/src/components/ErrorScreen.tsx

@@ -0,0 +1,201 @@
+/**
+ * Error Screen Component
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { BiometricError, ThemeConfig, SupportedLanguage } from '@hexar/biometric-identity-sdk-core';
+
+export interface ErrorScreenProps {
+  error: BiometricError;
+  theme?: ThemeConfig;
+  language?: SupportedLanguage;
+  onRetry: () => void;
+  onClose: () => void;
+}
+
+export const ErrorScreen: React.FC<ErrorScreenProps> = ({
+  error,
+  theme,
+  language = 'en',
+  onRetry,
+  onClose,
+}) => {
+  const getErrorMessage = () => {
+    const messages: Record<string, { en: string; es: string }> = {
+      CAMERA_PERMISSION_DENIED: {
+        en: 'Camera permission is required to capture your ID and face video.',
+        es: 'Se requiere permiso de cámara para capturar tu documento y video facial.',
+      },
+      FACE_NOT_DETECTED: {
+        en: 'No face detected in the document. Please ensure the photo is clear.',
+        es: 'No se detectó rostro en el documento. Asegúrate de que la foto sea clara.',
+      },
+      POOR_IMAGE_QUALITY: {
+        en: 'Image quality is insufficient. Please avoid glare, blur, and ensure good lighting.',
+        es: 'La calidad de la imagen es insuficiente. Evita brillos, desenfoque y asegura buena iluminación.',
+      },
+      LIVENESS_CHECK_FAILED: {
+        en: 'Liveness verification failed. Please record a new video following the instructions.',
+        es: 'La verificación de presencia vital falló. Por favor graba un nuevo video siguiendo las instrucciones.',
+      },
+      FACE_MATCH_FAILED: {
+        en: 'The face in the video does not match the document photo.',
+        es: 'El rostro en el video no coincide con la foto del documento.',
+      },
+      DOCUMENT_TAMPERED: {
+        en: 'Document appears to be tampered or altered.',
+        es: 'El documento parece estar adulterado o alterado.',
+      },
+    };
+
+    const message = messages[error.code] || {
+      en: 'An unexpected error occurred. Please try again.',
+      es: 'Ocurrió un error inesperado. Por favor intenta de nuevo.',
+    };
+
+    return language === 'es' ? message.es : message.en;
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        {/* Error Icon */}
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: theme?.errorColor || '#EF4444' },
+          ]}
+        >
+          <Text style={styles.icon}>✗</Text>
+        </View>
+
+        {/* Error Title */}
+        <Text style={[styles.title, { color: theme?.textColor || '#000000' }]}>
+          {language === 'es' ? 'Error de Verificación' : 'Verification Error'}
+        </Text>
+
+        {/* Error Message */}
+        <Text style={[styles.message, { color: theme?.secondaryTextColor || '#6B7280' }]}>
+          {getErrorMessage()}
+        </Text>
+
+        {/* Error Code */}
+        <View style={styles.codeContainer}>
+          <Text style={styles.codeLabel}>
+            {language === 'es' ? 'Código de Error:' : 'Error Code:'}
+          </Text>
+          <Text style={styles.codeText}>{error.code}</Text>
+        </View>
+
+        {/* Action Buttons */}
+        <View style={styles.buttonsContainer}>
+          <TouchableOpacity
+            style={[
+              styles.button,
+              styles.retryButton,
+              { backgroundColor: theme?.primaryColor || '#6366F1' },
+            ]}
+            onPress={onRetry}
+          >
+            <Text style={styles.buttonText}>
+              {language === 'es' ? 'Reintentar' : 'Try Again'}
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[styles.button, styles.closeButton]}
+            onPress={onClose}
+          >
+            <Text style={[styles.buttonText, { color: theme?.textColor || '#000000' }]}>
+              {language === 'es' ? 'Cerrar' : 'Close'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    width: '85%',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  icon: {
+    fontSize: 40,
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 16,
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  codeContainer: {
+    backgroundColor: '#F3F4F6',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    marginBottom: 32,
+  },
+  codeLabel: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  codeText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#111827',
+  },
+  buttonsContainer: {
+    width: '100%',
+  },
+  button: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginVertical: 8,
+  },
+  retryButton: {},
+  closeButton: {
+    backgroundColor: '#F3F4F6',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+});
+
+export default ErrorScreen;
+
+