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

package/src/components/InstructionsScreen.tsx

@@ -0,0 +1,269 @@
+/**
+ * Instructions Screen Component
+ * Shows initial instructions before starting verification
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import { ThemeConfig, SupportedLanguage, getStrings } from '@hexar/biometric-identity-sdk-core';
+
+export interface InstructionsScreenProps {
+  theme?: ThemeConfig;
+  language?: SupportedLanguage;
+  onStart: () => void;
+}
+
+export const InstructionsScreen: React.FC<InstructionsScreenProps> = ({
+  theme,
+  language = 'en',
+  onStart,
+}) => {
+  const content = language === 'es' ? spanishContent : englishContent;
+
+  return (
+    <View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={[styles.title, { color: theme?.textColor || '#000000' }]}>
+          {content.title}
+        </Text>
+
+        <Text style={[styles.subtitle, { color: theme?.secondaryTextColor || '#6B7280' }]}>
+          {content.subtitle}
+        </Text>
+
+        {/* Steps */}
+        <View style={styles.stepsContainer}>
+          <InstructionStep
+            number={1}
+            title={content.step1Title}
+            description={content.step1Description}
+            theme={theme}
+          />
+          <InstructionStep
+            number={2}
+            title={content.step2Title}
+            description={content.step2Description}
+            theme={theme}
+          />
+          <InstructionStep
+            number={3}
+            title={content.step3Title}
+            description={content.step3Description}
+            theme={theme}
+          />
+        </View>
+
+        {/* Tips */}
+        <View style={styles.tipsContainer}>
+          <Text style={[styles.tipsTitle, { color: theme?.textColor || '#000000' }]}>
+            {content.tipsTitle}
+          </Text>
+          {content.tips.map((tip, index) => (
+            <Text key={index} style={styles.tipText}>
+              • {tip}
+            </Text>
+          ))}
+        </View>
+
+        {/* Privacy Notice */}
+        <View style={styles.privacyContainer}>
+          <Text style={styles.privacyText}>{content.privacy}</Text>
+        </View>
+      </ScrollView>
+
+      {/* Start Button */}
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={[
+            styles.button,
+            { backgroundColor: theme?.primaryColor || '#6366F1' },
+          ]}
+          onPress={onStart}
+        >
+          <Text style={styles.buttonText}>{content.startButton}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+interface InstructionStepProps {
+  number: number;
+  title: string;
+  description: string;
+  theme?: ThemeConfig;
+}
+
+const InstructionStep: React.FC<InstructionStepProps> = ({
+  number,
+  title,
+  description,
+  theme,
+}) => (
+  <View style={stepStyles.container}>
+    <View
+      style={[
+        stepStyles.numberContainer,
+        { backgroundColor: theme?.primaryColor || '#6366F1' },
+      ]}
+    >
+      <Text style={stepStyles.number}>{number}</Text>
+    </View>
+    <View style={stepStyles.content}>
+      <Text style={[stepStyles.title, { color: theme?.textColor || '#000000' }]}>
+        {title}
+      </Text>
+      <Text style={[stepStyles.description, { color: theme?.secondaryTextColor || '#6B7280' }]}>
+        {description}
+      </Text>
+    </View>
+  </View>
+);
+
+const stepStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginBottom: 24,
+  },
+  numberContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+  },
+  number: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  content: {
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    marginBottom: 32,
+    lineHeight: 24,
+  },
+  stepsContainer: {
+    marginBottom: 32,
+  },
+  tipsContainer: {
+    backgroundColor: '#F9FAFB',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 24,
+  },
+  tipsTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  tipText: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginVertical: 4,
+    lineHeight: 20,
+  },
+  privacyContainer: {
+    backgroundColor: '#EEF2FF',
+    padding: 16,
+    borderRadius: 8,
+  },
+  privacyText: {
+    fontSize: 12,
+    color: '#4F46E5',
+    lineHeight: 18,
+  },
+  footer: {
+    padding: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  button: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+const englishContent = {
+  title: 'Identity Verification',
+  subtitle: 'We need to verify your identity to continue. This process takes about 2 minutes.',
+  step1Title: 'Capture ID Front',
+  step1Description: 'Take a clear photo of the front of your ID document.',
+  step2Title: 'Capture ID Back',
+  step2Description: 'Take a clear photo of the back of your ID document.',
+  step3Title: 'Record Face Video',
+  step3Description: 'Record a short video of your face while following on-screen instructions.',
+  tipsTitle: 'Tips for Success',
+  tips: [
+    'Ensure good lighting without glare or shadows',
+    'Keep your ID flat and all edges visible',
+    'Remove glasses and face coverings',
+    'Find a quiet place without distractions',
+  ],
+  privacy: '🔒 Your data is encrypted and processed securely. We do not store your biometric data locally.',
+  startButton: 'Start Verification',
+};
+
+const spanishContent = {
+  title: 'Verificación de Identidad',
+  subtitle: 'Necesitamos verificar tu identidad para continuar. Este proceso toma aproximadamente 2 minutos.',
+  step1Title: 'Captura Frente del Documento',
+  step1Description: 'Toma una foto clara del frente de tu documento de identidad.',
+  step2Title: 'Captura Reverso del Documento',
+  step2Description: 'Toma una foto clara del reverso de tu documento de identidad.',
+  step3Title: 'Graba Video Facial',
+  step3Description: 'Graba un video corto de tu rostro siguiendo las instrucciones en pantalla.',
+  tipsTitle: 'Consejos para el Éxito',
+  tips: [
+    'Asegura buena iluminación sin brillos o sombras',
+    'Mantén tu documento plano y todos los bordes visibles',
+    'Quítate los lentes y cubiertas faciales',
+    'Encuentra un lugar tranquilo sin distracciones',
+  ],
+  privacy: '🔒 Tus datos están encriptados y procesados de forma segura. No almacenamos tus datos biométricos localmente.',
+  startButton: 'Iniciar Verificación',
+};
+
+export default InstructionsScreen;
+
+

package/src/components/ResultScreen.tsx

@@ -0,0 +1,301 @@
+/**
+ * Result Screen Component
+ * Shows validation result (pass/fail)
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+import { ValidationResult, ThemeConfig, SupportedLanguage } from '@hexar/biometric-identity-sdk-core';
+
+export interface ResultScreenProps {
+  result: ValidationResult;
+  theme?: ThemeConfig;
+  language?: SupportedLanguage;
+  onClose: () => void;
+}
+
+export const ResultScreen: React.FC<ResultScreenProps> = ({
+  result,
+  theme,
+  language = 'en',
+  onClose,
+}) => {
+  const isSuccess = result.isValidFaceMatch && result.isDocumentAuthentic;
+  const successColor = theme?.successColor || '#10B981';
+  const errorColor = theme?.errorColor || '#EF4444';
+
+  return (
+    <View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Result Icon */}
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: isSuccess ? successColor : errorColor },
+          ]}
+        >
+          <Text style={styles.icon}>{isSuccess ? '✓' : '✗'}</Text>
+        </View>
+
+        {/* Result Title */}
+        <Text style={[styles.title, { color: theme?.textColor || '#000000' }]}>
+          {isSuccess
+            ? (language === 'es' ? '¡Verificación Exitosa!' : 'Verification Successful!')
+            : (language === 'es' ? 'Verificación Fallida' : 'Verification Failed')}
+        </Text>
+
+        <Text style={[styles.subtitle, { color: theme?.secondaryTextColor || '#6B7280' }]}>
+          {isSuccess
+            ? (language === 'es'
+                ? 'Tu identidad ha sido verificada correctamente'
+                : 'Your identity has been verified successfully')
+            : (language === 'es'
+                ? 'No pudimos verificar tu identidad'
+                : 'We were unable to verify your identity')}
+        </Text>
+
+        {/* Scores */}
+        <View style={styles.scoresContainer}>
+          <ScoreCard
+            label={language === 'es' ? 'Coincidencia Facial' : 'Face Match'}
+            score={result.matchScore}
+            passed={result.isValidFaceMatch}
+            theme={theme}
+          />
+          <ScoreCard
+            label={language === 'es' ? 'Presencia Vital' : 'Liveness'}
+            score={result.livenessScore}
+            passed={result.livenessScore >= 80}
+            theme={theme}
+          />
+        </View>
+
+        {/* Document Data */}
+        {result.extractedDocumentData && (
+          <View style={styles.dataContainer}>
+            <Text style={[styles.sectionTitle, { color: theme?.textColor || '#000000' }]}>
+              {language === 'es' ? 'Datos Extraídos' : 'Extracted Data'}
+            </Text>
+            <DataRow
+              label={language === 'es' ? 'Nombre' : 'Name'}
+              value={`${result.extractedDocumentData.firstName} ${result.extractedDocumentData.lastName}`}
+              theme={theme}
+            />
+            <DataRow
+              label={language === 'es' ? 'Documento' : 'Document Number'}
+              value={result.extractedDocumentData.documentNumber}
+              theme={theme}
+            />
+            <DataRow
+              label={language === 'es' ? 'Fecha de Nacimiento' : 'Date of Birth'}
+              value={result.extractedDocumentData.dateOfBirth}
+              theme={theme}
+            />
+            <DataRow
+              label={language === 'es' ? 'Nacionalidad' : 'Nationality'}
+              value={result.extractedDocumentData.nationality}
+              theme={theme}
+            />
+          </View>
+        )}
+
+        {/* Warnings */}
+        {result.warnings.length > 0 && (
+          <View style={styles.warningsContainer}>
+            <Text style={[styles.sectionTitle, { color: theme?.warningColor || '#F59E0B' }]}>
+              {language === 'es' ? 'Advertencias' : 'Warnings'}
+            </Text>
+            {result.warnings.map((warning, index) => (
+              <Text key={index} style={styles.warningText}>
+                • {warning.replace(/_/g, ' ')}
+              </Text>
+            ))}
+          </View>
+        )}
+      </ScrollView>
+
+      {/* Action Button */}
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={[
+            styles.button,
+            { backgroundColor: theme?.primaryColor || '#6366F1' },
+          ]}
+          onPress={onClose}
+        >
+          <Text style={styles.buttonText}>
+            {language === 'es' ? 'Continuar' : 'Continue'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+interface ScoreCardProps {
+  label: string;
+  score: number;
+  passed: boolean;
+  theme?: ThemeConfig;
+}
+
+const ScoreCard: React.FC<ScoreCardProps> = ({ label, score, passed, theme }) => (
+  <View style={scoreStyles.container}>
+    <Text style={scoreStyles.label}>{label}</Text>
+    <Text
+      style={[
+        scoreStyles.score,
+        { color: passed ? (theme?.successColor || '#10B981') : (theme?.errorColor || '#EF4444') },
+      ]}
+    >
+      {Math.round(score)}
+    </Text>
+    <Text style={scoreStyles.status}>{passed ? '✓ Passed' : '✗ Failed'}</Text>
+  </View>
+);
+
+const scoreStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9FAFB',
+    padding: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginHorizontal: 8,
+  },
+  label: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 8,
+  },
+  score: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  status: {
+    fontSize: 12,
+    color: '#9CA3AF',
+  },
+});
+
+interface DataRowProps {
+  label: string;
+  value: string;
+  theme?: ThemeConfig;
+}
+
+const DataRow: React.FC<DataRowProps> = ({ label, value, theme }) => (
+  <View style={dataRowStyles.container}>
+    <Text style={[dataRowStyles.label, { color: theme?.secondaryTextColor || '#6B7280' }]}>
+      {label}
+    </Text>
+    <Text style={[dataRowStyles.value, { color: theme?.textColor || '#000000' }]}>
+      {value}
+    </Text>
+  </View>
+);
+
+const dataRowStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  content: {
+    padding: 24,
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  icon: {
+    fontSize: 40,
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+  scoresContainer: {
+    flexDirection: 'row',
+    width: '100%',
+    marginBottom: 32,
+  },
+  dataContainer: {
+    width: '100%',
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  warningsContainer: {
+    width: '100%',
+    backgroundColor: '#FEF3C7',
+    padding: 16,
+    borderRadius: 8,
+  },
+  warningText: {
+    fontSize: 14,
+    color: '#92400E',
+    marginVertical: 4,
+  },
+  footer: {
+    padding: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#E5E7EB',
+  },
+  button: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default ResultScreen;
+
+