@onairos/react-native 3.1.15 → 3.1.17

package/src/components/PinCreationScreen.tsx

@@ -1,492 +1,492 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  TextInput,
-  Alert,
-  ActivityIndicator,
-} from 'react-native';
-import { COLORS } from '../theme';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import { biometricPinService } from '../services/biometricPinService';
-import { setTemporaryPin } from '../services/pinStorageUtils';
-
-interface PinCreationScreenProps {
-  visible: boolean;
-  onComplete: (pin: string) => void;
-  onBack: () => void;
-}
-
-const PinCreationScreen: React.FC<PinCreationScreenProps> = ({
-  visible,
-  onComplete,
-  onBack,
-}) => {
-  const [pin, setPin] = useState('');
-  const [requirements, setRequirements] = useState({
-    length: false,
-    uppercase: false,
-    number: false,
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [biometricAvailable, setBiometricAvailable] = useState(false);
-  const [biometricStatus, setBiometricStatus] = useState<'checking' | 'available' | 'unavailable' | 'storing' | 'success' | 'error'>('checking');
-
-  const validatePin = (pinText: string) => {
-    const newRequirements = {
-      length: pinText.length >= 6,
-      uppercase: /[A-Z]/.test(pinText),
-      number: /[0-9]/.test(pinText),
-    };
-    setRequirements(newRequirements);
-    return Object.values(newRequirements).every(req => req);
-  };
-
-  const handlePinChange = (text: string) => {
-    setPin(text);
-    validatePin(text);
-  };
-
-  const handleContinue = async () => {
-    if (!validatePin(pin)) {
-      triggerHaptic(HapticType.ERROR);
-      Alert.alert('Invalid PIN', 'Please ensure your PIN meets all requirements.');
-      return;
-    }
-
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setIsLoading(true);
-
-    try {
-      console.log('🔐 Starting PIN creation process...');
-      
-      // Store PIN temporarily for the onboarding flow first
-      setTemporaryPin(pin);
-      console.log('📝 PIN stored temporarily for onboarding');
-
-      // If biometric is available, immediately trigger Face ID authentication
-      if (biometricAvailable) {
-        setBiometricStatus('storing');
-        console.log('🔐 [PIN CREATION] Biometric storage enabled, starting biometric flow...');
-        
-        // Double-check biometric availability right before triggering
-        const biometricStillAvailable = await biometricPinService.isBiometricAvailable();
-        console.log('📱 [PIN CREATION] Biometric available before storage:', biometricStillAvailable);
-        
-        if (!biometricStillAvailable) {
-          console.error('❌ [PIN CREATION] Face ID not available on this device');
-          setBiometricStatus('unavailable');
-          setIsLoading(false);
-          return;
-        }
-        
-        // Immediately attempt to store PIN with biometric authentication
-        console.log('🔐 [PIN CREATION] Triggering biometric authentication for PIN storage...');
-        
-        // This will immediately show the Face ID prompt
-        const stored = await biometricPinService.storePinWithBiometric(pin);
-        
-        if (stored) {
-          console.log('✅ PIN stored successfully with Face ID');
-          
-          // Verify the PIN was actually stored by checking if it can be retrieved
-          const isStored = await biometricPinService.isPinStored();
-          if (isStored) {
-            console.log('✅ PIN storage verified - proceeding with onboarding');
-            setBiometricStatus('success');
-            triggerHaptic(HapticType.SUCCESS);
-            
-            // Brief success state, then continue
-            setTimeout(() => {
-              setIsLoading(false);
-              onComplete(pin);
-            }, 800);
-          } else {
-            console.error('❌ PIN storage verification failed');
-            setBiometricStatus('error');
-            setIsLoading(false);
-            triggerHaptic(HapticType.ERROR);
-            Alert.alert(
-              'PIN Storage Error',
-              'PIN storage verification failed. Please try again.',
-              [{ text: 'OK' }]
-            );
-          }
-        } else {
-          console.log('⚠️ Face ID authentication was cancelled or failed');
-          setBiometricStatus('error');
-          triggerHaptic(HapticType.ERROR);
-          
-          // Show error but still allow continuation
-          Alert.alert(
-            'Face ID Setup',
-            'Face ID authentication was cancelled or failed. Your PIN is still saved securely.',
-            [
-              {
-                text: 'Try Again',
-                onPress: () => {
-                  setIsLoading(false);
-                  setBiometricStatus('available');
-                }
-              },
-              {
-                text: 'Continue Without Face ID',
-                onPress: () => {
-                  setIsLoading(false);
-                  onComplete(pin);
-                }
-              }
-            ]
-          );
-        }
-      } else {
-        console.log('📱 Biometric not available, continuing without Face ID');
-        setBiometricStatus('unavailable');
-        setIsLoading(false);
-        onComplete(pin);
-      }
-    } catch (error) {
-      console.error('❌ Error in PIN creation process:', error);
-      setBiometricStatus('error');
-      setIsLoading(false);
-      triggerHaptic(HapticType.ERROR);
-      Alert.alert(
-        'PIN Creation Error',
-        'There was an issue creating your PIN. Please try again.',
-        [{ text: 'OK' }]
-      );
-    }
-  };
-
-  const handleBack = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    onBack();
-  };
-
-  // Check biometric availability on component mount
-  useEffect(() => {
-    const checkBiometric = async () => {
-      try {
-        setBiometricStatus('checking');
-        const available = await biometricPinService.isBiometricAvailable();
-        setBiometricAvailable(available);
-        setBiometricStatus(available ? 'available' : 'unavailable');
-        console.log('📱 Biometric availability check:', available);
-      } catch (error) {
-        console.error('❌ Error checking biometric availability:', error);
-        setBiometricAvailable(false);
-        setBiometricStatus('unavailable');
-      }
-    };
-
-    if (visible) {
-      checkBiometric();
-    }
-  }, [visible]);
-
-  const allRequirementsMet = Object.values(requirements).every(req => req);
-
-  if (!visible) return null;
-
-  return (
-    <View style={styles.container}>
-      {/* Title */}
-      <View style={styles.titleContainer}>
-        <Text style={styles.title}>Create a PIN</Text>
-        <Text style={styles.subtitle}>A PIN so only you have access to your data.</Text>
-      </View>
-
-      {/* PIN Input */}
-      <View style={styles.pinContainer}>
-        <TextInput
-          style={styles.pinInput}
-          value={pin}
-          onChangeText={handlePinChange}
-          placeholder="Enter your PIN"
-          secureTextEntry
-          autoFocus
-          maxLength={20}
-        />
-      </View>
-
-      {/* Requirements */}
-      <View style={styles.requirementsContainer}>
-        <Text style={styles.requirementsTitle}>Your PIN must:</Text>
-        
-        <View style={styles.requirementItem}>
-          <View style={[styles.checkbox, requirements.length && styles.checkboxChecked]}>
-            {requirements.length && <Text style={styles.checkmark}>✓</Text>}
-          </View>
-          <Text style={[styles.requirementText, requirements.length && styles.requirementTextMet]}>
-            Be at least 6 characters in length.
-          </Text>
-        </View>
-
-        <View style={styles.requirementItem}>
-          <View style={[styles.checkbox, requirements.uppercase && styles.checkboxChecked]}>
-            {requirements.uppercase && <Text style={styles.checkmark}>✓</Text>}
-          </View>
-          <Text style={[styles.requirementText, requirements.uppercase && styles.requirementTextMet]}>
-            Contain an uppercase letter.
-          </Text>
-        </View>
-
-        <View style={styles.requirementItem}>
-          <View style={[styles.checkbox, requirements.number && styles.checkboxChecked]}>
-            {requirements.number && <Text style={styles.checkmark}>✓</Text>}
-          </View>
-          <Text style={[styles.requirementText, requirements.number && styles.requirementTextMet]}>
-            Contain a number.
-          </Text>
-        </View>
-      </View>
-
-      {/* FaceID Security Card */}
-      <View style={[
-        styles.securityCard,
-        biometricStatus === 'success' && styles.securityCardSuccess,
-        biometricStatus === 'error' && styles.securityCardError
-      ]}>
-        <View style={styles.securityIconContainer}>
-          {biometricStatus === 'checking' && (
-            <ActivityIndicator size="small" color={COLORS.grey600} />
-          )}
-          {biometricStatus === 'storing' && (
-            <ActivityIndicator size="small" color="#D4A536" />
-          )}
-          {biometricStatus === 'available' && (
-            <Text style={styles.securityIcon}>🔐</Text>
-          )}
-          {biometricStatus === 'unavailable' && (
-            <Text style={styles.securityIcon}>⚠️</Text>
-          )}
-          {biometricStatus === 'success' && (
-            <Text style={styles.securityIcon}>✅</Text>
-          )}
-          {biometricStatus === 'error' && (
-            <Text style={styles.securityIcon}>❌</Text>
-          )}
-        </View>
-        <View style={styles.securityTextContainer}>
-          <Text style={styles.securityTitle}>
-            {biometricStatus === 'checking' && 'Checking Face ID...'}
-            {biometricStatus === 'available' && 'Enhanced Security'}
-            {biometricStatus === 'unavailable' && 'Face ID Unavailable'}
-            {biometricStatus === 'storing' && 'Securing with Face ID...'}
-            {biometricStatus === 'success' && 'PIN Secured with Face ID'}
-            {biometricStatus === 'error' && 'Face ID Setup Failed'}
-          </Text>
-          <Text style={styles.securityDescription}>
-            {biometricStatus === 'checking' && 'Verifying Face ID availability on your device.'}
-            {biometricStatus === 'available' && 'We use Face ID to ensure only you can access your data.'}
-            {biometricStatus === 'unavailable' && 'Face ID is not available on this device. Your PIN will be stored securely.'}
-            {biometricStatus === 'storing' && 'Please authenticate with Face ID to secure your PIN.'}
-            {biometricStatus === 'success' && 'Your PIN is now protected with Face ID authentication.'}
-            {biometricStatus === 'error' && 'Face ID setup failed, but your PIN is stored securely.'}
-          </Text>
-        </View>
-      </View>
-
-      {/* Continue Button */}
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity 
-          style={[
-            styles.continueButton,
-            allRequirementsMet && styles.continueButtonActive
-          ]}
-          onPress={handleContinue}
-          disabled={!allRequirementsMet || isLoading}
-        >
-          {isLoading ? (
-            <ActivityIndicator size="small" color="#FFFFFF" />
-          ) : (
-            <Text style={[
-              styles.continueButtonText,
-              allRequirementsMet && styles.continueButtonTextActive
-            ]}>
-              Continue
-            </Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.surface,
-    paddingHorizontal: 24,
-    paddingTop: 0,
-  },
-
-  titleContainer: {
-    alignItems: 'center',
-    marginBottom: 15,
-    paddingTop: -10,
-    marginTop: -15,
-  },
-
-  title: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: COLORS.grey800,
-    marginBottom: 8,
-    fontFamily: 'IBM Plex Sans',
-  },
-
-  subtitle: {
-    fontSize: 16,
-    color: COLORS.grey600,
-    lineHeight: 24,
-    fontFamily: 'Inter',
-  },
-
-  pinContainer: {
-    marginBottom: 32,
-  },
-
-  pinInput: {
-    backgroundColor: '#F8F9FA',
-    borderRadius: 12,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    borderWidth: 1,
-    borderColor: '#E5E5E5',
-  },
-
-  requirementsContainer: {
-    marginBottom: 32,
-  },
-
-  requirementsTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 16,
-    fontFamily: 'Inter',
-  },
-
-  requirementItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    borderWidth: 2,
-    borderColor: '#E5E5E5',
-    marginRight: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  checkboxChecked: {
-    borderColor: '#4CD964',
-    backgroundColor: '#4CD964',
-  },
-
-  checkmark: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
-
-  requirementText: {
-    fontSize: 14,
-    color: COLORS.grey600,
-    fontFamily: 'Inter',
-    flex: 1,
-  },
-
-  requirementTextMet: {
-    color: COLORS.grey800,
-  },
-
-  securityCard: {
-    backgroundColor: '#F8F9FA',
-    borderRadius: 12,
-    padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 24,
-    borderWidth: 1,
-    borderColor: '#E5E5E5',
-  },
-
-  securityCardSuccess: {
-    backgroundColor: '#F0FDF4',
-    borderColor: '#22C55E',
-  },
-
-  securityCardError: {
-    backgroundColor: '#FEF2F2',
-    borderColor: '#EF4444',
-  },
-
-  securityIconContainer: {
-    marginRight: 12,
-  },
-
-  securityIcon: {
-    fontSize: 24,
-  },
-
-  securityTextContainer: {
-    flex: 1,
-  },
-
-  securityTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 4,
-    fontFamily: 'Inter',
-  },
-
-  securityDescription: {
-    fontSize: 13,
-    color: COLORS.grey600,
-    lineHeight: 18,
-    fontFamily: 'Inter',
-  },
-
-  buttonContainer: {
-    marginTop: 'auto',
-    paddingBottom: 34,
-  },
-
-  continueButton: {
-    backgroundColor: '#E5E5E5',
-    borderRadius: 25,
-    paddingVertical: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  continueButtonActive: {
-    backgroundColor: '#2D3436',
-  },
-
-  continueButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#999999',
-    fontFamily: 'Inter',
-  },
-
-  continueButtonTextActive: {
-    color: '#FFFFFF',
-  },
-});
-
-export { PinCreationScreen };
-export default PinCreationScreen;
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  Alert,
+  ActivityIndicator,
+} from 'react-native';
+import { COLORS } from '../theme';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import { biometricPinService } from '../services/biometricPinService';
+import { setTemporaryPin } from '../services/pinStorageUtils';
+
+interface PinCreationScreenProps {
+  visible: boolean;
+  onComplete: (pin: string) => void;
+  onBack: () => void;
+}
+
+const PinCreationScreen: React.FC<PinCreationScreenProps> = ({
+  visible,
+  onComplete,
+  onBack,
+}) => {
+  const [pin, setPin] = useState('');
+  const [requirements, setRequirements] = useState({
+    length: false,
+    uppercase: false,
+    number: false,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [biometricAvailable, setBiometricAvailable] = useState(false);
+  const [biometricStatus, setBiometricStatus] = useState<'checking' | 'available' | 'unavailable' | 'storing' | 'success' | 'error'>('checking');
+
+  const validatePin = (pinText: string) => {
+    const newRequirements = {
+      length: pinText.length >= 6,
+      uppercase: /[A-Z]/.test(pinText),
+      number: /[0-9]/.test(pinText),
+    };
+    setRequirements(newRequirements);
+    return Object.values(newRequirements).every(req => req);
+  };
+
+  const handlePinChange = (text: string) => {
+    setPin(text);
+    validatePin(text);
+  };
+
+  const handleContinue = async () => {
+    if (!validatePin(pin)) {
+      triggerHaptic(HapticType.ERROR);
+      Alert.alert('Invalid PIN', 'Please ensure your PIN meets all requirements.');
+      return;
+    }
+
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setIsLoading(true);
+
+    try {
+      console.log('🔐 Starting PIN creation process...');
+      
+      // Store PIN temporarily for the onboarding flow first
+      setTemporaryPin(pin);
+      console.log('📝 PIN stored temporarily for onboarding');
+
+      // If biometric is available, immediately trigger Face ID authentication
+      if (biometricAvailable) {
+        setBiometricStatus('storing');
+        console.log('🔐 [PIN CREATION] Biometric storage enabled, starting biometric flow...');
+        
+        // Double-check biometric availability right before triggering
+        const biometricStillAvailable = await biometricPinService.isBiometricAvailable();
+        console.log('📱 [PIN CREATION] Biometric available before storage:', biometricStillAvailable);
+        
+        if (!biometricStillAvailable) {
+          console.error('❌ [PIN CREATION] Face ID not available on this device');
+          setBiometricStatus('unavailable');
+          setIsLoading(false);
+          return;
+        }
+        
+        // Immediately attempt to store PIN with biometric authentication
+        console.log('🔐 [PIN CREATION] Triggering biometric authentication for PIN storage...');
+        
+        // This will immediately show the Face ID prompt
+        const stored = await biometricPinService.storePinWithBiometric(pin);
+        
+        if (stored) {
+          console.log('✅ PIN stored successfully with Face ID');
+          
+          // Verify the PIN was actually stored by checking if it can be retrieved
+          const isStored = await biometricPinService.isPinStored();
+          if (isStored) {
+            console.log('✅ PIN storage verified - proceeding with onboarding');
+            setBiometricStatus('success');
+            triggerHaptic(HapticType.SUCCESS);
+            
+            // Brief success state, then continue
+            setTimeout(() => {
+              setIsLoading(false);
+              onComplete(pin);
+            }, 800);
+          } else {
+            console.error('❌ PIN storage verification failed');
+            setBiometricStatus('error');
+            setIsLoading(false);
+            triggerHaptic(HapticType.ERROR);
+            Alert.alert(
+              'PIN Storage Error',
+              'PIN storage verification failed. Please try again.',
+              [{ text: 'OK' }]
+            );
+          }
+        } else {
+          console.log('⚠️ Face ID authentication was cancelled or failed');
+          setBiometricStatus('error');
+          triggerHaptic(HapticType.ERROR);
+          
+          // Show error but still allow continuation
+          Alert.alert(
+            'Face ID Setup',
+            'Face ID authentication was cancelled or failed. Your PIN is still saved securely.',
+            [
+              {
+                text: 'Try Again',
+                onPress: () => {
+                  setIsLoading(false);
+                  setBiometricStatus('available');
+                }
+              },
+              {
+                text: 'Continue Without Face ID',
+                onPress: () => {
+                  setIsLoading(false);
+                  onComplete(pin);
+                }
+              }
+            ]
+          );
+        }
+      } else {
+        console.log('📱 Biometric not available, continuing without Face ID');
+        setBiometricStatus('unavailable');
+        setIsLoading(false);
+        onComplete(pin);
+      }
+    } catch (error) {
+      console.error('❌ Error in PIN creation process:', error);
+      setBiometricStatus('error');
+      setIsLoading(false);
+      triggerHaptic(HapticType.ERROR);
+      Alert.alert(
+        'PIN Creation Error',
+        'There was an issue creating your PIN. Please try again.',
+        [{ text: 'OK' }]
+      );
+    }
+  };
+
+  const handleBack = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    onBack();
+  };
+
+  // Check biometric availability on component mount
+  useEffect(() => {
+    const checkBiometric = async () => {
+      try {
+        setBiometricStatus('checking');
+        const available = await biometricPinService.isBiometricAvailable();
+        setBiometricAvailable(available);
+        setBiometricStatus(available ? 'available' : 'unavailable');
+        console.log('📱 Biometric availability check:', available);
+      } catch (error) {
+        console.error('❌ Error checking biometric availability:', error);
+        setBiometricAvailable(false);
+        setBiometricStatus('unavailable');
+      }
+    };
+
+    if (visible) {
+      checkBiometric();
+    }
+  }, [visible]);
+
+  const allRequirementsMet = Object.values(requirements).every(req => req);
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.container}>
+      {/* Title */}
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>Create a PIN</Text>
+        <Text style={styles.subtitle}>A PIN so only you have access to your data.</Text>
+      </View>
+
+      {/* PIN Input */}
+      <View style={styles.pinContainer}>
+        <TextInput
+          style={styles.pinInput}
+          value={pin}
+          onChangeText={handlePinChange}
+          placeholder="Enter your PIN"
+          secureTextEntry
+          autoFocus
+          maxLength={20}
+        />
+      </View>
+
+      {/* Requirements */}
+      <View style={styles.requirementsContainer}>
+        <Text style={styles.requirementsTitle}>Your PIN must:</Text>
+        
+        <View style={styles.requirementItem}>
+          <View style={[styles.checkbox, requirements.length && styles.checkboxChecked]}>
+            {requirements.length && <Text style={styles.checkmark}>✓</Text>}
+          </View>
+          <Text style={[styles.requirementText, requirements.length && styles.requirementTextMet]}>
+            Be at least 6 characters in length.
+          </Text>
+        </View>
+
+        <View style={styles.requirementItem}>
+          <View style={[styles.checkbox, requirements.uppercase && styles.checkboxChecked]}>
+            {requirements.uppercase && <Text style={styles.checkmark}>✓</Text>}
+          </View>
+          <Text style={[styles.requirementText, requirements.uppercase && styles.requirementTextMet]}>
+            Contain an uppercase letter.
+          </Text>
+        </View>
+
+        <View style={styles.requirementItem}>
+          <View style={[styles.checkbox, requirements.number && styles.checkboxChecked]}>
+            {requirements.number && <Text style={styles.checkmark}>✓</Text>}
+          </View>
+          <Text style={[styles.requirementText, requirements.number && styles.requirementTextMet]}>
+            Contain a number.
+          </Text>
+        </View>
+      </View>
+
+      {/* FaceID Security Card */}
+      <View style={[
+        styles.securityCard,
+        biometricStatus === 'success' && styles.securityCardSuccess,
+        biometricStatus === 'error' && styles.securityCardError
+      ]}>
+        <View style={styles.securityIconContainer}>
+          {biometricStatus === 'checking' && (
+            <ActivityIndicator size="small" color={COLORS.grey600} />
+          )}
+          {biometricStatus === 'storing' && (
+            <ActivityIndicator size="small" color="#D4A536" />
+          )}
+          {biometricStatus === 'available' && (
+            <Text style={styles.securityIcon}>🔐</Text>
+          )}
+          {biometricStatus === 'unavailable' && (
+            <Text style={styles.securityIcon}>⚠️</Text>
+          )}
+          {biometricStatus === 'success' && (
+            <Text style={styles.securityIcon}>✅</Text>
+          )}
+          {biometricStatus === 'error' && (
+            <Text style={styles.securityIcon}>❌</Text>
+          )}
+        </View>
+        <View style={styles.securityTextContainer}>
+          <Text style={styles.securityTitle}>
+            {biometricStatus === 'checking' && 'Checking Face ID...'}
+            {biometricStatus === 'available' && 'Enhanced Security'}
+            {biometricStatus === 'unavailable' && 'Face ID Unavailable'}
+            {biometricStatus === 'storing' && 'Securing with Face ID...'}
+            {biometricStatus === 'success' && 'PIN Secured with Face ID'}
+            {biometricStatus === 'error' && 'Face ID Setup Failed'}
+          </Text>
+          <Text style={styles.securityDescription}>
+            {biometricStatus === 'checking' && 'Verifying Face ID availability on your device.'}
+            {biometricStatus === 'available' && 'We use Face ID to ensure only you can access your data.'}
+            {biometricStatus === 'unavailable' && 'Face ID is not available on this device. Your PIN will be stored securely.'}
+            {biometricStatus === 'storing' && 'Please authenticate with Face ID to secure your PIN.'}
+            {biometricStatus === 'success' && 'Your PIN is now protected with Face ID authentication.'}
+            {biometricStatus === 'error' && 'Face ID setup failed, but your PIN is stored securely.'}
+          </Text>
+        </View>
+      </View>
+
+      {/* Continue Button */}
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity 
+          style={[
+            styles.continueButton,
+            allRequirementsMet && styles.continueButtonActive
+          ]}
+          onPress={handleContinue}
+          disabled={!allRequirementsMet || isLoading}
+        >
+          {isLoading ? (
+            <ActivityIndicator size="small" color="#FFFFFF" />
+          ) : (
+            <Text style={[
+              styles.continueButtonText,
+              allRequirementsMet && styles.continueButtonTextActive
+            ]}>
+              Continue
+            </Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.surface,
+    paddingHorizontal: 24,
+    paddingTop: 0,
+  },
+
+  titleContainer: {
+    alignItems: 'center',
+    marginBottom: 15,
+    paddingTop: -10,
+    marginTop: -15,
+  },
+
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: COLORS.grey800,
+    marginBottom: 8,
+    fontFamily: 'IBM Plex Sans',
+  },
+
+  subtitle: {
+    fontSize: 16,
+    color: COLORS.grey600,
+    lineHeight: 24,
+    fontFamily: 'Inter',
+  },
+
+  pinContainer: {
+    marginBottom: 32,
+  },
+
+  pinInput: {
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+
+  requirementsContainer: {
+    marginBottom: 32,
+  },
+
+  requirementsTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 16,
+    fontFamily: 'Inter',
+  },
+
+  requirementItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#E5E5E5',
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  checkboxChecked: {
+    borderColor: '#4CD964',
+    backgroundColor: '#4CD964',
+  },
+
+  checkmark: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+
+  requirementText: {
+    fontSize: 14,
+    color: COLORS.grey600,
+    fontFamily: 'Inter',
+    flex: 1,
+  },
+
+  requirementTextMet: {
+    color: COLORS.grey800,
+  },
+
+  securityCard: {
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 24,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+
+  securityCardSuccess: {
+    backgroundColor: '#F0FDF4',
+    borderColor: '#22C55E',
+  },
+
+  securityCardError: {
+    backgroundColor: '#FEF2F2',
+    borderColor: '#EF4444',
+  },
+
+  securityIconContainer: {
+    marginRight: 12,
+  },
+
+  securityIcon: {
+    fontSize: 24,
+  },
+
+  securityTextContainer: {
+    flex: 1,
+  },
+
+  securityTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 4,
+    fontFamily: 'Inter',
+  },
+
+  securityDescription: {
+    fontSize: 13,
+    color: COLORS.grey600,
+    lineHeight: 18,
+    fontFamily: 'Inter',
+  },
+
+  buttonContainer: {
+    marginTop: 'auto',
+    paddingBottom: 34,
+  },
+
+  continueButton: {
+    backgroundColor: '#E5E5E5',
+    borderRadius: 25,
+    paddingVertical: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  continueButtonActive: {
+    backgroundColor: '#2D3436',
+  },
+
+  continueButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#999999',
+    fontFamily: 'Inter',
+  },
+
+  continueButtonTextActive: {
+    color: '#FFFFFF',
+  },
+});
+
+export { PinCreationScreen };
+export default PinCreationScreen;