amazing design

src/screens/Auth/VerificationScreen.js

@@ -6,8 +6,13 @@ import {
   SafeAreaView,
   Alert,
   TouchableOpacity,
+  TouchableWithoutFeedback,
+  Keyboard,
+  BackHandler,
+  Platform,
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
+import { useFocusEffect } from '@react-navigation/native';
 import { useAuth } from '../../contexts/AuthContext';
 import Button from '../../components/Button';
 import Input from '../../components/Input';
@@ -35,6 +40,21 @@ const VerificationScreen = ({ navigation }) => {
     };
   }, []);
 
+  // Handle Android hardware back button
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        handleGoBack();
+        return true; // Prevent default behavior
+      };
+
+      if (Platform.OS === 'android') {
+        BackHandler.addEventListener('hardwareBackPress', onBackPress);
+        return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      }
+    }, [handleGoBack])
+  );
+
   const startCountdown = () => {
     setCountdown(60);
     setCanResend(false);
@@ -73,24 +93,31 @@ const VerificationScreen = ({ navigation }) => {
     }
   };
 
-  const handleResendCode = () => {
+  const handleResendCode = async () => {
     if (!canResend) return;
     
     // Here you would call the API to resend the code
-    // For now, just restart the countdown
+    // For now, just restart the countdown 
     Alert.alert('Üstünlik', 'Täze tassyklama kody iberildi');
     startCountdown();
   };
 
-  const handleGoBack = () => {
+  const handleGoBack = React.useCallback(() => {
     clearPendingVerification();
-    navigation.goBack();
-  };
+    
+    // Check if we can go back, if not navigate to Login
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    } else {
+      navigation.navigate('Login');
+    }
+  }, [clearPendingVerification, navigation]);
 
   const formatPhoneNumber = (phone) => {
     if (!phone) return '';
     const phoneStr = phone.toString();
-    return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 5)} ${phoneStr.slice(5)}`;
+    
+    return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 4)}-${phoneStr.slice(4, 6)}-${phoneStr.slice(6)}`;
   };
 
   if (!pendingVerification) {
@@ -107,50 +134,54 @@ const VerificationScreen = ({ navigation }) => {
         </TouchableOpacity>
       </View>
 
-      <View style={styles.content}>
-        <View style={styles.logoContainer}>
-          <View style={styles.verificationIcon}>
-            <Text style={styles.verificationIconText}>✓</Text>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={styles.content}>
+          <View style={styles.logoContainer}>
+            <View style={styles.verificationIcon}>
+              <Text style={styles.verificationIconText}>✓</Text>
+            </View>
+            <Text style={styles.title}>Tassyklama</Text>
+            <Text style={styles.subtitle}>
+              {formatPhoneNumber(pendingVerification.phone)} belgisine iberilen 
+              6 sanly tassyklama koduny giriziň
+            </Text>
           </View>
-          <Text style={styles.title}>Tassyklama</Text>
-          <Text style={styles.subtitle}>
-            {formatPhoneNumber(pendingVerification.phone)} belgisine iberilen 
-            6 sanly tassyklama koduny giriziň
-          </Text>
-        </View>
 
-        <View style={styles.formContainer}>
-          <Input
-            label="Tassyklama kody"
-            value={code}
-            onChangeText={setCode}
-            placeholder="123456"
-            keyboardType="numeric"
-            maxLength={6}
-            style={styles.codeInput}
-            textAlign="center"
-          />
+          <View style={styles.formContainer}>
+            <Input
+              label="Tassyklama kody"
+              value={code}
+              onChangeText={setCode}
+              placeholder="123456"
+              keyboardType="numeric"
+              maxLength={6}
+              style={styles.codeInput}
+              textAlign="center"
+              returnKeyType="done"
+              onSubmitEditing={handleVerify}
+            />
 
-          <Button
-            title="Tassykla"
-            onPress={handleVerify}
-            loading={isLoading}
-            style={styles.verifyButton}
-          />
+            <Button
+              title="Tassykla"
+              onPress={handleVerify}
+              loading={isLoading}
+              style={styles.verifyButton}
+            />
 
-          <View style={styles.resendContainer}>
-            {canResend ? (
-              <TouchableOpacity onPress={handleResendCode}>
-                <Text style={styles.resendText}>Kodu gaýtadan iber</Text>
-              </TouchableOpacity>
-            ) : (
-              <Text style={styles.countdownText}>
-                Gaýtadan ibermek üçin {countdown} sekunt garaşyň
-              </Text>
-            )}
+            <View style={styles.resendContainer}>
+              {canResend ? (
+                <TouchableOpacity onPress={handleResendCode}>
+                  <Text style={styles.resendText}>Kodu gaýtadan iber</Text>
+                </TouchableOpacity>
+              ) : (
+                <Text style={styles.countdownText}>
+                  Gaýtadan ibermek üçin {countdown} sekunt garaşyň
+                </Text>
+              )}
+            </View>
           </View>
         </View>
-      </View>
+      </TouchableWithoutFeedback>
     </SafeAreaView>
   );
 };